Value Bubbles for Range Inputs

Содержание
  1. Update! New version with Vanilla JavaScript that also works better.
  2. Input type text — текстовое поле HTML
  3. Input type password — поле для ввода пароля
  4. Input type color — выбор цвета
  5. Типы элемента INPUT
  6. Кнопка BUTTON
  7. Флажок CHECKBOX
  8. Выбор цвета
  9. Поле ввода даты
  10. Поле ввода адреса электронной почты
  11. Файл FILE
  12. Скрытое поле HIDDEN
  13. Поле ввода чисел NUMBER
  14. Поле ввода пароля PASSWORD
  15. Переключатель RADIO
  16. Ползунок RANGE
  17. Кнопка RESET
  18. Кнопка SUBMIT
  19. Input type number — поле для ввода чисел
  20. Input type month — поле для ввода месяца
  21. Input type datetime — дата и время
  22. Input type datetime-local — локальное время
  23. Input type button — простая кнопка
  24. Input type search — поле для ввода поискового запроса
  25. Input type week — поле для выбора недели
  26. Input type hidden — скрытое поле
  27. Input type email — поле для ввода адреса электронной почты
  28. Input type time — поле для ввода времени
  29. Input type tel — поле для ввода номера телефона
  30. Input type reset — кнопка сброса, очистки полей
  31. Input type radio — переключатель
  32. Input type url — поле для ввода URL адреса
  33. Input type file — поле для загрузки файла
  34. Input type submit — кнопка отправки формы
  35. Input type image — кнопка-картинка
  36. Input type date — поле для ввода даты
  37. Input type checkbox — чек-бокс, флажок, галочка
  38. Input type range — диапазон, ползунок HTML

Update! New version with Vanilla JavaScript that also works better.

Наша цель здесь — отобразить «пузырь», показывающий текущее значение входного диапазона.


Установка значения нашего «пузыря» из входного значения — это вопрос вытягивания значения интервала и помещения его в пузырек:

range.addEventListener («ввод», () => {bubble.innerHTML = rangel.value; });

Хитрость заключается в том, чтобы расположить пузырек вдоль входа диапазона так, чтобы он скользил вдоль «большого пальца». Для этого нам нужно будет вычислить, на какой% пузырек нужно сместить влево. Итак, давайте создадим функцию для этого, чтобы все было немного чище:

range.addEventListener («вход», () => {setBubble (диапазон, пузырь);}); setBubble функция (интервал, пузырь) {const val = range.value; const min = range.min? interval.min: 0; const max = range.max? range.max: 100; const newVal = Number (((val — min) * 100) / (max — min)); bubble.innerHTML = val; // Сортировка магических чисел по размеру большого пальца в собственном пользовательском интерфейсе bubble.style.left = newVal = «%»; }

Убедившись, что мы учитываем атрибуты min и max входных значений диапазона, и вычисляем процентное положение между 0-100 на основе текущего значения в этом диапазоне. Не все диапазоны являются числами по умолчанию от 0 до 100, поэтому предположим, что диапазон был равен 50 в диапазоне от 0 до 200, что составляет 25% пути. Это объясняет это.

Но у него есть один досадный недостаток: пузырь находится слишком далеко влево в начале и слишком далеко вправо в конце. На входах диапазона большой палец не свисает с левого края, поэтому центр находится в начале и такой же в конце. Как и полоса прокрутки, края большого пальца останавливаются внутри дорожки.

Мы можем использовать некоторые магические числа, которые, кажется, неплохо работают во всех браузерах:

// Сортировка магических чисел по размеру большого пальца в собственном пользовательском интерфейсе bubble.style.left = `calc ($ {newVal}% + ($ {8 — newVal * 0.15} px))`;

Вот последняя демонстрация:

Я был вдохновлен этим, потому что читатель Макс Глоба написал свою версию, которую я опубликую здесь:

Интересным аспектом версии Макса является то, что ввод диапазона выполнен в стиле CSS, поэтому известен точный размер ползунка. Есть некоторые числа, которые выглядят довольно волшебно в математике JavaScript, но, по крайней мере, они основаны на реальных числах, установленных в CSS для размера большого пальца.

Input type text — текстовое поле HTML

Тип текста — это текстовое поле для ввода. Вводимый текст текстового типа вставляется в одну строку.

Если вам нужно создать многострочное поле ввода, используйте текстовую область> .

Codice HTML inputtype = «testo»:

Input type password — поле для ввода пароля

Il tipo di password è un campo per l’immissione di una password. Il valore inserito in tale campo verrà mostrato sotto la maschera (di solito sotto forma di punti, il cui numero riflette il numero di caratteri inseriti).

Codice HTML inputtype = «password»:

Input type color — выбор цвета

Il tipo di colore è un campo in cui l’utente può selezionare un colore. Il colore è specificato in formato HEX.

Codice HTML inputtype = «colore»:

Типы элемента INPUT

Кнопка BUTTON

Il pulsante BUTTON è destinato a quei casi in cui è necessario eseguire alcuni script. Cioè, l’evento OnСlick viene bloccato sul pulsante e viene chiamata la funzione richiesta. L’attributo value specifica l’etichetta sul pulsante. L’attributo onclick specifica un gestore JavaScript che viene chiamato quando si fa clic sul pulsante. L’attributo name viene utilizzato per la denominazione JavaScript del pulsante (non viene trasmesso al server).

Флажок CHECKBOX

Il browser visualizza questo tipo di campo come un quadratino. Secondo il suo significato, la casella di controllo serve per essere spuntata (c’è un segno di spunta nella casella), o non impostata (il quadrato è vuoto). Quando una casella di controllo è selezionata, il valore specificato dall’attributo value viene passato al programma di script. Se non è impostato, il suo valore non viene trasmesso affatto.

La casella di controllo può essere immediatamente selezionata per impostazione predefinita se viene specificato l’attributo selezionato. Per impostazione predefinita, l’attributo value è attivato. Poiché l’attributo value qui non specifica l’etichetta sulla casella di controllo, ma il suo valore interno passato al programma di script, quindi se hai bisogno di firmare qualcosa, scrivi accanto alla casella di controllo o usa il tag

Выбор цвета

Questo è il campo che ti permette di selezionare un colore.

Поле ввода даты

Il campo della data consente di inserire una data utilizzando un calendario.

Puoi impostare i limiti inferiore e superiore dell’intervallo di date con gli attributi min e max.

Поле ввода адреса электронной почты

Per inserire più indirizzi, è possibile aggiungere l’attributo multiplo, separando gli indirizzi utilizzando una virgola (,)

Файл FILE

Consente di trasferire qualsiasi file nello script. La dimensione massima del file in byte è impostata dal campo max_file_size nascosto.

Скрытое поле HIDDEN

Questo è un tipo speciale (nascosto) di casella di testo. Se uno script elabora diversi moduli, nel campo nascosto di ciascun modulo è possibile specificare un identificatore che consentirà di determinare con quale modulo si ha a che fare.

Поле ввода чисел NUMBER

Il campo serve per inserire i numeri. La parte frazionaria durante l’immissione può essere separata da un punto (2.5) o da una virgola (2.5). Se l’utente inserisce delle lettere, il modulo non verrà inviato al server.

Поле ввода пароля PASSWORD

Il campo di immissione della password è molto simile a un semplice campo di testo. Si differenzia per il fatto che al posto dei caratteri immessi vengono visualizzati dei punti. Questa capacità è molto importante quando devi inserire informazioni segrete, come una password, che gli altri non dovrebbero vedere.

Переключатель RADIO

Un interruttore assomiglia a una casella di controllo in quanto può anche essere attivato o disattivato.

Per definizione, si presume sempre che nel form siano presenti diversi radio button con lo stesso attributo name. Ciascuno di essi ha il proprio valore per l’attributo value. Un gruppo di radio button con lo stesso nome in un form si comporta in modo tale che solo uno di essi possa essere abilitato. Quando si trasmettono dati, viene trasmesso solo il valore dell’interruttore selezionato.

Un pulsante di opzione di un gruppo può essere inizialmente selezionato per impostazione predefinita utilizzando l’attributo selezionato.

Ползунок RANGE

Il campo serve per inserire un numero nell’intervallo specificato.

È possibile impostare il valore minimo (predefinito 0), il valore massimo (predefinito 100), l’incremento (predefinito 1) e il valore corrente (media predefinita dei valori minimo e massimo).

Кнопка RESET

Questo è il pulsante per cancellare il modulo. Quando viene premuto, tutti gli elementi modificati vengono riportati ai valori predefiniti. È usato raramente. Tuttavia, in alcuni casi può essere molto utile.

Consiglio: attenzione alla scelta della scritta sul pulsante RESET. Qualcosa come «Cancella», «Ricomincia», «Elimina input», ecc sarà abbastanza visivo (e, soprattutto, intuitivamente comprensibile anche per una teiera). In generale, è necessario che l’utente non abbia ombra di dubbio sullo scopo di questa chiave.

Кнопка SUBMIT

Questo pulsante serve per inviare un modulo. Nella maggior parte dei browser, sembra quasi indistinguibile dal pulsante BUTTON. Di per sé non viene trasmesso, ma serve solo per il controllo.

L’attributo onclick per il pulsante SUBMIT non viene quasi mai utilizzato, in quanto è meglio utilizzare il gestore di eventi onsubmit specificato nel tag

… Dopotutto, per trasferire i dati inseriti nel modulo, in generale, non è affatto necessario premere il pulsante INVIA. Puoi semplicemente premere il tasto INVIO sulla tastiera mentre sei in qualsiasi campo di immissione del testo. Questo trasferirà i dati.

Input type number — поле для ввода чисел

Il tipo di numero è un campo in cui è possibile inserire solo numeri. La restrizione sui numeri inseriti può essere impostata utilizzando gli attributi max — il valore massimo, min — il valore minimo, passo — il passo (per maggiori dettagli, vedere la tabella degli attributi di seguito).

Codice HTML inputtype = «numero»:

Input type month — поле для ввода месяца

Il tipo mese è un campo in cui l’utente può inserire il mese (mese di un anno specifico).

Il formato del valore inviato al server è AAAA-MM, ad esempio «2001-11» (corrisponde a novembre 2001.).

Codice HTML inputtype = «mese»:

Input type datetime — дата и время

Il tipo datetime è un campo in cui l’utente può inserire una data e un’ora con l’indicazione del fuso orario.

Questo tipo di campo è obsoleto e deprecato. Utilizzo invece di lui.

Input type datetime-local — локальное время

Il tipo datetime-local è un campo in cui l’utente può inserire la data e l’ora (senza specificare il fuso orario).

Di solito, quando si compila un campo, i browser visualizzano un calendario accanto ad esso, in cui è possibile selezionare un valore.

Il formato del valore inviato al server è AAAA-MM-GGThh: mm, ad esempio «2007-08-11T13: 18» (corrisponde all’11 agosto 2007, 13 ore, 18 minuti).

Maggiori informazioni nell’articolo su Data e ora in HTML.

Codice HTML inputtype = «datetime-local»:

Input type button — простая кнопка

Il tipo di pulsante corrisponde a un semplice pulsante cliccabile. Le azioni che si verificheranno quando si fa clic sul pulsante sono definite tramite JavaScript.

Inputtype codice HTML = «pulsante»:

Input type search — поле для ввода поискового запроса

Il tipo di ricerca è un campo per l’immissione di una query di ricerca.

Codice HTML inputtype = «cerca»:

Input type week — поле для выбора недели

Il tipo di settimana è un campo in cui l’utente può inserire una settimana (ad esempio, contrassegnarla utilizzando il calendario visualizzato dal browser durante la digitazione nel campo).

Formato standard: YYYY-Wxx, dove «xx» è il numero della settimana, a partire dall’inizio dell’anno. Ad esempio, «2011-W12» (corrisponde alla dodicesima settimana del 2011).

Di solito, quando si compila un campo, i browser visualizzano un calendario accanto ad esso, in cui è possibile selezionare una settimana. In questo caso, è possibile modificare il formato del valore per l’utente, ma i dati vengono inviati al server in un formato standard.

Codice HTML inputtype = «settimana»:

Input type hidden — скрытое поле

Il tipo nascosto è un campo nascosto. Tale campo non verrà mostrato all’utente (non visualizzato nella pagina del sito). I campi di tipo nascosto vengono utilizzati per trasferire le informazioni sul servizio.

Codice HTML inputtype = «nascosto»:

Input type email — поле для ввода адреса электронной почты

Il tipo di email è un campo in cui è necessario inserire un indirizzo email. I browser controllano la correttezza della compilazione del campo. Se il valore inserito non corrisponde al formato dell’indirizzo email, il browser visualizzerà un messaggio di errore.

Codice HTML inputtype = «e-mail»:

Input type time — поле для ввода времени

Il tipo di ora è un campo in cui l’utente può inserire un’ora.

Il formato standard è hh: mm, ad esempio «14:45». Ulteriori informazioni sui tempi in HTML.

Codice HTML inputtype = «time»:

Input type tel — поле для ввода номера телефона

Il tipo di telefono è un campo per l’inserimento di un numero di telefono. Per impostazione predefinita, il modello di input non è impostato e il campo può assumere qualsiasi valore di testo. È possibile specificare un modello utilizzando l’attributo modello. Un’altra opzione consiste nell’utilizzare le librerie JavaScript per impostare il formato del campo.

Codice HTML inputtype = «tel»:

Input type reset — кнопка сброса, очистки полей

Il tipo di reset è un pulsante che, quando cliccato, cancella la compilazione dei campi nel modulo associato. Dopo aver premuto il pulsante di ripristino, i campi torneranno al loro stato originale.

Codice HTML inputtype = «reset»:

Input type radio — переключатель

Il tipo di opzione è un pulsante di opzione (chiamato anche pulsante di opzione).

Per creare un pulsante di opzione, vengono utilizzati diversi tag inputtype = «radio» che hanno gli stessi valori per l’attributo name. Quindi, viene creato un gruppo, in cui ogni tag corrisponde a una posizione dell’interruttore. È possibile selezionare solo uno dei membri del gruppo alla volta.

Quando il modulo viene inviato al server, i dati vengono trasmessi solo per il tag selezionato (selezionato) del pulsante di opzione.

Per facilità d’uso, una firma viene solitamente posizionata accanto ai pulsanti di opzione

Il codice HTML del pulsante di opzione da inputtype = «radio»:






Input type url — поле для ввода URL адреса

Il tipo di URL è un campo utilizzato per inserire un URL. I browser controllano la correttezza della compilazione del campo. Se il valore inserito non corrisponde al formato dell’URL, il browser visualizzerà un messaggio di errore.

Codice HTML inputtype = «url»:

Input type file — поле для загрузки файла

Il tipo di file è un campo che utilizza i file come valore.

Se utilizzato nei campi modulo HTML con tipo di file, imposta l’attributo enctype del form padre su multipart / form-data.

Codice HTML inputtype = «file»:

Input type submit — кнопка отправки формы

Il tipo di invio corrisponde al pulsante di invio del modulo. Quando si fa clic su un pulsante di tipo submit, verrà attivato l’evento di invio del modulo HTML associato.

Diversi pulsanti di invio possono essere allegati a un modulo HTML. Solo il pulsante che ha attivato l’evento di invio verrà inviato al server.

Codice HTML inputtype = «invia»:

Input type image — кнопка-картинка

Il tipo di immagine è l’immagine di un pulsante. Cliccando sull’immagine (immagine), viene inviato il modulo associato. L’indirizzo del file immagine è definito nell’attributo src.

Tipo di input del codice HTML = «immagine»:

Input type date — поле для ввода даты

Il tipo di data è un campo in cui l’utente può inserire una data. La data include anno, mese e giorno.

Il formato della data standard è AAAA-MM-GG, ad esempio «2005-01-20» (corrisponde al 20 gennaio 2005). Maggiori informazioni sulla data in HTML.

Di solito, quando si compila un campo, i browser visualizzano un calendario accanto ad esso, in cui è possibile selezionare una data. In questo caso, è possibile modificare il formato della data per l’utente, ma la data viene inviata al server nel formato standard.

Codice HTML inputtype = «data»:

Input type checkbox — чек-бокс, флажок, галочка

Il tipo di casella di controllo è un campo che l’utente può selezionare (casella di controllo). La casella di controllo ha solo 2 stati: selezionata o deselezionata. Quando il modulo viene inviato al server, i dati vengono trasmessi solo per le caselle di controllo selezionate.

Se l’attributo value non è specificato per la casella di controllo, il valore predefinito «on» verrà utilizzato come valore. Le caselle di controllo sono spesso utilizzate insieme al tag

Di solito una casella di controllo viene visualizzata come un quadrato, all’interno del quale è presente un segno di spunta, se la casella è selezionata.

Inputtype codice HTML = «casella di controllo»:

Input type range — диапазон, ползунок HTML

Il tipo di intervallo è un dispositivo di scorrimento che consente di selezionare un valore all’interno di un intervallo specificato. L’intervallo di valori viene determinato utilizzando gli attributi max — il valore massimo, min — il valore minimo. Attributo del passo: imposta il valore del passo per il dispositivo di scorrimento.

Codice HTML inputtype = «intervallo»:

Источники

  • https://css-tricks.com/value-bubbles-for-range-inputs/
  • https://guruweba.com/html/teg-input-html-pole-dlya-vvoda-knopka/
  • https://htmlweb.ru/html/form/input.php
  • https://qna.habr.com/q/328079

Оцените статью
Блог о JavaScript