​🧾 Элемент <input> HTML

Элемент <input> - самый важный элемент формы.

Элемент <input> отображается несколькими способами, в зависимости от атрибута type.

Приведём несколько примеров:

<input type="text"> – определяет однострочное поле ввода текста.

<input type="radio"> – определяет переключатель (для выбора одного из многих вариантов).

<input type="submit"> – определяет кнопку отправки (для отправки формы).

📋 #Frontend
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Текстовое поле HTML

«<input type="text">» определяет однострочное поле ввода для ввода текста.

Приведём пример, форма с двумя полями ввода текста:

Код

Сама форма не видна. Также обратите внимание, что ширина поля ввода по умолчанию составляет 20 символов.

📋 #Frontend
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Элемент select HTML

Элемент select определяет раскрывающийся список.

Пример использования:

Код

📋 #Frontend
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Элемент option HTML

Сегодня разберёмся, что такое элемент option.

Элемент option определяет параметр, который может быть выбран.

По умолчанию выбирается первый элемент в раскрывающемся списке.

Чтобы определить предварительно выбранный параметр, добавьте атрибут selected с параметром option.

Пример:

Код

📋 #Frontend
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Видимые значения HTML

Для указания количества видимых значений используется атрибут size.

Также этот атрибут определяет ширину для элемента (в символах).

Пример:

Код

📋 #Frontend
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Разрешить выбор в HTML

Для разрешения выбора используйте атрибут multiple, позволяющий пользователю выбрать более одного значения:

Пример:

Код

📋 #Frontend
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Элемент textarea

Элемент textarea определяет многострочное поле ввода (текстовой области):

Пример:

Код

Атрибут rows указывает видимое количество строк в текстовой области.

Атрибут cols определяет видимую ширину текстовой области.

Так приведенный выше HTML код будет отображаться в браузере:

Кот играл в саду.

Вы также можете определить размер текстовой области с помощью CSS:

Пример:

Код

📋 #HTML #Код
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Элемент button

Элемент button определяет кликабельность button:

Пример:

Код

Вот так приведенный выше HTML код будет отображаться в браузере:

Нажмите на меня!

Всегда указывайте атрибут type для элемента button. Различные браузеры могут использовать различные типы по умолчанию для элемента button.

📋 #HTML #Код
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Элементы fieldset и legend

Элемент fieldset используется для группировки связанных данных в форме.

Элемент legend определяет заголовок для элемента fieldset.

Пример:

Код

Вот так приведенный выше HTML код будет отображаться в браузере:

Персональная информация:

Имя:

Андрей

Фамилия:

Щипунов

📋 #HTML #Код
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Элемент datalist

Элемент datalist задает список предопределенных параметров для элемента input.

При вводе данных пользователи будут видеть раскрывающийся список предопределенных параметров.

Атрибут list элемента input, обращается к атрибуту id элемента datalist.

Пример:

Код

📋 #HTML #Код
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Элемент output

Элемент output представляет собой результат вычисления (например, выполняемого скриптом).

Пример – выполните расчет и покажите результат в виде элемента output:

Код

📋 #HTML #Код
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Типы ввода HTML

Вот различные типы ввода, которые можно использовать в HTML:

input type="button"

input type="checkbox"

input type="color"

input type="date"

input type="datetime-local"

input type="email"

input type="file"

input type="hidden"

input type="image"

input type="month"

input type="number"

input type="password"

input type="radio"

input type="range"

input type="reset"

input type="search"

input type="submit"

input type="tel"

input type="text"

input type="time"

input type="url"

input type="week"

Какие-то элементы мы уже упоминали, а другие рассмотрим отдельно.

📋 #HTML #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Тип ввода "password"

Тип ввода input type="password" определяет поле пароля:

Пример:

Код

Вот так приведенный выше HTML код будет отображаться в браузере:

Имя пользователя:

Пароль:

Символы в поле пароля маскируются (отображаются в виде звездочек или кружочков).

📋 #HTML #Код
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Тип ввода "submit"

input type="submit" определяет кнопку для предоставления данных формы в обработчик форм.

Обработчик форм обычно представляет собой серверную страницу со скриптом для обработки входных данных.

Обработчик формы задается в окне формы атрибутом action:

Пример:

Код

Так приведенный выше HTML код будет отображаться в браузере:

Имя:

Андрей

Фамилия:

Щипунов

Если вы опустите атрибут value кнопки submit, то кнопка получит текст по умолчанию:

Код

📋 #HTML #Код
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Тип ввода "reset"

input type="reset" определяет кнопку сброса, это приведет к сбросу всех значений формы к их значениям по умолчанию.

Пример:

Код

Так приведенный выше HTML код будет отображаться в браузере:

Имя:

Андрей

Фамилия:

Щипунов

Если вы измените входные значения и затем нажмете кнопку "Сброс", то данные формы будут сброшены до значений по умолчанию.

📋 #HTML #Код
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Тип ввода "radio"

input type="radio" определяет переключатель.

Переключатели позволяют пользователю выбрать только один из ограниченного числа вариантов.

Пример:

Код

Именно так приведенный выше HTML код будет отображаться в браузере:

Мужчина

Женщина

другое

📋 #HTML #Код
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Тип ввода "checkbox"

input type="checkbox" определяет флажок.

Флажки позволяют пользователю выбрать ноль или более вариантов из ограниченного числа вариантов.

Пример:

Код

Именно так приведенный выше HTML код будет отображаться в браузере:

У меня есть велосипед

У меня есть машина

У меня есть лодка

📋 #HTML #Код
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Тип ввода "color"

input type="color" используется для полей ввода, которые должны содержать цвет.

В зависимости от поддержки браузера в поле ввода может отображаться палитра цветов.

Пример:

Код

📋 #HTML #Код
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Тип ввода "date"

input type="date" используется для полей ввода, которые должны содержать дату.

В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.

Пример:

Код

Вы также можете использовать атрибуты min и max для добавления ограничений к датам.

Пример:

Код

📋 #HTML #Код
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Тип ввода "datetime-local"

input type="datetime-local" задает поле ввода даты и времени без часового пояса.

В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.

Пример:

Код

📋 #HTML #Код
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Тип ввода "email"

input type="email" используется для полей ввода, которые должны содержать адрес электронной почты.

В зависимости от поддержки браузера, адрес электронной почты может быть автоматически проверен при отправке.

Некоторые смартфоны распознают тип электронной почты и добавляют ".com" к клавиатуре, чтобы соответствовать вводу электронной почты.

Пример:

Код

📋 #HTML #Код
▬▬▬▬▬▬▬▬
// How To WebDev