Атрибуты HTML для Input
В этой главе описываются различные атрибуты, которые можно использовать с элементом HTML <input>.
Атрибут value
Атрибут value задаёт начальное (значение по умолчанию) для поля ввода.
Пример
Текстовые поля, начинающиеся со значений по умолчанию.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Атрибут value</title>
</head>
<body>
<form>
<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">
</form>
</body>
</html>
Атрибут readonly
Атрибут readonly делает поле ввода доступным только для чтения, поэтому его нельзя изменить. Пользователь всё же может перейти к нему с помощью Tab, выделить и скопировать текст. Его значение всё равно отправляется при отправке формы.
Пример
Поле «имя», доступное только для чтения.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Атрибут readonly</title>
</head>
<body>
<form>
<label for="fname">Имя:</label><br>
<input type="text" id="fname" name="fname" value="John" readonly><br>
<label for="lname">Фамилия:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
</body>
</html>
Атрибут disabled
Атрибут disabled отключает поле ввода, поэтому его нельзя использовать или нажать. Значение отключённого поля не отправляется при отправке формы.
Пример
Отключённое поле «имя».
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Атрибут disabled</title>
</head>
<body>
<form>
<label for="fname">Имя:</label><br>
<input type="text" id="fname" name="fname" value="John" disabled><br>
<label for="lname">Фамилия:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
</body>
</html>
Атрибут size
Атрибут size задаёт видимую ширину поля ввода в символах. Значение по умолчанию — 20.
Примечание: size работает со следующими типами input: text, search, tel, url, email и password.
Пример
Широкое поле «имя» и узкое поле «PIN».
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Атрибут size</title>
</head>
<body>
<form>
<label for="fname">Имя:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN-код:</label><br>
<input type="text" id="pin" name="pin" size="4">
</form>
</body>
</html>
Атрибут maxlength
Атрибут maxlength задаёт максимальное число символов, которое примет поле.
Примечание: Когда установлен maxlength, поле просто не примет больше символов, но не выдаст никакого сообщения. Чтобы предупредить пользователя, нужен JavaScript.
Пример
Поле «PIN», ограниченное четырьмя символами.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Атрибут maxlength</title>
</head>
<body>
<form>
<label for="fname">Имя:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN-код:</label><br>
<input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>
</body>
</html>
Атрибуты min и max
Атрибуты min и max задают наименьшее и наибольшее значение, которое примет поле.
Они работают со следующими типами input: number, range, date, datetime-local, month, time и week. Используйте их вместе, чтобы задать диапазон допустимых значений.
Пример
Поля даты с ограничениями min и max, а также числовое поле для количества от 1 до 5.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Атрибуты min и max</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"><br><br>
<label for="quantity">Количество (от 1 до 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
</body>
</html>
Атрибут multiple
Атрибут multiple позволяет пользователю ввести более одного значения в поле. Работает с типами input email и file.
Пример
Поле для файла, принимающее более одного файла.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Атрибут multiple</title>
</head>
<body>
<form>
<label for="files">Выберите файлы:</label>
<input type="file" id="files" name="files" multiple>
</form>
</body>
</html>
Атрибут pattern
Атрибут pattern задаёт регулярное выражение, по которому проверяется значение поля при отправке формы.
Работает со следующими типами input: text, date, search, url, tel, email и password.
Совет: Используйте глобальный атрибут title, чтобы описать шаблон, чтобы пользователь знал, чего от него ожидают.
Пример
Поле, принимающее только трёхбуквенный код страны.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Атрибут pattern</title>
</head>
<body>
<form>
<label for="country_code">Код страны:</label>
<input type="text" id="country_code" name="country_code" pattern="[A-Za-z]{3}" title="Трёхбуквенный код страны">
</form>
</body>
</html>
Атрибут placeholder
Атрибут placeholder показывает короткую подсказку внутри поля до того, как пользователь начнёт вводить текст, например образец значения или ожидаемый формат.
Работает со следующими типами input: text, search, url, number, tel, email и password.
Пример
Поле для телефона с подсказкой placeholder.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Атрибут placeholder</title>
</head>
<body>
<form>
<label for="phone">Введите номер телефона:</label>
<input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
</body>
</html>
Атрибут required
Атрибут required означает, что поле должно быть заполнено, прежде чем форму можно будет отправить.
Работает со следующими типами input: text, search, url, tel, email, password, средства выбора даты, number, checkbox, radio и file.
Пример
Обязательное поле имени пользователя.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Атрибут required</title>
</head>
<body>
<form>
<label for="username">Имя пользователя:</label>
<input type="text" id="username" name="username" required>
</form>
</body>
</html>
Атрибут step
Атрибут step задаёт допустимые числовые интервалы для поля. Например, при step="3" допустимые числа — это -3, 0, 3, 6 и так далее.
Работает со следующими типами input: number, range, date, datetime-local, month, time и week. Можно использовать вместе с min и max, чтобы задать диапазон допустимых значений.
Примечание: Ограничения ввода не являются надёжными на 100%, и с помощью JavaScript можно добавить некорректные данные. Для безопасности сервер также должен проверять ввод.
Пример
Числовое поле, допускающее только интервалы по три.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Атрибут step</title>
</head>
<body>
<form>
<label for="points">Очки:</label>
<input type="number" id="points" name="points" step="3">
</form>
</body>
</html>
Атрибут autofocus
Атрибут autofocus заставляет поле автоматически получать фокус при загрузке страницы.
Пример
Поле «имя» получает фокус сразу после загрузки страницы.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Атрибут autofocus</title>
</head>
<body>
<form>
<label for="fname">Имя:</label><br>
<input type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Фамилия:</label><br>
<input type="text" id="lname" name="lname">
</form>
</body>
</html>
Атрибуты height и width
Атрибуты height и width задают размер элемента <input type="image">.
Совет: Всегда задавайте оба атрибута. Когда размер известен, браузер резервирует место под изображение во время загрузки страницы, поэтому макет не «прыгает» по мере появления изображений.
Пример
Кнопка отправки в виде изображения с заданными высотой и шириной.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Атрибуты height и width</title>
</head>
<body>
<form>
<label for="fname">Имя:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Фамилия:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Отправить" width="48" height="48">
</form>
</body>
</html>
Атрибут list
Атрибут list связывает input с элементом <datalist>, содержащим предопределённые варианты для него.
Пример
Input с предопределёнными значениями браузера в datalist.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Атрибут list</title>
</head>
<body>
<form>
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
</body>
</html>
Атрибут autocomplete
Атрибут autocomplete указывает, должно ли автозаполнение формы или отдельного поля быть включено или выключено. Когда оно включено, браузер может предлагать значения на основе того, что пользователь вводил ранее.
Работает с <form> и следующими типами input: text, search, url, tel, email, password, средства выбора даты, range и color.
Совет: В некоторых браузерах может потребоваться включить функцию автозаполнения в настройках, чтобы это работало.
Пример
Форма с включённым автозаполнением, но выключенным для поля email.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Атрибут autocomplete</title>
</head>
<body>
<form action="/action_page.php" autocomplete="on">
<label for="fname">Имя:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Фамилия:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" value="Отправить">
</form>
</body>
</html>