HTML-форми
HTML-форми є елементами керування, що використовуються для збирання певної інформації від відвідувачів сайту.
Веб-форми складаються з набору текстових полів, кнопок, списків та інших елементів керування, які активізуються кліком миші. Уведене користувачем у форму може оброблюватися тут же на сайті за допомогою відповідних функцій Java Script або на віддаленому сервері. Можна також організувати передавання введеної користувачем інформації на певний email для подальшої обробки.
Зміст
Визначення форми
Елемент <form>
Елемент <form>...</form> є основою будь-якої форми. Він не передбачає введення даних, оскільки є лише контейнером, що утримує в одному місці усі елементи форми. Атрибути цього елемента містять інформацію, спільну для усіх полів даної форми, тому в одній формі слід поєднувати логічно об'єднані полі.
Атрибут
Значення та опис
accept-charset
Значення цього атрибута - це розділений пробілами список кодувань символів, які будуть використовуватися для відправлення форми, наприклад, <form accept-charset="ISO-8859-1">
action
Обов'язковий атрибут, який вказує на url обробника форми на сервері, куди передаються дані.
Якщо уся обробка виконуватиметься на стороні клієнта сценаріями Java Script, то для атрибута action зазначають значення #.
Можна зробити й так, щоб заповнена відвідувачем форма надсилалась на певну електронну скриньку. Для цього потрібно написати приблизно таке:
<form action = "mailto: адреса електронної скриньки" enctype = "text / plain"></form>
autocomplete
Відповідає за запам'ятовування введених в текстове поле значень і автопідстановку їх при наступному введенні:
on - означає, що запам'ятовування увімкнене;
off - відключає автозаповнення для полів форми.
enctype
Використовується для зазначення MIME-типу даних, що відправляються разом з формою. Так, наприклад, enctype="text/plain" означає, що передається звичайний, а не html-текст.
method
Задає спосіб передавання даних.
Метод get передає дані форми на сервер через адресний рядок браузера.
Метод post використовується для пересилання даних великого обсягу, а також конфіденційної інформації і паролів.
Детальніше про HTTP-методи запиту - за посиланням.
name
Задає ім'я форми, яке в подальшому буде використовуватися для доступу до елементів форми. Наприклад, name="anketa"
novalidate
Відключає перевірку в кнопці для відправлення форми. Атрибут використовується без вказівки його значення.
target
Вказує на вікно, в яке буде направлена інформація:
_blank - нове вікно
_self - той же фрейм
_parent - батьківський фрейм (якщо він існує, якщо ні - тоді в поточний)
_top - вікно верхнього рівня стосовно даного фрейма
Групування елементів форми
Елемент <fieldset>
Елемент <fieldset>...</fieldset> призначений для групування елементів, пов'язаних один з одним, розділюючи таким чином форму на логічні фрагменти.
Кожній групі елементів можна присвоїти назву за допомогою елемента <legend>...</legend>, який розміщується одразу ж після тегу <fieldset>. Назва групи буде зазначена ліворуч на верхній межі.
Приклад простої форми
Атрибут
Значення та опис
disabled
Якщо присутній цей атрибут, то група зв'язаних елементів, що розміщені всередині контейнера <fieldset>, будуть відключені для заповнення й редагування. Таким чином можна унеможливити заповнення форми. Атрибут використовується без вказівки значення: <fieldset disabled>
name
Визначає ім'я, яке буде використовуватися для посилання на елементи форми у Java Script або для посилання на дані форми після заповнення й відправлення форми. Є аналогом атрибута id.
Створення полів форми
Елемент <input>
Елемент <input> дохволяє створити більшість полів форми. Атрибути елемента відрізняються в залежності від типу поля, для створення якого використовується цей елемент.
За допомогою CSS-стилів у цих елементів керування можна змінити розмір, тип шрифта, колір та інші властивості тексту, а також додавати межі, колі фону і фонове зображення. Ширина поля задається властивістю width.
Атрибут
Значення та опис
accept
Визначає тип файлу, дозволеного для відправлення на сервер. Зазначається тільки для <input type="file">. Може бути зазначене розширення: accept=".gif", accept=".pdf", accept=".doc" тощо або тип файлу: audio/* - аудіофайли, video/* - відеофайли, image/* - зображення.
alt
Визначає альтернативний текст для зображень. Зазначається тільки для <input type="image">.
autocomplete
Відповідає за запам'ятовування введених в текстове поле значень і автопідстановку їх під час наступного введення:
on - означає, що значення можна зберігати й підставляти
off - відключає автозаповнення полів форми
autofocus
Дозволяє зробити так, щоб у щойно завантаженій формі те чи інше поле введення уже мало фокус (було вибраним) і було готовим до введення даних.
checked
Атрибут перевіряє, чи встановлено прапорець за замовчуванням під час завантаження сторінки для полів типу type="checkbox" і type="radio".
disabled
Відключає можливість редагування і копіювання вмісту поля.
form
Значення атрибута повинно дорівнювати атрибуту id елемента <form> у цьому ж документі. Визначає одну чи декілька форм, яким належить дане поле форми.
height
Значення атрибута містить кількість пікселів без зазначення одиниці вимірювання. Задає висоту поля форми типу type="image", наприклад, <input type="image" src="img.gif" height="50">. Рекомендується одночасно встановлювати як висоту, так і ширину width поля.
list
Є посиланням на елемент <datalist>, містить його id. Дозволяє надати користувачеві декілька варіантів на вибір, коли він починає вводити значення у відповідному полі
max
Дозволяє обмежити розмір введених числових даних максимальним значенням. Значення атрибута може містити ціле або дробове число. Рекомендується використовувати цей атрибут разом з атрибутом min. Працює з типами полів number, range, date, datetime, datetime-local, month, time і week.
maxlength
Атрибут задає максимальну кількість символів, що вводяться в поле. За промовчанням ці кількість дорівнює 524.288 символів.
multiple
Дозволяє користувачеві ввести декілька значень атрибутів, розділюючи їх комою. Використовується стосовно файлів і адрес електронної пошти. Зазначається без вказівки значення атрибута.
name
Визначає ім'я, яке буде використовуватися для доступу до елемента <form>, наприклад, в таблицях стилів. Є аналогом атрибута id.
pattern
Дозволяє визначити, які символи, в якій кількості і в якому порядку повинні бути введені в полі. Наприклад, pattern="[a-z]{3}-[0-9]{4}" означає, що у полі повинно бути введено три будь-які рядкові літери латинського алфавіту, потім поставлене тире, а після нього чотири будь-які цифри.
Деякі типові значення pattern
^[a-zA-Z]+$ - довільна кількість латинських літер
^[0-9]+$ - довільна кількість цифр
\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3} - IP-адреса
[0-9]{5} - поштовий індекс (в Україні поштовий індекс складається з п'яти цифр)
\d+(,\d{2})? - ціна у форматі 1,25 (роздільник - кома)
\d+(.\d{2})? - ціна у форматі 1.25 (роздільник - крапка)
placeholder
Містить текст, який відображається в полі до його заповнення. Найчастіше це підказка або вказівка на формат введення даних.
readonly
Не дозволяє користувачеві змінювати значення елементів форми, виділення і копіювання тексту при цьому доступне. Зазначається без вказівки значення атрибута.
required
Виводить повідомлення про те, що дане поле є обов'язковим для заповнення. Якщо користувач намагатиметься відправити форму, не заповнивши це поле, то на екрані відобразиться відповідне повідомлення. Зазначається без вказівки значення атрибута.
size
Задає ширину поля в символах. За промовчанням значення дорівнює 20. Працює з типами полів text, search, tel, url, email і password.
src
Задає url зображення, якщо воно використовується як кнопка відправлення данних. Зазначається тільки для поля <input type="image">
step
Використовується для елементів, що передбачають введення числових даних з певним інтервалом і позначає величину збільшення чи зменшення значень в процесі регулювання діапазону. Застосовується, наприклад, до поля типу number.
type
Тип поля, а саме:
button - створює кнопку.
checkbox - перетворює поле введення на прапорець, який можна встановити чи очистити.
color - генерує палітри кольорів, надаючи можливість користувачу вибрати значення кольору в шістнадцятковому форматі.
date - дозволяє вводити дату у форматі дд.мм.рррр.
datetime-local - дозволяє вводити дату і час по шаблону дд.мм.рррр гг:хх.
email - поле для введення електронної адреси користувача.
file - дозволяє завантажувати файли з комп'ютера користувача.
hidden - приховує елемент керування, який не відображається браузером і не дозволяє користувачеві змінювати значення за промовчанням.
image - створює кнопку, в якій замість тексту дозволяється вставити зображення.
month - дозволяє користувачеві вводити рік і номер місяця за шаблоном рррр-мм.
number - призначене для введення цілочислених значень. Його атрибути min, max і step задають нижню, верхню межі і крок між значеннями відповідно. Ці атрибути можуть бути використані у всіх елементів, що мають числові показники. Їх значення залежать від типу елемента.
password - створює текстові полі, призначені для введення паролю. При цьому введені користувачем символи автоматично замінюються на зірочки, маркери або інші символи, встановлені конкретним браузером.
radio - створює перемикач - елемент керування, що має вигляд невеличкого кружечка, який можна увімкнути чи вимкнути.
range - дозволяє створити такий елемент як повзунець min/max, щоб користувач міг встановити діапазон вибору.
reset - кнопка очищення полів форми від введених користувачем даних.
search - позначає поле пошуку, за промовчанням це поле має прямокутну форму.
submit - стандартна кнопка, по кліку на якій збирається внформація з форми і відправляється на обробку.
text - створює текстове поле у формі; виводить однорядкове текстове поле для введення текстової інформації.
time - дозволяє вводити час у 24-годинному форматі за шаблоном гг:хх.
url - поле, призначене для введення URL-адрес.
week - відповідний інструмент-вказівник, що дозволяє користувачеві обрати один тиждень у році, після чого відображає введену інформацію у форматі тт-рррр. В залежності від року кількість тижнів може бути 52 або 53.
value
Визначає текст, який буде відображуватися на кнопці, в полі або пов'язаний текст. Не зазначається для полів типу file.
Текстове поле
Елемент <textarea>
Елемент <textarea> використовується замість елемента <input type="text"> тоді, коли потрібно створити великі текстові полі для введення текстових даних у вигляді абзацу. Текст, що буде відображатися як початкове значення, розміщується усередині тега. Розміри поля встановлюються за допомогою атрибутів cols - розмір по горизонталі і rows - розмір по вертикалі. Висоту поля можна задати і атрибутом height. Усі розміри обчислюються за розміром одного символа моноширинного шрифта.
Атрибут
Значення та опис
autofocus
Встановлює автоматичний фокус на елементі під час завантаження сторінки
cols
Задає ширину поля через зазначення кількості символів. Якщо користувач уведе більше тексту, з'явиться смуга прокручування
disabled
Відключає можливість редагування й копіювання вмісту поля
form
Значення атрибута повинне бути рівним значенню атрибута id елемента <form> у цьому ж документі. Визначає одну чи декілька форм, якій належить це текстове поле
maxlength
Задає максимальну кількість символів для введення у це поле
name
Ім'я текстового поля
placeholder
Коротка текстова підказка, яка описує очікуване введене значення
readonly
Унеможливлює редагування вмісту поля
required
Виводить повідомлення про те, що це поле є обов'язковим для заповнення
rows
Число - кількість рядків, які повинні відображатися у видимій області текстового поля
wrap
Визначає, чи повинен текст зберігати переноси рядків при відправленні форми. Значення hard зберігає перенос, а значення soft не зберігає. Якщо використовується hard, то повинне бути вказане значення атрибута cols.
Розкривний список
Елемент <select>
Розкривний список дає можливість розмістити велику кількість елементів компактно. Він дозволяє користувачеві обрати одне значення з запропонованого переліку. Створюється такий елемент керування за допомогою тегів <select>...</select>.
В утворених списках можна змінювати шрифт, колір та інші властивості тексту, а також додавати межі, колір фону і фонове зображення.
Атрибут
Значення та опис
autofocus
Встановлює автоматичний фокус на елементі під час завантаження сторінки
disabled
Відключає розкривний список
form
Визначає форму, якій цей список належить. Значенням атрибута є ідентифікатор форми.
multiple
Надає можливість вибору одного або декількох пунктів списку, для цього під час вибору слід натиснути й утримувати натисненою клавішу Ctrl
name
Задає ім'я для випадного списка. Значення атрибута повинне відображати тематику списку
required
Виводить повідомлення про те, що вибір значення з цього списка є обов'язковим для користувача.
size
Задає кількість елементів списку, які одночасно відображаються на екрані. Якщо кількість елементів списку більша ніж зазначена кількість, з'явиться смуга прокручування. Значення атрибута задається цілим додатним числом.
Елемент <option>
Теги <option>...</option>, які розміщують усередині <select>, використовують для створення списку елементів, які потім будуть підставлені в <select>.
Атрибут
Значення та опис
disabled
Робить елемент списку недоступним для вибору
label
Задає скорочену версію для елемента, яка буде відтворюватися в випадному списку. Значення атрибута містить текст, що описує відповідний пункт розкривного списку.
selected
Відображає обраний елемент списку за промовчанням під час завантаження сторінки браузером
value
Вказує значення, яке буде відправлене для обробки, у разі вибору саме цього елемента списку.
Елемент <optgroup>
Систематизація списків може бути здійснена за допомогою елемента <optgroup>...</optgroup>, який створює заголовки в списках.
Атрибут
Значення та опис
disabled
Відключає дану групу елементів списка для вибору
label
Задає заголовок для групи елементів випадного списка. Значення атрибута містить текст, недоступний для вибору, який буде розміщуватися над відповідними пунктами списку. Текст виділяється в браузері напівжирним накресленням.
Написи до полів форми
Елемент <label>
Написи до полів форми створюються за допомогою елемента <label>...</label>.
Атрибут
Значення та опис
for
Визначає, до якого поля прив'язаний даний елемент. Можна створювати написи до елементів <input>, <textarea> та <select>. Якщо поле всередині елемента <label>, тоді атрибут for зазначати не треба.
Кнопки
Елемент <button>
Елемент <button>...</button> дозволяє створити клікабельні кнопки. За допомогою кнопок можна передавати дані у форму, очищувати вміст форми чи виконувати якісь інші дії. Можна створювати межі, змінювати фон і вирівнювати текст на кнопці.
На відміну від кнопок, створених за допомогою <input> (<input type="submit">, <input type="image">, <input type="reset">, <input type="button">), усередину елемента <button> можна вкласти інший контент - текст чи зображення.
Для коректного відображення елемента <button> різними браузерами потрібно зазначати атрибут type, наприклад, <button type="submit">...</button>.
Атрибут
Значення та опис
autofocus
Встановлює фокус на кнопці під час завантаження сторінки
disabled
Відключає кнопку, робить її неклікабельною
form
Вказує на одну чи декілька форм, яким належить дана кнопка. Значення атрибута - ідентифікатор відповідної форми.
formaction
Значення атрибута містить URL-адресу обробника даних форми, що відправляються після натискання на кнопку. Тільки для кнопки типу type="submit". Перевизначає значення атрибута action, зазначеного для елемента <form>
name
Задає ім'я кнопки, значення атрибута - текст. Використовується для посилання на дані форми, після того як форму була відправлено або для посилання на цю кнопку в Java Script.
type
Визначає тип кнопки. Можливі значення:
button - клікабельна кнопка
reset - кнопка скидання даних, введених у форму; повертає початкові значення
submit - кнопка для відправлення даних форми
value
Задає значення за промовчанням, яке буде відправлене після натискання но кнопку,