HTML 5 атрибуты для работы с полями формы.
Сегодня мы с вами разберём несколько новых атрибутов, появившихся в 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.
-
Создано 20.04.2014 20:05:59
-
Михаил Русаков
Комментарии (3):
+respect za stat'u!
Ответить
А как сделать так, чтобы атрибут datalist не учитывал регистр? Если в атрибуте указано слово-"Свойство", а я пишу в форме -"свойство", то значения не выпадают
Ответить
Хороший вопрос. К тому же, datalist - это не атрибут, а новый элемент. А вот list да, это уже атрибут, который указывается в input и значением которого является id элемента datalist, который нужно связать с этим input.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.