Типы ввода HTML-формы

В HTML <input type=""> является важным элементом HTML-формы. Атрибут "тип" элемента ввода может быть различных типов, что определяет информационное поле. Например, <input type="text" name="name"> дает текстовое поле.
Ниже приведен список всех типов элемента <input> HTML.
text
Определяет однострочное поле ввода текста.
password
Определяет однострочное поле ввода пароля.
submit
Определяет кнопку отправки для отправки формы на сервер.
reset
Определяет кнопку сброса для сброса всех значений в форме.
radio
Определяет переключатель, который позволяет выбрать один вариант.
checkbox
Определяет флажки, которые позволяют выбрать несколько вариантов форм.
button
Определяет простую кнопку, которую можно запрограммировать для выполнения задачи по событию.
file
Определяет выбор файла из памяти устройства.
image
Определяет графическую кнопку отправки.
В HTML5 добавлены новые типы для элемента <input>. Ниже приведен список типов элементов HTML5.
color
Определяет поле ввода с определенным цветом.
date
Определяет поле ввода для выбора даты.
datetime-local
Определяет поле ввода для ввода даты без часового пояса.
email
Определяет поле ввода для ввода адреса электронной почты.
month
Определяет элемент управления с месяцем и годом, без часового пояса.
number
Определяет поле ввода для ввода числа.
url
Определяет поле для ввода URL.
week
Определяет поле для ввода даты с неделей-годом без часового пояса.
search
Определяет однострочное текстовое поле для ввода строки поиска.
tel
Определяет поле ввода для ввода номера телефона.
Ниже приводится описание типов элемента <input> с примерами.

1. <input type="text">:

Элемент <input> типа «text» используется для определения однострочного текстового поля ввода.

<form>
<label>Введите имя</label>
<input type="text" name="firstname">
<label>Введите Фамилию</label>
<input type="text" name="lastname">
<p><strong>Примечание:</strong>Максимальная длина символа по умолчанию — 20.</p>
</form>

2. <input type="password">:

Элемент <input> типа «password» позволяет пользователю безопасно вводить пароль на веб-странице. Введенный текст в поле пароля преобразуется в «*» или «.», чтобы его не смог прочитать другой пользователь.
Пример:

<form>
<label>Введите логин</label>
<input type="text" name="username">
<label>Введите пароль</label>
<input type="Password" name="password">
<input type="submit" value="Войти">
</form>

3. <input type="submit">:

Элемент <input> типа «submit» определяет кнопку отправки для отправки формы на сервер при возникновении события «щелчок».
Пример:

<form action="form.php">
<label>Ведите логин</label>
<input type="text" name="username">
<label>Ведите пароль</label>
<input type="Password" name="password">
<<input type="submit" value="Войти">
</form>

После нажатия кнопки Войти форма будет отправлена на сервер, а страница будет перенаправлена на значение action.

4. <input type="reset">:

Тип <input> «reset» также определяется как кнопка, но когда пользователь выполняет событие щелчка, он по умолчанию сбрасывает все введенные значения.
Пример:

<form>
<label>Логин:</label>
<input type="text" name="username" value="user">
<label>Пароль:</label>
<input type="password" name="pass" value="pass">
<input type="submit" value="Войти">
<input type="reset" value="Очистить">
</form>

Попробуйте изменить входные значения идентификатора пользователя и пароля, тогда, когда вы нажмете «Сброс», он сбросит поля ввода со значениями по умолчанию.

5. <input type="radio">:

Тип <input> "radio" определяет переключатели, которые позволяют выбирать опцию из набора связанных опций. Одновременно может быть выбрана только одна опция радиокнопки.
Пример:

<form>
<p>Пожалуйста, выберите свой любимый цвет</p>
<input type="radio" name="color" value="red"> Красный
<input type="radio" name="color" value="blue"> Синий
<input type="radio" name="color" value="green"> Зелёный
<input type="radio" name="color" value="pink"> Розовый
<input type="submit" value="Отправить">
</form>

6. <input type="checkbox">:

тип checkbox <input> отображается в виде квадратных полей, которые можно установить или снять, чтобы выбрать варианты из заданных параметров.
Примечание. Радиокнопки аналогичны флажкам, но между обоими типами есть важное различие: радиокнопки позволяют пользователю выбирать только один вариант за раз, тогда как checkbox позволяет пользователю выбирать от нуля до нескольких вариантов одновременно..
Пример:

<form>
<label>Введите имя:</label>
<input type="text" name="name">
<p>ваши любимые виды спорта</p>
<input type="checkbox" name="sport1" value="bascketboll">Баскетбол
<input type="checkbox" name="sport2" value="tennis">Теннис
<input type="checkbox" name="sport3" value="football">Футбол
<input type="checkbox" name="sport4" value="baseball">Бейсбол
<input type="checkbox" name="sport5" value="badminton">Банбинтон
<input type="submit" value="Отправить">
</form>

7. <input type="button">:

Тип <input> «button» определяет простую кнопку, которую можно запрограммировать для функционального управления любым событием, таким как событие щелчка.
Примечание. В основном это работает с JavaScript.
Пример:

Примечание. В приведенном выше примере мы использовали «оповещение» JS.

8. <input type="file">:

Элемент <input> с типом «file» используется для выбора одного или нескольких файлов из хранилища пользовательского устройства. После того, как вы выберете файл и отправите его, этот файл можно будет загрузить на сервер с помощью кода JS и файлового API.
Пример:

<form>
<label>Выберете файл для загрузки:</label>
<input type="file" name="newfile">
<input type="submit" value="Отправить">

</form>

9. <input type="image">:

Тип <input> «image» используется для представления кнопки отправки в виде изображения.
Пример:

<form>
<label>id пользователя:</label>
<input type="text" name="name">
<input type="image" alt="Отправить" src="login.png" width="100px">
</form>

Недавно добавленные в HTML5 элементы типов <input>

1. <input type="color">:

Тип <input> "color" используется для определения поля ввода, которое содержит цвет. Это позволяет пользователю указать цвет с помощью визуального цветового интерфейса в браузере.
Примечание. Тип «color» поддерживает значение цвета только в шестнадцатеричном формате, а значение по умолчанию — #000000 (черный).
Пример:

<form>
Выберите свой любимый цвет:
<input type="color" name="upclick" value="#a52a2a">Upclick
<input type="color" name="downclick" value="#f5f5dc">Downclick
</form>

2. <input type="date">:

Элемент <input> типа «date» создает поле ввода, которое позволяет пользователю вводить дату в заданном формате. Пользователь может ввести дату в текстовом поле или в интерфейсе выбора даты.
Пример:

<form>
Выберите дату начала и окончания:
<input type="date" name="Startdate">Start date:
<input type="date" name="Enddate">End date:
<input type="submit">
</form>

3. <input type="datetime-local">:

Элемент <input> типа «datetime-local» создает поле ввода, которое позволяет пользователю выбирать дату, а также местное время в часах и минутах без информации о часовом поясе.
Пример:

<form>
<label>
Выберите расписание встречи:
Выберите дату и время:
<input type="datetime-local" name="meetingdate">
</label>
<input type="submit">
</form>

4. <input type="email">:

Тип <input> «email» создает поле ввода, которое позволяет пользователю вводить адрес электронной почты с проверкой шаблона. Множественные атрибуты позволяют пользователю вводить более одного адреса электронной почты.
Пример:

<form>
<label><b>Введите электронный адрес</b></label>
<input type="email" name="email" required>
<input type="submit">
<p><strong>Примечание.</strong>Пользователь также может ввести несколько адресов электронной почты, разделив их запятой или пробелом, как показано ниже:</p>
<label><b>Введите несколько адресов электронной почты</b></label>
<input type="email" name="email" multiple>
<input type="submit">
</form>

5. <input type="month">:

Тип <input> "month" создает поле ввода, которое позволяет пользователю легко вводить месяц и год в формате "MM, YYYY", где MM определяет значение месяца, а YYYY определяет значение года.
Пример:

<form>
<label>Введите дату вашего день рождения:
<input type="month" name="newMonth"> </label>
<input type="submit">
</form>

6. <input type="number">:

тип элемента <input> "number" создает поле ввода, которое позволяет пользователю вводить числовое значение. Вы также можете ограничить ввод минимального и максимального значения, используя атрибуты min и max.
Пример:

<form>
<label>Введите ваш возраст:
<input type="number" name="num" min="50" max="80"></label>
<input type="submit">
</form>

Примечание. Это позволит ввести число в диапазоне 50-80. Если вы хотите ввести число, отличное от диапазона, появится сообщение об ошибке.

7. <input type="url">:

Элемент <input> типа "url" создает поле ввода, которое позволяет пользователю ввести URL-адрес.
Пример:

<form>
<label>Введите URL веб-сайта:
<input type="url" name="website" placeholder="http://example.com"> </label>
<input type="submit" value="Отправить">
</form>

8. <input type="week">:

тип week <input> создает поле ввода, которое позволяет пользователю выбрать неделю и год из раскрывающегося календаря без часового пояса.
Пример:

<form>
<label><b>Выберите лучшую неделю года:</b>
<input type="week" name="bestweek"> </label>
<input type="submit" value="Отправить">
</form>

9. <input type="search">:

Тип <input> «search» создает поле ввода, которое позволяет пользователю ввести строку поиска. Они функционально симметричны типу ввода текста, но могут быть оформлены по-разному.
Пример:

<form>
<label>Искать здесь

<input type="search" name="q"> </label>
<input type="submit" value="Искать">
</form>

10. <input type="tel">:

Элемент <input> типа "tel" создает поле ввода для ввода номера телефона. Тип «tel» не имеет проверки по умолчанию, такой как электронная почта, поскольку шаблон телефонного номера может различаться в разных странах.
Пример:

<form>
<label><b>Введите номер телефона (xxx-xxx-xxxx):</b>
<input type="tel" name="telephone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required> </label>
<input type="submit">
</form>

Атрибуты формы HTML