Побудова форм

Форми є невід'ємною частиною Інтернету, оскільки вони пропонують сайтам метод збору інформації від користувачів та обробки запитів, а також елементи керування практично для будь-якого мислимого застосування. За допомогою елементів керування або полів, форми можуть запросити невеликий обсяг інформації — часто це пошуковий запит, ім'я користувача або пароль. Або великий обсяг інформації — можливо, дані про посилку, платіжна інформація або пропозиція роботи.

Ми повинні знати як створювати форми, щоб отримати вхідні дані від користувача. У цьому уроці ми обговоримо, як використовувати HTML для розмітки форми, які елементи використовуватимуть для захоплення різних типів даних і як стилізувати форми за допомогою CSS. Ми не заглиблюватимемося в те, як інформація з форми обробляється на стороні сервера. Обробка форм є глибокою темою, поза області цієї книги; тут ми дотримуватимемося створення та стилізації форм.

Ініціалізація форми

Щоб додати форму на сторінку ми будемо використовувати елемент <form> . Цей елемент визначає, де на сторінці з'являться елементи керування. Крім того, елемент <form> обгортає всі елементи, включені у форму, подібно до елемента <div>.

<code data-language="html"><form action="/login" method="post"> ...
</form>

До елемента <form> може застосовуватися жменька різних атрибутів, найбільш поширеними з яких є action та method. Атрибут action містить URL, на яку інформація у формі буде надіслана для обробки сервером. Атрибут method є методом HTTP, який повинні використовувати браузери для надсилання даних форми. Обидва ці атрибути <form> мають відношення до надсилання та обробки даних.

Текстові поля та текстові області

Коли справа доходить до збирання текстової інформації від користувачів, є кілька різних елементів, доступних для отримання даних у формах. Зокрема, для збору даних на основі тексту або рядка застосовуються текстові поля та текстові області. Ці дані можуть включати уривки з тексту, паролі, номери телефонів та іншу інформацію.="tag"><input>. Цей елемент включає атрибут type для визначення, який тип інформації буде отримано в елементі керування. Найбільш популярне значення атрибуту type — це text, який означає введення одного рядка тексту.

Поряд із установкою атрибуту type, гарною практикою буде також дати елементу <input> атрибут name. Значення атрибуту name застосовується як ім'я елемента керування та надсилається разом із вхідними даними на сервер.

<code data-language="html"><input type="text" name="username">

Елемент <input> є самостійним, тобто він використовує лише один тег і не обертає будь-який контент. Значення елемента забезпечується його атрибутами та їх відповідними значеннями.

Спочатку було лише два текстові значення атрибута type — text і password (для введення паролів), проте HTML5 привіз із собою кілька нових значень атрибуту type.

Ці значення були додані, щоб забезпечити чітке значення для полів введення, а також надати краще управління користувачам. Якщо браузер не розуміє одне з цих HTML5-значень атрибуту type, він автоматично повернеться до значення text. Нижче наведено список нових типів HTML5.

• color
• date
• datetime
• email
• month
• number
• range
• search
• tel
• time
• url
• week

Наступні елементи <input> показують деякі з цих значень атрибуту type з HTML5 у використанні, а на малюнках показано, як ці унікальні значення можуть виглядати в iOS. Зверніть увагу, що різні значення забезпечують різні елементи керування, всі вони збирають інформацію від користувачів простіше.

<code data-language="html"><input type=" ;date" name="birthday"> <input type="time" name="game-time"> <input type="email" name="email-address"> <input type="url" name="website"> <input type="number" name="cost"> <input type="tel" name="phone-number">

Мал. 10.01. Елемент <input> зі значенням date у атрибута type для iOS7

Мал. 10.02. Елемент <input> зі значенням time у атрибута type для iOS7

Мал. 10.03. Елемент <input> зі значенням email у атрибута type для iOS7

Мал. 10.04. Елемент <input> зі значенням url у атрибута type для iOS7

Мал. 10.05. Елемент <input> зі значенням number у атрибута type для iOS7

Мал. 10.06. Елемент <input> зі значенням tel у атрибута type для iOS7

<textarea>

Ще одним елементом, який використовується для збору текстових даних, є елемент <textarea> . Він відрізняється від елемента <input> тим, що може приймати великі уривки тексту в кілька рядків. Елемент <textarea> також містить початкові та кінцеві теги, які можуть обернути простий текст. Оскільки <textarea> приймає лише один тип значення, атрибут type тут не застосовується, але атрибут name як і раніше використовується.

 <code data-language="html"><textarea name="comment">Додайте сюди свій коментар</textarea>

Поля множинного вибору та меню

Крім текстових полів, HTML також дозволяє користувачам вибирати дані, використовуючи множинний вибір і списки, що розкриваються. Існує кілька різних варіантів і полів для цих елементів форми, кожен з яких має свої відмінні переваги. Перемикачі дають користувачеві вибрати тільки один варіант на відміну від кількох.

Щоб створити перемикач, використовується елемент <input> зі значенням radio атрибут type. Кожен перемикач повинен мати однакове значення атрибуту name, щоб усі вони в групі були пов'язані один з одним.

З текстовими полями їхнє значення визначається тим, що користувач в їх набирає; з перемикачами користувач робить множинний вибір. Таким чином, ми маємо визначити вхідне значення. Використовуючи атрибут value ми можемо встановити конкретне значення для кожного елемента <input>.

Крім того, для попереднього вибору перемикача ми можемо використовувати логічний атрибут checked.

<code data-language="html"><input type="radio" name="day" value="Friday" checked> П'ятниця <input type="radio" name="day" value="Saturday"> Субота <input type="radio" name="day" value="Sunday"> Неділя

Прапорки

Прапорці дуже схожі на перемикачі. Вони використовують ті ж самі атрибути та шаблони, за винятком значення атрибута type. Різниця між ними полягає в тому, що прапорці дозволяють користувачам вибрати кілька значень і пов'язати їх з одним ім'ям, в той час як перемикачі обмежують користувачів одним значенням.

<code data-language="html"><input type="checkbox" name="day" value="Friday" checked> П'ятниця <input type="checkbox" name="day" value="Saturday"> Субота <input type="checkbox" name="day" value="Sunday"> Неділя

Випадаючі списки

Випадаючі списки є ідеальним способом, щоб практично надати користувачам довгий список варіантів. Довгий стовпець перемикачів поруч зі списком різних варіантів не тільки візуально непривабливий, але також складний і важкий для розуміння, особливо на мобільному пристрої. Випадні списки, з іншого боку, забезпечують ідеальний формат для довгого списку варіантів.

Для створення списку, що випадає, ми будемо застосовувати елементи <select> і <option>. Елемент <select> обертає всі пункти меню, а кожен пункт меню розміщений за допомогою елемента <option>.

>

Атрибут name розташований в елементі <select>, а атрибут value розміщується в елементах <option>, вкладених в елемент <select>. Таким чином, атрибут value у кожному елементі <option> пов'язаний з атрибутом name елемента < ;select>.

Кожен елемент <option> обертає текст (який видно користувачам) окремого пункту у списку.

Подобно логічному атрибуту checked у перемикачів і прапорців, для меню, що випадає, можна використовувати логічний атрибут selected, щоб попередньо виділити пункт для користувачів .

<code data-language="html"><select name="day"> <option value="Friday" selected>П'ятниця</option> <option value="Saturday">Субота</option> <option value="Sunday">Неділя</option>
</select>

Множинний вибір

Логічний атрибут multiple при додаванні до елемента <select> для стандартного списку, що випадає, дозволяє користувачеві вибрати більше одного варіанту зі списку одночасно. Крім того, за допомогою логічного атрибуту selected, доданого до більш ніж одного елемента <option>, в меню можна заздалегідь вибрати кілька варіантів.

Розміром елемента <select> можна керувати за допомогою CSS і він повинен бути скоригований відповідним чином для множинного вибору. Можливо, є сенс інформувати користувачів, що для вибору кількох варіантів вони повинні утримувати клавішу Shift під час клацання, щоб зробити вибір.

<code data-language="html"><select name="day" multiple> <option value="Friday" selected>П'ятниця</option> <option value="Saturday">Субота</option> <option value="Sunday">Неділя</option>
</select>

Кнопки у формі

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

Поле для відправки

Коли користувач натискає на кнопку, дані форми обробляються після її заповнення. Кнопка для надсилання створюється за допомогою елемента <input> зі значенням submit у атрибуту type. Атрибут value застосовується для вказівки тексту, який відображається всередині кнопки.

<code data-language="html">< input type="submit" name="submit" value="Надіслати">

Кнопка для відправки

Кнопка для відправлення у вигляді елемента <input> є самодостатнім і не може обертати будь-який інший контент. Якщо хочеться мати більше контролю над структурою та дизайном поля, поряд з можливістю обернути інші елементи — тоді може бути використаний елемент <button>.

Елемент <button> виконує те саме, що й елемент <input> зі значенням submit атрибут type. Однак, він включає в себе теги, що відкривають і закривають, які можуть обернути інші елементи. За замовчуванням елемент <button> діє, як якщо атрибут type має значення submit , тому атрибут type та його значення можна за бажанням опустити.

Замість використання атрибуту value для керування текстом у кнопці для відправки, буде показаний текст, який пишеться між тегом, що відкриває і закриває елемента <button>.

<code data-language="html"><button name="submit"> <strong>Надішліть нам</strong> повідомлення
</button>

Інші поля

Крім застосування, яке ми щойно обговорили , елемент <input> має кілька інших варіантів використання. Вони включають отримання прихованих даних та прикріплення файлів у процесі обробки форми.

Приховане поле

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

Щоб створити приховане поле, використовуйте значення hidden атрибута type. Додатково включає відповідні значення атрибутів name і value.

<code data-language="html"><input type="hidden" name="tracking-code" value="abc-123">

Поле для файлу

Щоб дозволити користувачам додати файл у форму, на кшталт прикріплення файлу до письма, використовуйте значення file атрибута type.

<code data-language="html">< ;input type="file" name="file">

На жаль, стилізація за допомогою CSS елемента <input>, у якого значення атрибуту type задано як file, є важким завданням. Кожен браузер містить свій власний стиль поля за промовчанням і жоден не дає багато свободи, щоб перевизначити цей стиль. JavaScript та інші рішення можуть бути використані для цього, але вони складні для побудови.

Організація елементів форми

Знати, як отримати дані з полів форми, це лише половина справи. Інша половина — це організація елементів форми та полів у зручному порядку. При взаємодії з формами користувачі повинні зрозуміти, що від них потрібно і як надати запитану інформацію.

За допомогою <label>, <fieldset> та <legend> ми можемо краще організувати форми та надсилати користувачів правильно їх завершувати.

<label>

Елемент <label> містить підписи або заголовки для керування формою, однозначно зв'язуючи їх разом, створюючи тим самим доступну форму для всіх користувачів та допоміжних технологій. <label> повинні включати текст, що описує поля до яких вони відносяться.

<label> можуть включати атрибут for, його значення має бути таким же, як значення атрибута id у елемента, з яким пов'язаний <label>. Відповідність значень атрибутів for та id пов'язує два елементи разом, що дозволяє користувачам натиснути < label> і передати фокус потрібному полю форми.

<code data-language="html"><label for="username">Ім'я користувача< ;/label> <input type="text" name="username" id="username">

За бажанням, <label> може обернути поля форми, такі як перемикачі або прапорці. Це дозволяє опустити атрибути for та id.

<code data-language="html"><label> <input type="radio" name="day" value="Friday" checked> П'ятниця
</label> <label> <input type="radio" name="day" value="Saturday"> Субота
</label> <label> <input type="radio" name="day" value="Sunday"> Неділя
</label>

<fieldset>

<fieldset> групує поля форми в організовані розділи. Подібно <section> або іншим структурним елементам, але <fieldset> є блоковим елементом, який обертає зв'язані елементи, зокрема , в <form>, для їхньої кращої організації. <fieldset> за промовчанням також включають межі контуру, які можуть бути змінені за допомогою CSS.

<code data-language="html"><fieldset> <label> Ім'я користувача <input type="text" name="username">
</label> <label> Пароль <input type="text" name="password">
</label>
</fieldset>

<legend>

Елемент <legend> надає підпис або заголовок для елемента <fieldset>. Елемент <legend> обертає текст, що описує елементи керування форми, які знаходяться всередині <fieldset>. Розмітка повинна включати елемент <legend> відразу після тега <fieldset>. На сторінці підпис з'явиться у верхньому лівому куті рамки <fieldset>.

<code data-language="html"> <fieldset> <legend>Вхід до системи</legend> <label> Ім'я користувача <input type="text" name="username">
</label> <label> Пароль <input type="text" name="password">
</label>
</fieldset>

Атрибути форми та полів

Для налаштування всіх різних форм, полів та елементів управління, існує ряд атрибутів та відповідних значень. Ці атрибути та значення виконують кілька різних функцій, таких як відключення полів та додавання перевірки форм. Далі описані деякі часто використовувані та корисні атрибути.

disabled

Логічний атрибут disabled вимикає елемент управління таким чином, що він недоступний взаємодії чи введення. Заблоковані елементи не надсилатимуть жодного значення на сервер для обробки форми.

Застосування атрибуту disabled до елемента <fieldset> відключить всі елементи керування форми всередині групи.

<code data-language="html"><label> Ім'я користувача <input type="text" name="username" disabled>
</label>

placeholder

Атрибут placeholder в HTML5 пропонує підказку або пораду всередині елемента <input> або <textarea>, яка зникає при натисканні на елемент керування або при отриманні фокусування. Це застосовується, щоб дати користувачам подальшу інформацію про те, як поле форми має бути заповнене, наприклад, використовувати формат електронної пошти.

<code data-language="html"> <label> Email <input type="email" name="email-address" placeholder="name@domain.com">
</label>

Основна різниця між атрибутами placeholder та value у тому, що текст value залишається на місці, коли елемент керування отримує фокус, доки користувач не видалить його вручну. Це дуже зручно для попередньо заповнених даних, таких як особиста інформація, але не для надання вказівок. "100" src="//jsfiddle.net/webref/r0arq78b/embedded/result,html/" allowfullscreen="allowfullscreen">

<code data-language="html"><label> Email <input type="email" name="email-address" required>
</label>

<code data-language="html"><form> <fieldset class="account-info"> <label> Ім'я користувача <input type="text" name="username">
</label> <label> Пароль <input type="password" name="password">
</label>
</fieldset> <fieldset class="account-action"> <input class="btn" type="submit" name="submit" value="Увійти"> <label> <input type="checkbox" name="remember"> Запам'ятати
</label>
</fieldset>
</form>

*, *:before, *:after { box-sizing: Border-box; } 
form { border: 1px solid #c6c7cc; border-radius: 5px; font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; overflow: hidden; width: 240px; } 
fieldset { border: 0; margin: 0; padding: 0; } 
input { border-radius: 5px; font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0; } 
.account-info { padding: 20px 20px 0 20px; } 
.account-info label { color: #395870; display: block; font-weight: bold; margin-bottom: 20px; } 
.account-info input { background: #fff; border: 1px solid #c6c7cc; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1); color: #636466; padding: 6px; margin-top: 6px; width: 100%; } 
.account-action { background: #f0f0f2; border-top: 1px solid #c6c7cc; padding: 20px; } 
.account-action .btn { background: linear-gradient(#49708f, #293f50); border: 0; color: #fff; cursor: pointer; font-weight: bold; float: left; padding: 8px 16px; } 
.account-action label { color: #7c7c80; font-size: 12px; float: left; margin: 10px 0 0 20px; }

<code data-language="html"><section class="row"> <div class="grid"> ...
</div>
</section>