Сегодня с вами разберём несколько новых атрибутов, появившихся в HTML5 для полей формы.
Сегодня с вами разберём несколько новых атрибутов, появившихся в HTML5 для полей формы.
Placeholder
Атрибут placeholder позволяет без скриптов написать текст в поле, который будет появляться, когда нет фокуса, и исчезать, когда фокус есть.
<html>
<head>
<title>placeholder</title>
<meta charset="utf-8">
</head>
<body>
<input type="text" placeholder="Какой-то текст">
</body>
</html>
Autofocus
Этот атрибут позволяет установить фокус в любое поле сразу при загрузке страницы. Например, вы можете это наблюдать, когда заходите в поисковик.
<html>
<head>
<title>autofocus</title>
<meta charset="utf-8">
</head>
<body>
<input type="text" autofocus>
<input type="text">
<input type="text">
</body>
</html>
Несмотря на то, что у нас 3 поля, фокус будет в первом.
Required
Атрибут required позволяет сделать поле обязательным для заполнения. Это бывает очень удобно при проверке форм до отправки.
<html>
<head>
<title>required</title>
<meta charset="utf-8">
</head>
<body>
<input type="text" required>
<input type="submit" value="Отправить">
</body>
</html>
Попробуйте оставить поле пустым и нажать кнопку "Отправить".
Autocomplete
При использовании этого атрибута, когда пользователь начнёт вводить что-то в поле, браузер предложит ему значения, которые он когда-то вводил раньше. Если вы не хотите этого, поставьте значение off.
<html>
<head>
<title>autocomplete</title>
<meta charset="utf-8">
</head>
<body>
<input type="text" autocomplete="on">
</body>
</html>
Pattern
Если вы знакомы с регулярными выражениями, то этот атрибут поможет вам облегчить проверку форм. После того, как пользователь введёт данные, браузер сверится с регулярным выражением в данном атрибуте и, если что-то не так, сообщит об этом.
<html>
<head>
<title>pattern</title>
<meta charset="utf-8">
</head>
<body>
<input type="text" pattern="[0-7]">
</body>
</html>
Datalist
Атрибут datalist позволяет при вводе данных подсказать пользователю возможные значения.
<html>
<head>
<title>datalist</title>
<meta charset="utf-8">
</head>
<body>
<input type="text" list="cities">
<datalist id="cities">
<option>Петрозаводск</option>
<option>Москва</option>
<option>Санкт-Петербург</option>
<option>Воронеж</option>
<option>Нижний Новгород</option>
</datalist>
</body>
</html>
В datalist вы пишите возможные варианты и id, который указываете в атрибуте list. Теперь попробуйте начать вводить одно из названий городов.
Итак, в этом материале мы с вами разобрали основные атрибуты для работы с полями формы в HTML5.
