Функція автозаповнення вже давно є бажаним функціоналом в Інтернеті. Якщо ви вводите щось у поле форми, браузери - якщо функція увімкнена та підтримується браузером - пропонують список варіантів слів.
Такі застосування тепер можна дуже легко втілити. Для цього потрібно призначити елементу input атрибут autocomplete.
<input type="text" autocomplete="on" />
Значення on активує автозаповнення для поля. Відтепер браузер запам'ятовуватиме введені у поле значення і надаватиме їх у подальшому через список вибору. Це дозволяє значно швидше заповнювати форми.
Тепер не в усіх випадках бажано таке поведінку. У таких випадках автозаповнення можна явно вимкнути. Для цього атрибуту autocomplete призначається значення off.
<input type="text" autocomplete="off" />
Також можна додати атрибут autocomplete елементу form. Залежно від того, чи використовується значення on чи off, може бути активована або вимкнена функція автозаповнення для всієї форми.
<form autocomplete="on"> .. </form>
У випадку протилежних вказівок всередині форми використовуватиметься це.
<form autocomplete="on"> Ім'я: <input type="text" name="vname" autocomplete="off" /><br /> Прізвище: <input type="text" name="nname" /><br /> Поштовий індекс: <input type="text" name="plz" /><br /> Місце: <input type="text" name="ort" /> </form>
У цьому прикладі автозаповнення застосуватиметься до всіх полів форми, оскільки значення атрибуту autocomplete в початковому елементі form встановлене на on. Виняток складає тільки поле vname, оскільки автозаповнення для цього поля було явно вимкнене.
Для того, щоб автозаповнення працювало, ця функція повинна підтримуватися відповідним браузером і не повинна бути вимкнена. Крім того, у списку варіантів будуть показані тільки ті значення, які вже були введені раніше.
Щоб мати змогу впливати на значення у списку варіантів, було введено HTML5 елемент datalist. Цей елемент не призводить до видимого виводу в браузері. За допомогою дочірніх елементів option можна визначити значення для списків варіантів. Наприклад:
<div> Мова: <br /> <input type="text" autocomplete="on" list="sprache" /> </div> <datalist id="sprache"> <option value="HTML5"></option> <option value="XHTML"></option> <option value="PHP"></option> <option value="JavaScript"></option> </datalist>
Через атрибут list елементу input встановлюється логічне зв'язок між полем введення та елементом datalist. Для цього атрибута list та для атрибута id елемента datalist мають бути використані однакові значення.
Встановлення фокусу
Полю форми можна автоматично призначити фокус при завантаженні сторінки. Таку функцію ви могли бачити, наприклад, на головній сторінці Google. При її завантаженні ви можете одразу ввести пошуковий запит, не маючи потребу вручну встановлювати курсор у поле пошуку/введення.
У HTML5 для цих випадків існує атрибут autofocus. Цей атрибут призводить до того, що поле форми, обладнане ним, отримує фокус автоматично при завантаженні сторінки.
Приклад:
<form> <input name="suchfeld" autofocus="autofocus" /> <input type="submit" value="Suche" /> </form>
Браузери, які не розпізнають атрибут autofocus, просто його ігнорують. Це не має негативних наслідків. (Втім, в такому випадку поле не буде сфокусовано).
Перевірка введення
Дотепер не можна було перевірити введення форми лише завдяки HTML-засобам. Тому, якщо вам, наприклад, потрібно перевірити, чи користувач дійсно ввів електронну адресу у поле форми, ви зазвичай зверталися до JavaScript або PHP. У HTML5 такі "викиданки" не є потрібними. Оскільки тепер HTML має API валідації. І воно дійсно гідне уваги. За дуже маленькі зусилля відтепер можна перевіряти введення у форми.
У HTML5 є деякі правила, які визначають, як поля валідуються. Наприклад, в полі введення типу email перевіряється, чи було введено синтаксично коректну адресу електронної пошти.
• url – Перевірка на URL
• email – Перевірка на адресу електронної пошти
• range – Перевірка на плаваюче число
• number – Перевірка на плаваюче число
Щоб позначити поле як обов'язкове для заповнення, йому призначається атрибут required.
<input id="vname" name="vname" type="text" required="required" />
Поле, позначене таким чином, має бути заповненим, тобто не може бути пустим.
Але увага: для валідації полів мають бути виконані певні умови.
• Елементу має бути призначено атрибут name.
• Елемент повинен бути в середині елементу form, тобто знаходитися в HTML-формі. Альтернативою може бути також встановлення зв'язку з формою через атрибут form.
• Елемент не повинен мати атрибутів readonly або disabled.
Правильне застосування виглядає наступним чином:
<form action="form.php">
<input id="vname" name="vname" type="text" required="required" />
<input type="submit" />
</form>
Тут браузер перевірить, чи поле було заповненим. Якщо поле порожнє і спробувати відправити форму, браузер повинен вивести повідомлення про помилку.
Протягом цього рядка вже було наголошено на полях форми email, range, number, tel та url. Ці поля перевіряються не лише на наявність значення, а й на правильність введеного значення.
<form action="form.php">
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
Наприклад, для полів типу email перевіряється, чи введене значення дійсно є синтаксично вірною електронною адресою. Якщо цього не відбувається, браузер видаст повідомлення про помилку.
Для відображення повідомлення про помилку відповідальні браузери.
Не дозволяти автоматичну перевірку полів
Не в усіх випадках автоматична перевірка введених даних є бажаною. Якщо потрібно заборонити перевірку всієї форми, то в атрибут novalidate додаткового елементу form.
<form action="form.php" novalidate>
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
Також атрибут formnovalidate можна додати до кнопки відправлення. Це корисно, наприклад, якщо одночасно з кнопкою відправки пропонується кнопка для збереження форми.
<form action="form.cgi" method="post">
<input id="email" name="email" type="email" />
<input type="submit" name="submit" value="Senden" />
<input type="submit"
formnovalidate="formnovalidate" value="Speichern" />
<input type="submit"
formnovalidate="formnovalidate" value="Ausloggen" />
</form>
У цьому випадку форма валідується лише за допомогою першої кнопки відправлення. Інші дві використовуються для завантаження та виходу. В цих випадках валідація не потрібна.
