Тег <textarea></textarea>

Этот контейнер предназначается для задания текстового поля для редактирования. Поле имеет свои полосы прокрутки и предназначено для ввода больших объемов текста. Пример:

<textarea cols='30' rows='10' name='big_text' wrap='virtual'>Здесь большой текст</textarea>

На экране этот элемент будет выглядеть, как прямоугольная область с полосой прокрутки, шириной в 30 символов, и высотой в 10 строк. Внутри этой области набран текст «Здесь большой текст». Надеюсь, после такого описания нет необходимости подробно расписывать каждый атрибут?

Пожалуй, атрибута wrap, все-таки стоит коснуться подробнее. Он определяет поведение переносов строк в текстовой области, и может принимать три значения:

off – запрет автоматического переноса строк. При этом сохраняются переносы, определенные пользователем.

Virtual – перенос слов при отображении браузером, а серверу введенные данные передаются одной строкой.

Physical – сохраняется перенос слов как при отображении браузером, так и при передаче серверу.

Список выбора <select></select> и элемент этого списка <option></option>

Иногда бывает нужно предоставить многовариантный выбор. Иногда даже, требуется представить множество вариантов для независимого выбора. Это можно сделать группой радиокнопок или флажков, однако, гораздо красивее и экономичнее в плане трафика и места на экране, будет воспользоваться списком выбора.

Этот элемент может вести себя по-разному. Продемонстрируем все его возможности.

<select name='category'>
<option value='books'>Книги</option>
<option value='music'>Музыка</option>
<option value='soft'>Программы</option>
</select>
<select name='category' size='3'>
<option value='books'>Книги</option>
<option value='music'>Музыка</option>
<option value='soft'>Программы</option>
</select>
<select name='category' size='3' multiple='multiple'>
<option value='books'>Книги</option>
<option value='music'>Музыка</option>
<option value='soft'>Программы</option>
</select>

В данном случае, мы имеем три списка выбора. Первый представляет собой выпадающий список. Второй список не выпадающий. Он выглядит как небольшая прямоугольная область, высотой в три строки, с прокруткой. Как в первом, так и во втором списке можно выбирать один пункт. В отличие от них, в третьем списке можно выбрать несколько вариантов, если щелкать на них, удерживая Shift или Ctrl. Это достигается за счет атрибута multiple.

При отправке формы, на сервер уйдут пара «имя select'a» = «значение option'a». При множественном выборе, на сервер придут несколько пар, имеющих одинаковое имя и разные значения.

Красивости. Элементы <fieldset></fieldset> и <legend></legend>.

Если требуется разбить форму на логические элементы, для улучшения читабельности, можно воспользоваться элементами fieldset и legend (хотя, я крайне редко вижу их применение на практике и сам не использую).

Элемент fieldset позволяет выделить в прямоугольную область какую-то часть формы. Элемент legend добавляет подпись к этому прямоугольнику.

Пример:

<fieldset>
<legend>Данные о вас</legend>
<table>
<tr><td>Имя:</td><td><inpu type='text' name='name' value=''/></td></tr>
<tr><td>e-mail:</td><td><inpu type='text' name='e-mail' value=''/></td></tr>
</table>
</fieldset>

В этом простом примере мы показали, как выглядит группирующее поле и подпись к ней. Кроме того, из примера видно, что внутри формы допустима любая html-разметка. В нашем случае – таблица. Формы, оформленные с помощью таблиц, выглядят ровно и аккуратно.

Итоги

Это было не легко, но мы справились. Тема форм всегда стоит особняком в любом учебнике или пособии по html. Это не легкая и обширная тема. Но она важна для любого человека, сталкивающегося с html-версткой. Сначала может показаться, что материал довольно трудный. Потом, по мере освоения, начинает казаться, что наоборот, материал не сложный, и что составить хорошую форму – дело двух минут. На самом деле, это ложное впечатление. Есть даже целое направление в дизайне – дизайн форм. Поэтому не обольщайтесь, а практикуйтесь. Красиво составленная форма поможет пользователям вашего сайта лучше с ним взаимодействовать.

С помощью CSS можно разнообразить внешний вид форм. Но это – тема отдельной статьи. Пока, для примера, могу сказать, что сервис «Линейка» на этом блоге – не что иное, как строка ввода и кнопка submit. Однако, выглядят они не так, как выглядят обычная строка ввода и кнопка отправки формы. Это сделано при помощи CSS.

• С чего начать изучение html?
• Основы html. Общие правила. Блочные и строчные элементы.
• Основы html 2. Абзацы, списки, заголовки.
• Основы html 3. Таблицы.
• Основы html 4. Ссылки.
• Основы html 5. Формы.
• Основы html 6. Формы (продолжение).
• Основы html 7. textarea.

Если вам понравился данный мини-курс, или он вызвал вопросы или пожелания, если вы хотите поспорить о чем-то - я был бы рад вашему отзыву в комментариях или по почте.