Типы Input в HTML
В этой главе описываются различные типы элемента HTML <input>. Выбранный тип меняет внешний вид и поведение поля.
Доступные типы: button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url и week.
Совет: Значение атрибута type по умолчанию — text.
Тип Input Text
<input type="text"> создаёт однострочное текстовое поле ввода.
Пример
Форма с текстовыми полями для имени и фамилии.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Тип поля Text</title>
</head>
<body>
<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>
</body>
</html>
Тип Input Password
<input type="password"> создаёт поле пароля. Введённые символы маскируются, отображаясь в виде точек или звёздочек.
Пример
Форма с текстовым полем для имени пользователя и полем пароля.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Тип поля Password</title>
</head>
<body>
<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>
</body>
</html>
Тип Input Submit
<input type="submit"> создаёт кнопку, отправляющую данные формы обработчику формы. Обработчик обычно является страницей на сервере со скриптом, заданной в атрибуте action формы.
Если не указать атрибут value кнопки отправки, кнопка покажет текст браузера по умолчанию.
Со значением
Кнопка отправки с меткой «Submit».
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Тип поля Submit</title>
</head>
<body>
<form action="/action_page.php">
<label for="fname">Имя:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Фамилия:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Отправить">
</form>
</body>
</html>
Текст кнопки по умолчанию
Та же форма, но у кнопки отправки нет value, поэтому показывается текст по умолчанию.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Текст кнопки Submit по умолчанию</title>
</head>
<body>
<form action="/action_page.php">
<label for="fname">Имя:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Фамилия:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit">
</form>
</body>
</html>
Тип Input Reset
<input type="reset"> создаёт кнопку сброса, возвращающую все поля формы к значениям по умолчанию.
Если изменить значения, а затем нажать «Reset», данные формы вернутся к значениям по умолчанию.
Пример
Форма с кнопкой отправки и кнопкой сброса.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Тип поля Reset</title>
</head>
<body>
<form action="/action_page.php">
<label for="fname">Имя:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Фамилия:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Отправить">
<input type="reset" value="Сбросить">
</form>
</body>
</html>
Тип Input Radio
<input type="radio"> создаёт переключатель. Переключатели позволяют пользователю выбрать только ОДИН вариант из небольшого набора.
Пример
Переключатели для выбора одного любимого веб-языка.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Тип поля Radio</title>
</head>
<body>
<p>Выберите ваш любимый веб-язык:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
</body>
</html>
Тип Input Checkbox
<input type="checkbox"> создаёт флажок. Флажки позволяют пользователю выбрать ноль или более вариантов из небольшого набора.
Пример
Три флажка, которые пользователь может независимо отмечать.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Тип поля Checkbox</title>
</head>
<body>
<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>
</body>
</html>
Тип Input Button
<input type="button"> создаёт кликабельную кнопку.
Пример
Кнопка, показывающая оповещение при нажатии.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Тип поля Button</title>
</head>
<body>
<input type="button" onclick="alert('Привет, мир!')" value="Нажми меня!">
</body>
</html>
Тип Input Color
<input type="color"> предназначен для полей, содержащих цвет. В зависимости от браузера может появиться палитра выбора цвета.
Пример
Поле выбора цвета.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Тип поля Color</title>
</head>
<body>
<form>
<label for="favcolor">Выберите ваш любимый цвет:</label>
<input type="color" id="favcolor" name="favcolor">
</form>
</body>
</html>
Тип Input Date
<input type="date"> предназначен для полей, содержащих дату. В зависимости от браузера может появиться средство выбора даты.
Можно использовать атрибуты min и max, чтобы ограничить допустимые даты.
Простая дата
Простое поле даты.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Тип поля Date</title>
</head>
<body>
<form>
<label for="birthday">Дата рождения:</label>
<input type="date" id="birthday" name="birthday">
</form>
</body>
</html>
Ограничения даты
Поля даты, ограниченные с помощью min и max.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ограничения даты</title>
</head>
<body>
<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>
</body>
</html>
Тип Input Datetime-local
<input type="datetime-local"> — поле даты и времени без часового пояса. В зависимости от браузера может появиться средство выбора даты.
Пример
Поле даты и времени.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Тип поля Datetime-local</title>
</head>
<body>
<form>
<label for="birthdaytime">Дата рождения (дата и время):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
</body>
</html>
Тип Input Email
<input type="email"> предназначен для полей, содержащих адрес электронной почты. В зависимости от браузера адрес можно проверить автоматически при отправке формы. На некоторых телефонах для полей email добавляется «.com» на клавиатуре.
Пример
Поле для email.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Тип поля Email</title>
</head>
<body>
<form>
<label for="email">Введите ваш email:</label>
<input type="email" id="email" name="email">
</form>
</body>
</html>
Тип Input Image
<input type="image"> использует изображение как кнопку отправки. Путь к изображению указывается в атрибуте src.
Пример
Изображение, работающее как кнопка отправки.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Тип поля Image</title>
</head>
<body>
<form>
<input type="image" src="img_submit.gif" alt="Отправить" width="48" height="48">
</form>
</body>
</html>
Тип Input File
<input type="file"> создаёт поле выбора файла с кнопкой «Browse» для загрузки файлов.
Пример
Поле выбора файла.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Тип поля File</title>
</head>
<body>
<form>
<label for="myfile">Выберите файл:</label>
<input type="file" id="myfile" name="myfile">
</form>
</body>
</html>
Тип Input Hidden
<input type="hidden"> создаёт скрытое поле, которое пользователь не видит. Оно позволяет разработчикам отправлять вместе с формой данные, которые пользователь не может увидеть или изменить, например какую запись базы данных нужно обновить.
Примечание: Значение скрыто на странице, но его всё равно можно увидеть и изменить с помощью инструментов разработчика браузера или «View Source». Не используйте скрытые поля для обеспечения безопасности.
Пример
Форма с видимым полем и скрытым полем, содержащим id клиента.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Тип поля Hidden</title>
</head>
<body>
<form>
<label for="fname">Имя:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="hidden" id="custId" name="custId" value="3487">
<input type="submit" value="Отправить">
</form>
</body>
</html>
Тип Input Month
<input type="month"> позволяет пользователю выбрать месяц и год. В зависимости от браузера может появиться средство выбора даты.
Пример
Поле «месяц-год».
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Тип поля Month</title>
</head>
<body>
<form>
<label for="bdaymonth">Дата рождения (месяц и год):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>
</body>
</html>
Тип Input Number
<input type="number"> создаёт числовое поле ввода. Допустимые числа можно ограничить с помощью атрибутов, таких как min и max.
Пример
Числовое поле, принимающее только значения от 1 до 5.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Тип поля Number</title>
</head>
<body>
<form>
<label for="quantity">Количество (от 1 до 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
</body>
</html>
Ограничения Input
Вот некоторые распространённые атрибуты для ограничения того, что можно ввести в input:
checked— поле предварительно выбрано при загрузке страницы (дляcheckboxилиradio).disabled— поле отключено.max— максимальное допустимое значение.maxlength— максимальное число символов.min— минимальное допустимое значение.pattern— регулярное выражение, которому должно соответствовать значение.readonly— поле нельзя изменить.required— поле должно быть заполнено.size— ширина поля в символах.step— допустимые числовые интервалы.value— значение по умолчанию.
Подробнее об ограничениях ввода вы узнаете в следующей главе.
Пример
Числовое поле от 0 до 100 с шагом 10 и значением по умолчанию 30.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ограничения поля ввода</title>
</head>
<body>
<form>
<label for="quantity">Количество:</label>
<input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
</form>
</body>
</html>
Тип Input Range
<input type="range"> создаёт ползунок для числа, точное значение которого не важно. Диапазон по умолчанию — от 0 до 100, его можно изменить с помощью min, max и step.
Пример
Ползунок для значения громкости от 0 до 50.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Тип поля Range</title>
</head>
<body>
<form>
<label for="vol">Громкость (от 0 до 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
</body>
</html>
Тип Input Search
<input type="search"> предназначен для полей поиска. Поле поиска работает как обычное текстовое поле.
Пример
Поле поиска.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Тип поля Search</title>
</head>
<body>
<form>
<label for="gsearch">Поиск в Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>
</body>
</html>
Тип Input Tel
<input type="tel"> предназначен для полей, содержащих номер телефона. Можно использовать атрибут pattern, чтобы задать ожидаемый формат.
Пример
Поле номера телефона с шаблоном.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Тип поля Tel</title>
</head>
<body>
<form>
<label for="phone">Введите ваш номер телефона:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
</body>
</html>
Тип Input Time
<input type="time"> позволяет пользователю выбрать время (без часового пояса). В зависимости от браузера может появиться средство выбора времени.
Пример
Поле времени.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Тип поля Time</title>
</head>
<body>
<form>
<label for="appt">Выберите время:</label>
<input type="time" id="appt" name="appt">
</form>
</body>
</html>
Тип Input Url
<input type="url"> предназначен для полей, содержащих веб-адрес. В зависимости от браузера значение можно проверить автоматически при отправке. На некоторых телефонах для полей url добавляется «.com» на клавиатуре.
Пример
Поле URL.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Тип поля Url</title>
</head>
<body>
<form>
<label for="homepage">Добавьте адрес вашего сайта:</label>
<input type="url" id="homepage" name="homepage">
</form>
</body>
</html>
Тип Input Week
<input type="week"> позволяет пользователю выбрать неделю и год. В зависимости от браузера может появиться средство выбора даты.
Пример
Поле недели.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Тип ввода Week</title>
</head>
<body>
<form>
<label for="week">Выберите неделю:</label>
<input type="week" id="week" name="week">
</form>
</body>
</html>