Использование других элементов формы
В следующих разделах я опишу пять других элементов, которые вы можете использовать в формах. Это элементы select, optgroup, textarea, output и keygen.
Создание списков с вариантами выбора
Элемент select позволяет создавать списки с вариантами, по которым пользователь может сделать выбор. Это более компактная альтернатива типу radiobutton элемента input, который вы видели в главе 13. Этот элемент идеально подходит для больших наборов вариантов выбора. В таблице 14-2 представлен элемент select.
Таблица 14-2: Элемент select| Элемент | select |
| Тип элемента | Фразовый |
| Разрешенные родительские элементы | Любой элемент, который может содержать фразовые элементы. |
| Локальные атрибуты | name, disabled, form, size, multiple, autofocus, required |
| Содержание | Элементы option и optgroup |
| Стиль тегов | Открывающий и закрывающий теги |
| Новый в HTML5 | Нет |
| Изменения в HTML5 | В HTML5 добавлены атрибуты form, autofocus и required. |
| Соглашение по стилям | Нет. Представление этого элемента зависит от платформы и браузера. |
Атрибуты name, disabled, form, autofocus и required работают так же, как и для элемента input. Атрибут size определяет, сколько вариантов выбора вы хотите показать пользователю, а когда применяется атрибут multiple, пользователь имеет возможность выбрать более одного значения.
Элемент option используется для определения вариантов, которые вы хотите предоставить пользователю. Это тот же элемент option, который применяется с элементом datalist, описанным в главе 12. В листинге 14-1 показано, как используются элементы select и option.
Листинг 14-1: Использование элементовselectиoption
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple example" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<form method="post" action="http://titan:8080/form">
<input type="hidden" name="recordID" value="1234" />
<p>
<label for="name">
Name:
<input value="Adam" id="name" name="name" />
</label>
</p>
<p>
<label for="password">
Password:
<input type="password" placeholder="Min 6 characters"
id="password" name="password" />
</label>
</p>
<p>
<label for="fave">
Favorite Fruit:
<select id="fave" name="fave">
<option value="apples" selected label="Apples">Apples</option>
<option value="oranges" label="Oranges">Oranges</option>
<option value="cherries" label="Cherries">Cherries</option>
<option value="pears" label="Pears">Pears</option>
</select>
</label>
</p>
<input type="submit" value="Submit" />
</form>
</body>
</html>
В листинге 14-1 я использовал элемент select и определил элемент option, чтобы представить варианты выбора, которые я хочу предложить пользователю. Я применил атрибут selected к первому элементу option, так что он выбирается автоматически, когда отображается страница. Вы можете увидеть первоначальный вид элемента select и то, как браузер отображает элементы option, на рисунке 14-1.
Рисунок 14-1: Использование элемента select для представления пользователю вариантов выбора
Вы можете использовать атрибут size элемента select, чтобы показать пользователю более одного варианта, и атрибут multiple, чтобы позволить пользователю выбрать более одного варианта, как показано в листинге 14-2.
Листинг 14-2: Использование атрибутовsizeиmultipleэлементаselect
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple example" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<form method="post" action="http://titan:8080/form">
<input type="hidden" name="recordID" value="1234" />
<p>
<label for="name">
Name:
<input value="Adam" id="name" name="name" />
</label>
</p>
<p>
<label for="password">
Password:
<input type="password" placeholder="Min 6 characters"
id="password" name="password" />
</label>
</p>
<p>
<label for="fave" style="vertical-align: top">
Favorite Fruit:
<select id="fave" name="fave" size="5" multiple>
<option value="apples" selected label="Apples">Apples</option>
<option value="oranges" label="Oranges">Oranges</option>
<option value="cherries" label="Cherries">Cherries</option>
<option value="pears" label="Pears">Pears</option>
</select>
</label>
</p>
<input type="submit" value="Submit" />
</form>
</body>
</html>
В листинге 14-2 я применил атрибуты size и multiple, результат чего вы можете увидеть на рисунке 14-2. Можно выбрать несколько вариантов, нажав на кнопку Ctrl при выборке. Я также применил внутренний стиль (как описано в главе 4), чтобы изменить вертикальное выравнивание так, чтобы элемент label был совмещен с верхней частью элемента select (по умолчанию он размещен внизу, что выглядит немного странно).
Рисунок 14-2: Использование элемента select для отображения и выбора нескольких вариантов
Придание структуры элементу select
Элементу select можно придать некоторую структуру, если использовать элемент optgroup. В таблице 14-3 описан этот элемент.
Таблица 14-3: Элемент optgroup| Элемент | optgroup |
| Тип элемента | N/A |
| Разрешенные родительские элементы | Элемент select |
| Локальные атрибуты | label, disabled |
| Содержание | Элементы option |
| Стиль тегов | Открывающий и закрывающий теги |
| Новый в HTML5 | Нет |
| Изменения в HTML5 | Нет |
| Соглашение по стилям | Нет |
Элемент optgroup используется для объединения элементов option. Атрибут label позволяет создавать название для сгруппированных элементов option, а атрибут disabled позволяет запретить пользователю выбрать любого из элементов option, которые содержатся в optgroup. В листинге 14-3 показано, как используется элемент optgroup.
Листинг 14-3: Использование элемента optgroup<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple example" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<form method="post" action="http://titan:8080/form">
<input type="hidden" name="recordID" value="1234" />
<p>
<label for="name">
Name:
<input value="Adam" id="name" name="name" />
</label>
</p>
<p>
<label for="password">
Password:
<input type="password" placeholder="Min 6 characters"
id="password" name="password" />
</label>
</p>
<p>
<label for="fave" style="vertical-align: top">
Favorite Fruit:
<select id="fave" name="fave">
<optgroup label="Top Choices">
<option value="apples" label="Apples">Apples</option>
<option value="oranges" label="Oranges">Oranges</option>
</optgroup>
<optgroup label="Others">
<option value="cherries" label="Cherries">Cherries</option>
<option value="pears" label="Pears">Pears</option>
</optgroup>
</select>
</label>
</p>
<input type="submit" value="Submit" />
</form>
</body>
</html>
Вы можете увидеть, как элемент optgroup придает структуру списку элементов option, на рисунке 14-3. Метки optgroup предназначены исключительно для структуры, пользователь не может выбрать их в качестве значения.
Рисунок 14-3: Использование элемента optgroup
Получение нескольких строк текста
Элемент textarea создает многострочное текстовое поле, в которое пользователь может ввести более одной строки текста. В таблице 14-4 описан элемент textarea.
Таблица 14-4: Элемент textarea| Элемент | textarea |
| Тип элемента | Фразовый |
| Разрешенные родительские элементы | Любой элемент, который может содержать фразовые элементы, но обычно это form |
| Локальные атрибуты | name, disabled, form, readonly, maxlength, autofocus, required, placeholder, dirname, rows, wrap, cols |
| Содержание | Текст, который представляет контент элемента |
| Стиль тегов | Открывающий и закрывающий теги |
| Новый в HTML5 | Нет |
| Изменения в HTML5 | В HTML5 появились атрибуты form, autofocus, required, placeholder и wrap |
| Соглашение по стилям | Нет |
Атрибуты rows и cols указывают размеры текстового поля, также мы можем установить атрибут wrap на hard или soft, чтобы управлять тем, как будут добавляться в текст, введенный пользователем, разрывы строк. Другие атрибуты работают так же, как и соответствующие атрибуты элемента input, описанного в главах 12 и 13. В листинге 14-4 показано, как используется элемент textarea.
Листинг 14-4: Использование элемента textarea<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple example" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<form method="post" action="http://titan:8080/form">
<input type="hidden" name="recordID" value="1234" />
<p>
<label for="name">
Name:
<input value="Adam" id="name" name="name" />
</label>
</p>
<p>
<label for="password">
Password:
<input type="password" placeholder="Min 6 characters"
id="password" name="password" />
</label>
</p>
<p>
<label for="fave" style="vertical-align: top">
Favorite Fruit:
<select id="fave" name="fave">
<optgroup label="Top Choices">
<option value="apples" label="Apples">Apples</option>
<option value="oranges" label="Oranges">Oranges</option>
</optgroup>
<optgroup label="Others">
<option value="cherries" label="Cherries">Cherries</option>
<option value="pears" label="Pears">Pears</option>
</optgroup>
</select>
</label>
</p>
<p>
<textarea cols="20" rows="5" wrap="hard" id="story"
name="story">Tell us why this is your favorite fruit</textarea>
</p>
<input type="submit" value="Submit" />
</form>
</body>
</html>
В листинге 14-4 я добавил текстовое поле шириной в 20 столбцов и высотой в 5 строк. На рисунке 14-4 показано, как браузер его отображает.
Рисунок 14-4: Использование элемента textarea
Атрибут wrap определяет, как в текст будут вставлены разрывы строк при отправке формы. Если вы установите атрибут wrap на hard, то в контент будут вставлены разрывы строк таким образом, что ни в одной строке в отправленном тексте не будет больше символов, чем значение атрибута cols.
Обозначение результата вычисления
Элемент output представляет результат вычисления. В таблице 14-5 представлен этот элемент.
Таблица 14-5: Элемент output| Элемент | output |
| Тип элемента | Фразовый |
| Разрешенные родительские элементы | Любой элемент, который может содержать фразовые элементы |
| Локальные атрибуты | name, form, for |
| Содержание | Фразовый контент |
| Стиль тегов | Открывающий и закрывающий теги |
| Новый в HTML5 | Да |
| Изменения в HTML5 | N/A |
| Соглашение по стилям | output { display: inline; } |
В листинге 14-5 показано, как используется элемент output.
Листинг 14-5: Использование элемента output<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple example" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<form onsubmit="return false"
oninput="res.value = quant.valueAsNumber * price.valueAsNumber">
<fieldset>
<legend>Price Calculator</legend>
<input type="number" placeholder="Quantity" id="quant" name="quant" />
x
<input type="number" placeholder="Price" id="price" name="price" />
=
<output for="quant name" name="res" />
</fieldset>
</form>
</body>
</html>
В листинге 14-5 я использовал систему событий JavaScript для создания простого калькулятора (вы можете узнать больше о событиях в главе 30). Здесь есть два элемента input типа number. После того как пользователь введет данные, значения элементов input будут умножены, а результат отображен в элементе output. На рисунке 14-5 показано, как это выглядит в браузере.
Рисунок 14-5: Использование элемента output
Создание пары ключей открытый/закрытый (public/private)
Вы можете использовать элемент keygen для генерации пары ключей открытый/закрытый. Это важная функция шифрования с открытым ключом (криптосистемы с открытым ключом), которое является очень значимой составляющей безопасности веб приложений, в том числе клиентских сертификатов и SSL. При отправке формы создается новая пара ключей. Открытый ключ передается на сервер, а закрытый ключ сохраняется в браузере и добавляется в хранилище ключей пользователя. В таблице 14-6 представлен элемент keygen.
Таблица 14-6: Элемент keygen| Элемент | keygen |
| Тип элемента | Фразовый |
| Разрешенные родительские элементы | Любой элемент, который может содержать фразовые элементы |
| Локальные атрибуты | challenge, keytype, autofocus, name, disabled, form |
| Содержание | Нет |
| Стиль тегов | Тег пустого элемента |
| Новый в HTML5 | Да |
| Изменения в HTML5 | N/A |
| Соглашение по стилям | Нет |
Атрибуты name, disabled, form и autofocus работают так же, как и для элемента input, что описано в главе 12. Атрибут keytype определяет алгоритм, который будет использоваться для создания пары ключей, но поддерживаемым значением является только RSA. Значение атрибута challenge отправляется на сервер вместе с открытым ключом.
Браузерная поддержка для этого элемента является неоднородной, и те браузеры, которые все же его поддерживают, по-разному представляют этот элемент пользователям. Я советую избегать использования данного элемента, пока поддержка не улучшится.
