3. Этикетка

<label> позволяет при щелчке по тексту задавать значение для поля <input>. Удобно использовать для чекбоксов и радио-кнопок. Облегчает их установку, так как не нужно целиться в элемент малого размера.

<form action="#">

<label for="male">Male</label>

<input type="radio" name="sex" id="male" value="male"><br>

<label><input type="radio" name="sex" value="female"> Female</label>

</form>

4. Поле для ввода текста

<textarea> - позволяет удобно вводить большое количество текста. Отображается блоком на несколько строк, позволяет задавать размеры за счёт указания количества строк и столбцов или посредством CSS.

Возможные атрибуты:

autofocus - автофокус, аналогично <input>.

cols - задаёт видимую ширину блока.

disabled - отключает поле.

maxlength - задаёт максимальное количество символов, которое можно ввести.

name - имя блока.

placeholder - аналогично <input>.

readonly - только для чтения.

required - обязательное поле.

rows - задаёт видимое количество строк.

wrap - указывает каким образом текст в поле должен передаваться после отправки формы. По умолчанию - soft, текст не будет разбит на подстроки и передастся единой строкой. Если задать hard, то в местах переноса будет добавлена информация по переносе строки на следующую линию. При использовании значения hard атрибута wrap, обязательно должен быть задан атрибут cols.

Пример:

<textarea rows="4" cols="30"> Курс основ информационных технологий Подвесного - мы научим вас делать сайты! </textarea>

5. Кнопки

<button> - создаёт кнопку на которую можно щёлкнуть. Внутри тега может быть содержимое, такое как текст или изображение - в этом отличие от кнопок созданных с помощью элемента <input type="button">.

Следует всегда задавать атрибут type="button".

Возможные атрибуты:

autofocus - автофокус.

disabled - отключить кнопку.

formnovalidate - отключить проверку формы. Только для типа submit.

name - имя

type - тип кнопки. Может быть button - просто кнопка, reset - очистка формы, submit - отправка.

value - начальное название кнопки.

Пример:

<button type="button">Отшлёпай меня!</button>

6. Выбор из списка

<select> - позволяет создать ниспадающий список.

<option> - используется внутри тега <select> для создания элементов списка. Также используется внутри тега <datalist>.

Атрибуты тега <select>:

autofocus - автофокус. disabled - отключить. multiple - позволяет выбрать несколько пунктов из списка.

name - имя.

required - обязательно для использования.

size - задаёт количество видимых элементов списка за раз.

Атрибуты тега <option>:

disabled - отключить.

label - краткая этикетка для опции.

selected - выбор по умолчанию.

value - содержимое, которое будет передано на сервер.

Пример:

<p>А ты делал домашку?</p>

<select>

<option value="yes" selected>Делал</option>

<option value="no">Не делал</option>

</select>

<optgroup> - позволяет группировать элементы ниспадающего списка.

Стоит использовать в случае больших списков для облегчения понимания пользователем.

Возможные атрибуты:

disabled - отключить.

label - указывает заголовок для группы опций.

Пример:

<select>

<optgroup label="Swedish Cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

</optgroup>

<optgroup label="German Cars">

<option value="mercedes">Mercedes</option>

<option value="audi">Audi</option>

</optgroup>

</select>