Главная страница   /   14.1. Использование других элементов формы (Руководство по HTML5

Руководство по HTML5

Руководство по HTML5

Адам Фриман

14.1. Использование других элементов формы

В следующих разделах я опишу пять других элементов, которые вы можете использовать в формах. Это элементы 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 отправляется на сервер вместе с открытым ключом.

Браузерная поддержка для этого элемента является неоднородной, и те браузеры, которые все же его поддерживают, по-разному представляют этот элемент пользователям. Я советую избегать использования данного элемента, пока поддержка не улучшится.