HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

<INPUT>:

<INPUT TYPE='search' [VALUE='<изначальное значение>'] [SIZE='<размер>'] [MAXLENGTH='<максимальное количество символов>'] [TABINDEX='<номер в порядке обхода>'] [ACCESSKEY='<быстрая клавиша>'] [DISABLED] [READONLY] [AUTOFOCUS] >

Значение 'search' атрибута тега TYPE указывает Web-обозревателю создать поле ввода значения для поиска. Остальные атрибуты нам уже знакомы по обычному полю ввода (листинг 20.3).

Листинг 20.3

<FORM ACTION='#'>

<P>Найти: <INPUT TYPE='search' ID='keyword' NAME='keyword'

SIZE='40'></P>

</FORM>

Область редактирования

Область редактирования создается парным тегом <TEXTAREA>:

<TEXTAREA [ROWS='<высота>'] [COLS='<ширина>'] [WRAP='off|soft|hard'] [TABINDEX='<номер в порядке обхода>'] [ACCESSKEY='<быстрая клавиша>'] [DISABLED] [READONLY] [AUTOFOCUS]><изначальное значение>

</TEXTAREA>

Значение, которое должно изначально присутствовать в области редактирования, помещается внутрь тега <TEXTAREA>. Это должен быть текст без всяких HTML-тегов.

Необязательный атрибут тега ROWS задает высоту области редактирования в строках. Если он не указан, высота области редактирования будет зависеть от Web- обозревателя.

Необязательный атрибут тега COLS задает ширину области редактирования в символах. Если он не указан, высота области редактирования будет зависеть от Web-обозревателя.

Необязательный атрибут тега WRAP позволяет управлять переносом строк в области редактирования. Атрибут WRAP может принимать два значения:

— 'soft' — область редактирования будет автоматически выполнять перенос слишком длинных строк. При этом в само значение, введенное в область редактирования, символы перевода строк вставляться не будут.

— 'hard' — область редактирования будет автоматически выполнять перенос слишком длинных строк. При этом в соответствующие места значения, введенного в область редактирования, будут вставлены символы перевода строк.

Если атрибут тега WRAP не указан, область редактирования будет вести себя так, словно задано значение 'soft'.

Остальные атрибуты, поддерживаемые тегом <TEXTAREA>, нам уже знакомы (листинг 20.4).

Листинг 20.4

<FORM ACTION='#'>

<P>

Введите сюда ваш отзыв о Web-сайте:<BR>

<TEXTAREA ID='opinion' NAME='opinion' COLS='60' ROWS='10'>

Отличный Web-сайт!

</TEXTAREA>

</P>

</FORM>

Кнопка

Кнопка при нажатии запускает на выполнение какое-либо действие. Она создается с помощью тега <INPUT>:

<INPUT TYPE='button' VALUE='<надпись>'

[TABINDEX='<номер в порядке обхода>'] [ACCESSKEY='<быстрая клавиша>'] [DISABLED] [AUTOFOCUS]>

Значение 'button' атрибута тега TYPE указывает Web-обозревателю создать обычную кнопку. Атрибут тега VALUE, задающий надпись для кнопки, в этом случае является обязательным. Остальные атрибуты тега нам уже знакомы (листинг 20.5).

Листинг 20.5

<FORM ACTION='#'>

<P>

Найти:

<INPUT TYPE='search' ID='keyword' NAME='keyword' SIZE='40'>

<INPUT TYPE='button' ID='find' NAME='find' VALUE='Искать!'>

</P>

</FORM>

Флажок

Флажки встречаются в Web-формах нечасто, в случаях, когда нужно дать посетителю возможность выбрать или не выбрать какую-то опцию. Для создания флажков применяется тег <INPUT>:

<INPUT TYPE='checkbox' [CHECKED]

[TABINDEX='<номер в порядке обхода>'] [ACCESSKEY='<быстрая клавиша>'] [DISABLED] [AUTOFOCUS]>

Значение 'checkbox' атрибута тега TYPE указывает Web-обозревателю создать именно флажок.

Атрибут тега без значения CHECKED позволяет сделать флажок изначально установленным. Если он присутствует, флажок будет установлен изначально, если отсутствует — сброшен.

Остальные атрибуты тега нам уже знакомы (листинг 20.6).

Листинг 20.6

<FORM ACTION='#'>

<P>

<INPUT TYPE='checkbox' ID='updates' NAME='updates' CHECKED>

Я хочу получать письма со списком обновлений Web-сайта

</P>