В этой главе описываются различные типы HTML кода элемента <input>.
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">
Тип ввода "text"
<input type="text"> определяет однострочное поле ввода текста:
<form>
<label for="fname">Имя:</label><br>
<input
type="text" id="fname" name="fname"><br>
<label for="lname">Фамилия:</label><br>
<input type="text" id="lname" name="lname">
</form>
Попробуйте сами »
Именно так приведенный выше HTML код будет отображаться в браузере:
Имя:Фамилия:
Тип ввода "password"
<input type="password"> определяет поле пароля:
<form>
<label for="username">Имя пользователя:</label><br>
<input type="text"
id="username" name="username"><br>
<label for="pwd">Пароль:</label><br>
<input type="password" id="pwd" name="pwd">
</form>
Попробуйте сами »
Именно так приведенный выше HTML код будет отображаться в браузере:
Имя пользователя:Пароль:
Символы в поле пароля маскируются (отображаются в виде звездочек или кружочков).
Тип ввода "submit"
<input type="submit"> определяет кнопку для предоставление данных формы в обработчик форм.
Обработчик форм обычно представляет собой серверную страницу со скриптом для обработки входных данных.
Обработчик формы задается в окне формы атрибут action:
<form action="/action_page.php">
<label for="fname">Имя:</label><br>
<input type="text" id="fname" name="fname" value="Андрей"><br>
<label for="lname">Фамилия:</label><br>
<input type="text" id="lname" name="lname" value="Щипунов"><br><br>
<input type="submit" value="Отправить">
</form>
Попробуйте сами »
Именно так приведенный выше HTML код будет отображаться в браузере:
Если вы опустите атрибут value кнопки submit, то кнопка получит текст по умолчанию:
<form action="/action_page.php">
<label for="fname">Имя:</label><br>
<input type="text" id="fname" name="fname"
value="Андрей"><br>
<label for="lname">Фамилия:</label><br>
<input type="text" id="lname" name="lname" value="Щипунов"><br><br>
<input type="submit">
</form>
Попробуйте сами »
Тип ввода "reset"
<input type="reset"> определяет кнопку сброса это приведет к сбросу всех значений формы к их значениям по умолчанию:
<form action="/action_page.php">
<label for="fname">Имя:</label><br>
<input type="text" id="fname" name="fname"
value="Андрей"><br>
<label for="lname">Фамилия:</label><br>
<input type="text" id="lname" name="lname" value="Щипунов"><br><br>
<input type="submit" value="Отправить">
<input type="reset">
</form>
Попробуйте сами »
Именно так приведенный выше HTML код будет отображаться в браузере:
Если вы измените входные значения и затем нажмете кнопку "Сброс", то данные формы будут сброшены до значений по умолчанию.
Тип ввода "radio"
<input type="radio"> определяет переключатель.
Переключатели позволяют пользователю выбрать только один из ограниченного числа вариантов:
<form>
<input type="radio" id="male" name="gender"
value="male">
<label for="male">Мужчина</label><br>
<input
type="radio" id="female" name="gender" value="female">
<label
for="female">Женщина</label><br>
<input type="radio" id="other"
name="gender" value="other">
<label for="other">другое</label>
</form>
Попробуйте сами »
Именно так приведенный выше HTML код будет отображаться в браузере:
Тип ввода "checkbox"
<input type="checkbox"> определяет флажок.
Флажки позволяют пользователю выбрать ноль или более вариантов из ограниченного числа вариантов.
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> У меня есть велосипед</label><br>
<input
type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">
У меня есть машина</label><br>
<input type="checkbox"
id="vehicle3" name="vehicle3"
value="Boat">
<label for="vehicle3"> У меня есть лодка</label>
</form>
Попробуйте сами »
Именно так приведенный выше HTML код будет отображаться в браузере:
Тип ввода "button"
<input type="button"> определяет кнопку:
<input type="button" onclick="alert('Привет Мир!')" value="Нажми на меня!">
Попробуйте сами »
Именно так приведенный выше HTML код будет отображаться в браузере:
Тип ввода "color"
<input type="color"> используется для полей ввода, которые должны содержать цвет.
В зависимости от поддержки браузера в поле ввода может отображаться палитра цветов.
<form>
<label for="favcolor">Выберите свой любимый цвет:</label>
<input type="color" id="favcolor" name="favcolor">
</form>
Попробуйте сами »
Тип ввода "date"
<input type="date"> используется для полей ввода, которые должны содержать дату.
В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.
<form>
<label for="birthday">День рождения:</label>
<input
type="date" id="birthday" name="birthday">
</form>
Попробуйте сами »
Вы также можете использовать атрибуты min и max для добавления ограничений к датам:
<form>
<label for="datemax">Введите дату до 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Введите дату после 2000-01-01:</label>
<input type="date" id="datemin" name="datemin"
min="2000-01-02">
</form>
Попробуйте сами »
Тип ввода "datetime-local"
<input type="datetime-local"> задает поле ввода даты и времени без часового пояса.
В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.
<form>
<label for="birthdaytime">День рождения (дата и время):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
Попробуйте сами »
Тип ввода "email"
<input type="email"> используется для полей ввода, которые должны содержать адрес электронной почты.
В зависимости от поддержки браузера адрес электронной почты может быть автоматически проверен при отправке.
Некоторые смартфоны распознают тип электронной почты и добавляют ".com" к клавиатуре, чтобы соответствовать вводу электронной почты.
<form>
<label for="email">Введите свой адрес электронной почты:</label>
<input type="email" id="email" name="email">
</form>
Попробуйте сами »
Тип ввода "file"
<input type="file"> определяет поле выбор файла в "браузере" и кнопку для загрузки файла.
<form>
<label for="myfile">Выбрать файл:</label>
<input type="file" id="myfile" name="myfile">
</form>
Попробуйте сами »
Тип ввода "month"
<input type="month"> позволяет пользователю выбрать месяц и год.
В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.
<form>
<label for="bdaymonth">День рождения (месяц и год):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>
Попробуйте сами »
Тип ввода "number"
<input type="number"> определяет числовое поле ввода.
Вы также можете установить ограничения на то, какие номера принимаются.
В следующем примере отображается числовое поле ввода, в которое можно ввести значение от 1 до 5:
<form>
<label for="quantity">Количество (от 1 до 5):</label>
<input type="number" id="quantity" name="quantity"
min="1" max="5">
</form>
Попробуйте сами »
Входные ограничения
Вот список некоторых распространенных ограничений ввода:
| Атрибут | Описание |
|---|---|
| checked | Указывает, что поле ввода должно быть предварительно выбрано при загрузке страницы (для type="checkbox" или type="radio") |
| disabled | Указывает, что поле ввода должно быть отключено |
| max | Задает максимальное значение для поля ввода |
| maxlength | Задает максимальное количество символов для поля ввода |
| min | Задает минимальное значение для поля ввода |
| pattern | Задает регулярное выражение для проверки входного значения |
| readonly | Указывает, что поле ввода доступно только для чтения (не может быть изменено) |
| required | Указывает, что поле ввода является обязательным (должно быть заполнено) |
| size | Задает ширину (в символах) поля ввода |
| step | Задает допустимые интервалы чисел для поля ввода |
| value | Задает значение по умолчанию для поля ввода |
Подробнее об ограничениях на ввод данных вы узнаете в следующей главе.
В следующем примере показано числовое поле ввода, в которое можно ввести значение от 0 до 100 с шагом 10. Значение по умолчанию равно 30:
<form>
<label for="quantity">Количество:</label>
<input
type="number" id="quantity" name="quantity" min="0" max="100" step="10"
value="30">
</form>
Попробуйте сами »
Тип ввода "range"
<input type="range">
определяет элемент управления для ввода числа, точное значение которого не имеет значения (например, ползунок управления).
Диапазон по умолчанию от 0 до 100. Однако вы можете установить ограничения на то, какие номера принимаются с помощью атибутов min,
max, и step:
<form>
<label for="vol">Громкость (от 0 до 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
Попробуйте сами »
Тип ввода "search"
<input type="search"> используется для полей поиска (поле поиска ведет себя как обычное текстовое поле).
<form>
<label for="gsearch">Поиск Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>
Попробуйте сами »
Тип ввода "tel"
<input type="tel"> используется для полей ввода, которые должны содержать номер телефона.
<form>
<label for="phone">Введите свой номер телефона:</label>
<input type="tel" id="phone" name="phone"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
Попробуйте сами »
Тип ввода "time"
<input type="time"> позволяет пользователю выбрать время (без часового пояса).
В зависимости от поддержки браузера в поле ввода может отображаться средство выбора времени.
<form>
<label for="appt">Выберите время:</label>
<input type="time" id="appt" name="appt">
</form>
Попробуйте сами »
Тип ввода "url"
<input type="url"> используется для полей ввода, которые должны содержать URL адрес.
В зависимости от поддержки браузера поле url адреса может быть автоматически проверено при отправке.
Некоторые смартфоны распознают тип URL адреса, и добавляют, ".com" на клавиатуре, чтобы соответствовать ввода URL адреса.
<form>
<label for="homepage">Добавьте свою домашнюю страницу:</label>
<input type="url" id="homepage" name="homepage">
</form>
Попробуйте сами »
Тип ввода "week"
<input type="week"> позволяет пользователю выбрать неделю и год.
В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.
<form>
<label for="week">Выберите неделю:</label>
<input type="week" id="week" name="week">
</form>
Попробуйте сами »
HTML Упражнения
HTML Атрибут типа ввода
| Тег | Описание |
|---|---|
| <input type=""> | Указывает тип ввода для отображения |