inuasparwil.ru

Html 5 атрибути для роботи з полями форми.

Відео: HTML форми - тег input і валідація форм. Частина 1

HTML 5 атрибути для роботи з полями форми.

Сьогодні ми з вами розберемо кілька нових атрибутів, що з`явилися в HTML5 для полів форми.

Placeholder

Атрибут placeholder дозволяє без скриптів написати текст в поле, який буде з`являтися, коли немає фокусу, і зникати, коли фокус є.
placeholder
charset="Utf-8"gt;


type="Text"placeholder="Якийсь текст"gt;

Autofocus

Цей атрибут дозволяє встановити фокус в будь-яке поле відразу при завантаженні сторінки. Наприклад, ви можете це спостерігати, коли заходите в пошуковик.
autofocus
charset="Utf-8"gt;


type="Text"autofocusgt;
type="Text"gt;
type="Text"gt;

Незважаючи на те, що у нас 3 поля, фокус буде в першому.

Required




Атрибут required дозволяє зробити поле обов`язковим для заповнення. Це буває дуже зручно при перевірці форм до відправки.
required
charset="Utf-8"gt;


type="Text"requiredgt;
type="Submit"value="Відправити"gt;

Спробуйте залишити поле порожнім і натиснути кнопку "Відправити".

Autocomplete




При використанні цього атрибута, коли користувач почне вводити щось в поле, браузер запропонує йому значення, які він колись вводив раніше. Якщо ви не хочете цього, поставте значення off.
autocomplete
charset="Utf-8"gt;


type="Text"autocomplete="On"gt;

Pattern

Якщо ви знайомі з регулярними виразами, то цей атрибут допоможе вам полегшити перевірку форм. Після того, як користувач введе дані, браузер звіриться з регулярним виразом в даному атрибуті і, якщо щось не так, повідомить про це.

Відео: HTML форми - input pattern
pattern
charset="Utf-8"gt;


type="Text"pattern="[0-7]"gt;

Datalist

Атрибут datalist дозволяє при введенні даних підказати користувачу можливі значення.
datalist
charset="Utf-8"gt;


type="Text"list="Cities"gt;
id="Cities"gt;
Петрозаводськ
Москва
Санкт-Петербург
Воронеж
Нижній Новгород


В datalist ви пишіть можливі варіанти і id, який вказуєте в атрибуті list. Тепер спробуйте почати вводити одна з назв міст.

Відео: Створюємо сайт на HTML5 + CSS3 | Урок №8 - Стилі для форм. Створюємо сторінки з формами

Отже, в цій статті ми з вами розібрали основні атрибути для роботи з полями форми в HTML5.

Поділися в соціальних мережах:

Схожі
Як зробити поля з плаваючими мітками на jаvascript.Як зробити поля з плаваючими мітками на jаvascript.
Бібліотека вибору дати на jаvascript.Бібліотека вибору дати на jаvascript.
Мета-теги для браузера в htmlМета-теги для браузера в html
Відправка асинхронних запитів на jquery.Відправка асинхронних запитів на jquery.
Створення форм в htmlСтворення форм в html
Атрибут data- * в html5.Атрибут data- * в html5.
Ajax запити за допомогою методів $ .post () і $ .get ().Ajax запити за допомогою методів $ .post () і $ .get ().
Відправка post-запитів через jаvascriptВідправка post-запитів через jаvascript
Зникаючий текст в inputЗникаючий текст в input
Псевдокласи css3 - only-child і only-of-type.Псевдокласи css3 - only-child і only-of-type.
» » Html 5 атрибути для роботи з полями форми.