Дніпропетровський центр
професійно-технічної освіти
державної служби зайнятості
професійно-технічної освіти
державної служби зайнятості
3.4. Організація елементів форми
Знати, як отримати дані з полів форми, це лише половина справи. Інша половина − це організація елементів форми і полів в зручному порядку. При взаємодії з формами користувачі повинні зрозуміти що від них вимагається і як надати запитувану інформацію.
За допомогою <label>, <fieldset> і <legend> ми можемо краще організувати форми і направляти користувачів правильно їх завершувати.
<label>
Елемент <label> містить підписи або заголовки для управління елементами форми, однозначно пов'язуючи їх, створюючи тим самим доступну форму для всіх користувачів і допоміжних технологій. <label> повинні включати в себе текст, який описує поля, до яких вони належать.
Елементи <label> можуть включати в себе атрибут for, його значення має бути таким же, як значення атрибута id у елемента, з яким пов'язаний <label>. Відповідність значень атрибутів for і id пов'язує два елементи разом, що дозволяє користувачам натиснути на <label> і передати фокус потрібному полю форми. У такому випадку синтаксис наступний:
<form method="post">
<label for="user_name">Ім'я користувача</label>
<input type="text" name="username" id="user_name">
</form>
У браузері така форма буде виглядати наступним чином:
При бажанні, у <label> можна огорнути поля форми, такі як перемикачі або прапорці. Це дозволяє опустити атрибути for і id.
Приклад: <label> із вкладенням
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Використання label</title>
</head>
<body>
<form>
<label><input type="checkbox" name="day" value="Friday" checked>
П'ятниця</label>
<label><input type="checkbox" name="day" value="Saturday"> Субота</label>
<label><input type="checkbox" name="day" value="Sunday"> Неділя</label>
</form>
</body>
</html>
Переглянути
Редагувати
<fieldset>
<fieldset> групує поля форми в організовані розділи подібно <section> або іншим структурним елементам. Однак <fieldset> є блочним елементом, який огортає пов'язані елементи в <form>, для їх кращої організації. Елементи <fieldset> за замовчуванням також включають в себе границі контуру, які можуть бути змінені за допомогою CSS.
Приклад: Організація форми за допомогою <fieldset>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Використання fieldset</title>
</head>
<body>
<form>
<fieldset>
<label> Ім'я користувача <input type="text" name="username"></label>
<label> Пароль <input type="text" name="password"></label>
</fieldset>
</form>
</body>
</html>
Переглянути
<legend>
Елемент <legend> додає підпис або заголовок для елемента <fieldset>. Елемент <legend> огортає текст, який описує елементи управління форми, які знаходяться всередині <fieldset>. Розмітка повинна включати в себе елемент <legend> відразу після відкриваючого тега <fieldset>. На сторінці підпис з'явиться в лівому верхньому кутку рамки <fieldset>.
Приклад: Використання <legend>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Використання fieldset</title>
</head>
<body>
<form>
<fieldset>
<legend>Вхід у систему</legend>
<label> Ім'я користувача <input type="text" name="username"></label>
<label> Пароль <input type="text" name="password"></label>
</fieldset>
</form>
</body>
</html>
Переглянути
Детальніше про деякі атрибути форми і полів
Для налаштування всіх різних форм, полів і елементів управління, існує ряд атрибутів із відповідними значеннями. Ці атрибути і значення виконують кілька різних функцій, таких як відключення полів і додавання перевірки форм. Далі описані деякі часто використовувані і корисні атрибути.
Логічний атрибут disabled вимикає елемент управління таким чином, що він стає недоступним для взаємодії або введення. Заблоковані елементи не будуть відправляти ніякого значення на сервер для обробки форми.
Застосування атрибуту disabled до елементу <fieldset> відключить усі елементи управління форми всередині групи.
Атрибут placeholder в HTML5 пропонує підказку чи пораду всередині елемента <input> або <textarea>, яка зникає при натисканні на елемент управління або при отриманні фокусу. Це застосовується, щоб дати користувачам подальшу інформацію про те, як поле форми повинно бути заповнене, наприклад, використовувати формат електронної пошти.
Основна відмінність між атрибутами placeholder і value в тому, що текст value залишається на місці, коли елемент управління отримує фокус, поки користувач не видалить його вручну. Це дуже зручно для попередньо заповнених даних, таких як особиста інформація, але не для надання вказівок.
Логічний атрибут required в HTML5 стверджує, що елемент форми повинен містити значення при відправці на сервер. Якщо у елемента форми немає значення, буде відображатися повідомлення про помилку з проханням користувачеві заповнити обов'язкове поле.
Приклад: Атрибути disabled, placeholder та required
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Атрибути</title>
</head>
<body>
<form>
<label>Им'я користувача <input type="text" name="username" disabled>
</label>
<label>Email
<input type="email" name="email-address" placeholder="name@domain.com"
required>
</label>
<input type="submit">
</form>
</body>
</html>
Переглянути
Переглядаючи приклад, спробуйте заповнити поля (коректно та некоректно) та натисніть кнопку відправки даних.
Додаткові атрибути
Елементи форм також включають наступні атрибути, але не обмежуються ними. Читачеві пропонується при необхідності дослідити їх самостійно.
|
|
|
<fieldset>?placeholder і value?
