Атрибути елементів веб-форм
Для того, щоб нормально працювали радіокнопки - їм необхідно задати однакові атрибути name:
Стать клієнта:
Стать партнера:
<p>Стать клієнта:</p>
<p><label><input type="radio" name="gender" value="m"> чол</label></p>
<p><label><input type="radio" name="gender" value="f"> жін</label></p>
<p><label><input type="radio" name="gender" value="o"> інше</label></p>
<p>Стать партнера:</p>
<p><label><input type="radio" name="gender2" value="m"> чол</label></p>
<p><label><input type="radio" name="gender2" value="f"> жін</label></p>
<p><label><input type="radio" name="gender2" value="o"> інше</label></p>
Атрибут name необхідно задати для кожного елемента форми, якщо її дані відправляються на сервер. Дані відправляються пакетом із пар: [ключ - значення], де ключ - це значення атрибута name, а значення - те, що міститься в атрибуті value.
Елементи radio та checkbox можуть мати статус checked - він робить активним елемент веб-форми:
<label><input type="radio" name="gender3"> ч</label>
<label><input type="radio" name="gender3" checked> ж</label>
<label><input type="checkbox" checked> чекбокс</label>
Елементи, в які можна вводити дані з клавіатури, можуть мати атрибут placeholder, значення цього атрибута - строка, яка буде відображатися у пустому полі вводу до того момента, коли користувач почне вводити текст:
<label><input type="text" placeholder="Input text here"></label>
<label><textarea placeholder="Placeholder for <textarea>"></textarea></label>
Стилізація плейсхолдера:
label input::-webkit-input-placeholder,
label input::-ms-input-placeholder,
label input::-moz-placeholder {
color: silver;
font-style: italic;
opacity: 1;
}
Поля для ввода текста можна обмежити максимально допустимою кількістю символів, що користувач може ввести. Наприклад, для поля ввода телефона можна задати обмеження в 10-13 символів, для логіна при створенні аккаунта - 24, і т.п. За це відповідає атрибут maxlength:
<p><label><input type="text" maxlength="4"><label></p>
Всі видимі елементи веб-форм можуть мати атрибут disabled, який робить елемент неактивним.
Схожий атрибут readonly - дане поле неможна редагувати.
<label><input type="checkbox" disabled> - неактивний чекбокс.</label>
<label><input type="text" disabled> - неактивне текстове поле.</label>
<label><input type="text" readonly value="1234"> - readonly.</label>
Елементи форми можуть знаходитися за межами батьківського елемента форми. З формою такі елементи повинні зв’язуватися по ідентифікатору форми через атрибут form:
<form id="our_form">Форма, порожня всередині</form>
...
<p><label>Input name: <input type="text" form="our_form"></label></p>
Кожен елемент форми може мати атрибут value, яке відповідає те, яке значення передасться на сервер у парі [ключ - значення]. Для текстових полів це значення буде рівним тексту, що ввів користувач. Для решти елементів - можуть бути варіанти.
<label><input type="radio" name="gender" value="male"> ч</label>
<label><input type="radio" name="gender" value="female"> ж</label>
<label><input type="radio" name="gender" value="trans"> т</label>
Якщо передавати дані за допомогою GET і зробити активним другу радіокнопку, то в результаті буде сформовано URL-адресу:
http://site.com/form.html?gender=female
tabindex - атрибут, що задає порядок переходу між полями форми клавішою tab:
<style>input:focus { background: yellow; }</style>
<form>
<p><label><input tabindex="1" value="tabindex = 1"></label></p>
<p><label><input tabindex="5" value="tabindex = 5"></label></p>
<p><label><input tabindex="3" value="tabindex = 3"></label></p>
<p><label><input tabindex="2" value="tabindex = 2"></label></p>
<p><label><input tabindex="4" value="tabindex = 4"></label></p>
</form>
Без tabindex:
|
|
|
<table>
<tr>
<td>
<label>Input 1 <input></label>
<label>Input 3 <input></label>
<label>Input 5 <input></label>
</td>
<td>
<label>Input 2 <input></label>
<label>Input 4 <input></label>
<label>Input 6 <input></label>
</td>
</tr>
</table>
З tabindex:
|
|
|
<table>
<tr>
<td>
<label>Input 1 <input tabindex="1"></label>
<label>Input 3 <input tabindex="3"></label>
<label>Input 5 <input tabindex="5"></label>
</td>
<td>
<label>Input 2 <input tabindex="2"></label>
<label>Input 4 <input tabindex="4"></label>
<label>Input 6 <input tabindex="6"></label>
</td>
</tr>
</table>
Селектори атрибутів
Статуси видимих елементів веб-форм можуть мати наступні селектори в стилях:
input:checked { ... }
input:focus { ... }
input:disabled { ... }
input:readonly { ... }
input[disabled] { ... }
input[readonly] { ... }
Селектор :focus можуть мати також посилання, кнопки.
