Многострочный текст, атрибуты текстовых элементов
Вообще говоря, элемент <input/> не поддерживает перенос строки, а значит не позволяет вводить многострочный текст. Для этих целей существует специальный тег <textarea>, имя которого также задается атрибутом name. Его относительные размеры могут быть определены в атрибутах rows и cols, обозначающими число видимых строк и символов в строке соответственно. Содержимое <textarea> хранится не в атрибуте value, а между открывающим и закрывающим тегами. Как и в <input/>, максимальная длина значения может быть задана атрибутом maxlength.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег FORM</title>
</head>
<body>
<form name="search" action="/find.cgi">
<textarea rows="4" cols="20" name="myText">
Тут можно расположить большой
многострочный текст…
</textarea>
</form>
</body>
</html>
Если текст не помещается в строку <textarea>, то он переносится на следующую. Если же строк больше, чем вмещается в элемент, то автоматически появляется полоса прокрутки. В HTML 5 есть еще атрибут, определяющий способ передачи содержимого на сервер — это wrap. Установленный в значение hard, он добавляет код символа переноса в конец каждой строки. По умолчанию же значением wrap является soft, при котором символы переноса строки не добавляются.
Оба элемента <input/> и <textarea> поддерживают булев атрибут readonly="readonly", который устанавливает их в режим «только чтение», запрещая редактирование содержимого. Кроме того, в HTML 5 появилась возможность с помощью атрибута placeholder добавить этим элементам короткую подсказку, объясняющую пользователям, какая информация от них требуется (для длинных подсказок используйте атрибут title). А установив булев атрибут required="required", вы сообщите браузеру, что поле должно быть обязательно заполнено, чтобы форма могла быть отправлена на сервер.
Альтернативная кнопка, перегрузка атрибутов формы
Исторически так сложилось, что кнопки можно добавлять не только тегом <input />, но и с помощью элемента <button>. В целом, он повторяет ту часть функциональности <input />, которая касается кнопок. Так значением атрибута type могут быть reset, submit и button, отвечающие за функции очистки формы, отправки данных и кнопки без определенного действия соответственно. Отличается тег <button> тем, что он парный, и надпись на кнопке определяется не в атрибуте value, а в содержимом элемента.
<button type="submit" formtarget="newtarget.cgi">Нажми меня</button>
Кнопка отправки данных, будь это <input /> или <button>, позволяет переопределить некоторые атрибуты формы (элемента <form>), к которой они относятся. Это атрибуты action, enctype, method, novalidate и target, а их «кнопочные» аналоги соответственно formaction, formenctype,formmethod, formnovalidate и formtarget.
Выбор из списка
Для организации выпадающих списков используют структуру, состоящую из элемента <select>, внутри которого размещаются дочерние <option>, представляющие варианты выбора.
<select name="food">
<option value="pie">Пирог</option>
<option value="bread" selected="selected">Хлеб</option>
<option value="cookie" label="Печенье"></option>
</select>
Передаваемое на сервер имя поля указывается в атрибуте name элемента <select>, а его значение — в атрибуте value элемента <option>. В выпадающем списке, как и в случае с переключателем <input type="radio" />, из предлагаемых вариантов может быть выбран только один. Но чтобы указать вариант по умолчанию применяется другой булев атрибут — selected="selected". Заголовок варианта, который пользователь видит в браузере, указывается или в атрибуте label, или, если его нет, непосредственно в содержимом элемента <option>.
Присвоив элементу <select> атрибут size с некоторым числовым значением, вы сделаете его не выпадающим, а обычным списком с указанным количеством видимых на экране вариантов. Если их на самом деле больше, то браузер добавит к элементу полосу прокрутки. А с помощью булева атрибута multiple="multiple" можно разрешить пользователю, зажав клавишу Ctrl или Shift, выбрать несколько вариантов одновременно. Такой список также перестанет быть выпадающим, и чтобы указать необходимое количество видимых элементов, необходимо применять атрибут multiple в паре с size.
Варианты из списка можно объединять в группы. Для этого достаточно разместить их внутри элементов <optgroup>. Заголовок каждой группы определяется ее атрибутом label.
<select>
<optgroup label="Шведские авто">
<option value="volvo">Вольво</option>
<option value="saab">Сааб</option>
</optgroup>
<optgroup label="Немецкие авто">
<option value="vw">Фольксваген</option>
<option value="audi">Ауди</option>
</optgroup>
</select>
HTML 5 предоставляет возможность объединить выпадающий список с обычным элементом ввода <input />. Такой список может содержать, например, наиболее востребованные поисковые запросы или рекомендуемые значения заполняемого поля. Формируется он элементом <datalist>, в который вложены все те же <option> c предлагаемыми в атрибутах value вариантами. Чтобы связать такой список с полем ввода, необходимо присвоить элементу <datalist> уникальный идентификатор id и указать его в значении атрибута list элемента <input />. По умолчанию <datalist> не отображается на странице, а появляется, только когда пользователь вводит данные в поле, к которому он привязан.
<input list="cars" />
<datalist id="cars">
<option value="BMW"></option>
<option value="Ford"></option>
<option value="Volvo"></option>
</datalist>