Использование элемента input для ввода текста
Если вы установите для атрибута type значение text, браузер отобразит однострочное текстовое поле. Это тот же стиль для элемента input, который вы видели в предыдущей главе, и этот же стиль используется тогда, когда вы полностью опускаете атрибут type. В таблице 13-2 перечислены атрибуты, которые доступны для такого типа элементов input (эти атрибуты идут в дополнение к тем, что описаны в предыдущей главе).
Таблица 13-2: Дополнительные атрибуты, доступные для типа text| Атрибут | Описание | Новый ли в HTML5 |
dirname |
Определяет значение имени направления текста. Для подробностей смотрите раздел "Выбор направления текста" | Нет |
list |
Указывает id элемента datalist, который предоставляет значения для этого элемента. Для подробностей смотрите раздел "Использование списка данных" |
Да |
maxlength |
Задает максимальное число символов, которые пользователь может ввести в текстовое поле. Для подробностей смотрите раздел "Указание размера элемента" | Нет |
pattern |
Определяет шаблон регулярного выражения в целях проверки входных данных. Для подробностей см. главу 14 | Да |
placeholder |
Дает пользователю подсказку о том,какой вид данных вы ожидаете. Для подробностей смотрите раздел "Установка значений и использование меток-заполнителей (placeholders)" | Да |
readonly |
Этот атрибут создает текстовое поле "только для чтения"(read-only). Для подробностей смотрите раздел "Создание текстовых полей только для чтения и отключенных текстовых полей" | Нет |
required |
Указывает, что пользователь обязан ввести значение в целях проверки входных данных. Для подробностей см. главу 14 | Да |
size |
Задает ширину элемента, выраженную как число символов, которые отображаются в текстовом поле. Для подробностей смотрите раздел "Указание размера элемента" | Нет |
value |
Указывает начальное значение для текстового поля. Для подробностей смотрите раздел "Установка значений и использование меток-заполнителей (placeholders)" | Нет |
В следующих разделах я опишу атрибуты, которые доступны для данного типа text элемента input.
Совет
Для многострочных текстовых полей нужно использовать элемент
textarea, который я описываю в главе 14.
Указание размера элемента
Есть два атрибута, которые оказывают влияние на размер текстового поля. Атрибут maxlength определяет верхний предел для количества символов, которые может ввести пользователь, а атрибут size определяет, сколько символов будет отображено в текстовом поле. Для обоих атрибутов количество символов выражается целым положительным числом. В листинге 13-1 показано, как используются эти атрибуты.
Листинг 13-1: Использование атрибутовmaxlengthиsize
<!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">
<p>
<label for="name">
Name:
<input maxlength="10" id="name" name="name" />
</label>
</p>
<p>
<label for="city">
City:
<input size="10" id="city" name="city" />
</label>
</p>
<p>
<label for="fave">
Fruit:
<input size="10" maxlength="10" id="fave" name="fave" />
</label>
</p>
<button type="submit">Submit Vote</button>
</form>
</body>
</html>Для первого элемента input я применил атрибут maxlength со значением 10. Это обозначает, что браузер по своему усмотрению определяет объем пространства, которое занимает текстовое поле на экране, но пользователь может ввести только до десяти символов. Если пользователь попытается ввести больше, чем десять символов, браузер сбросит введенные данные.
Для второго элемента input я применил атрибут size также со значением 10. Это обозначает, что браузер должен убедиться, что он создает такой размер текстового поля, что там будет отображено десять символов. Атрибут size не предполагает никаких ограничений на количество символов, которые может ввести пользователь.
Я применил оба этих атрибута к третьему элементу input. В результате этого мы имеем фиксированный размер на экране и ограниченное число символов, которое может ввести пользователь. На рисунке 13-1 вы можете увидеть, как эти атрибуты влияют на отображение и ввод данных.
Рисунок 13-1: Использование атрибутовmaxlengthиsize
На рисунке 13-1 вы можете увидеть верстку и данные, которые передаются на сервер при отправке формы. Для этого примера я использовал Firefox, потому что мой любимый браузер, Chrome, не совсем корректно поддерживает атрибут size. Если вы посмотрите на данные, которые были представлены на сервере, то обратите внимание, что пункт city содержит больше символов, чем отображается на экране. Как я уже говорил, это происходит потому, что атрибут size не ограничивает количество символов, которые пользователь может ввести, только количество символов, которое браузер может отобразить.
Установка значений и использование меток-заменителей
Во всех примерах форм до сих пор текстовое поле было пустым, но это можно изменить. Вы можете использовать атрибут value, чтобы задать значение по умолчанию, и атрибут placeholder, чтобы дать пользователю подсказку о том, какие данные он может ввести. В листинге 13-2 показано, как используются эти атрибуты.
Листинг 13-2: Использование атрибутовvalueиplaceholder
<!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">
<p>
<label for="name">
Name:
<input placeholder="Your name" id="name" name="name" />
</label>
</p>
<p>
<label for="city">
City:
<input placeholder="Where you live" id="city" name="city" />
</label>
</p>
<p>
<label for="fave">
Fruit:
<input value="Apple" id="fave" name="fave" />
</label>
</p>
<button type="submit">Submit Vote</button>
</form>
</body>
</html>
Используйте атрибут placeholder, когда вам нужно, чтобы пользователь ввел данные, и вы хотите предоставить некоторый контекст, чтобы помочь пользователю решить, какие данные вводить. Используйте атрибут value, чтобы показать значение по умолчанию, либо потому что пользователь ранее уже давал эту информацию, либо потому что это часто встречающийся выбор, который может и в данной ситуации быть правильным. Вы можете увидеть, как браузер представляет значения, указанные этими атрибутами, на рисунке 13-2.
Рисунок 13-2: Подсказки и значения по умолчанию
Совет
Когда вы используете элемент
buttonдля сброса формы (как описано в главе 12), браузер восстанавливает подсказки и значения по умолчанию.
Использование списка данных
Атрибут list позволяет указать значение id элемента datalist, который используется для того, чтобы предложить пользователям варианты, когда они вводят данные в текстовое поле. В таблице 13-3 описан элемент datalist.
Таблица 13-3: Элемент datalist| Элемент | datalist |
| Тип элемента | Фразовый |
| Разрешенные родительские элементы | Любой элемент, который может содержать фразовые элементы |
| Локальные атрибуты | Нет |
| Содержание | Элементы option и фразовый контент |
| Стиль тегов | Открывающий и закрывающий теги |
| Новый в HTML5 | Да |
| Изменения в HTML5 | N/A |
| Соглашение по стилям | Нет |
Элемент datalist является новым в HTML5, и он позволяет определить набор значений, которые помогают пользователю ввести нужные вам данные. Различные типы элементов input используют datalist немного по-разному. Для типа text значения представлены в виде автозаполнения. Можно указать значения, которые вы хотите дать пользователю, при помощи элемента option, который описан в таблице 13-4.
Таблица 13-4: Элемент option| Элемент | |
| Тип элемента | N/A |
| Разрешенные родительские элементы | datalist, select, optgroup |
| Локальные атрибуты | disabled, selected, label, value |
| Содержание | Символьные данные |
| Стиль тегов | Тег пустого элемента или открывающий и закрывающий теги |
| Новый в HTML5 | Нет |
| Изменения в HTML5 | Нет |
| Соглашение по стилям | Нет |
В листинге 13-3 показано, как элементы datalist и option используются для создания набора значений для текстового поля.
Совет
Вы снова увидите элемент
option, когда мы будет рассматривать элементыselectиoptgroupв главе 14.
Листинг 13-3: Использование элемента datalist<!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">
<p>
<label for="name">
Name:
<input placeholder="Your name" id="name" name="name" />
</label>
</p>
<p>
<label for="city">
City:
<input placeholder="Where you live" id="city" name="city" />
</label>
</p>
<p>
<label for="fave">
Fruit:
<input list="fruitlist" id="fave" name="fave" />
</label>
</p>
<button type="submit">Submit Vote</button>
</form>
<datalist id="fruitlist">
<option value="Apples" label="Lovely Apples" />
<option value="Oranges">Refreshing Oranges</option>
<option value="Cherries" />
</datalist>
</body>
</html>Каждый элемент option, содержащийся внутри datalist, представляет собой значение, которое вы хотите предложить пользователю. Атрибут value определяет значение данных, которые будут использоваться в элементе input, если выбрана эта опция (option). Вы можете использовать различные метки для описания конкретного варианта выбора с помощью атрибута label или путем определения содержания в элементе option. В листинге 13-3 показано, как я сделал это для элементов option Apples и Oranges. На рисунке 13-3 вы можете увидеть, как браузер использует элементы option, определенные в datalist.
Рисунок 13-3: Использованиеdatalistдля текстового элементаinput
Будьте осторожны при использовании различных label, при работе с текстовым типом input; пользователь может не понять, почему нажав пункт под названием Lovely Apples (прекрасные яблоки), он видит в текстовом поле просто Apples (яблоки). Некоторые браузеры, такие как Opera, подходят к этому вопросу немного по-другому, если метка и значение различаются, что показано на рисунке 13-4.
Рисунок 13-4: Opera отображает отличающиеся значения и метки
Это выглядит получше (хотя отмечу, что атрибут label найден, а содержание элемента option игнорируется), но все еще может привести к путанице.
Создание текстовых полей "только для чтения" и отключенных текстовых полей
Атрибуты readonly и disabled позволяют создавать текстовые поля, которые пользователь не может редактировать. Каждый из них создает различные визуальные эффекты. В листинге 13-4 показаны оба эти атрибута.
Листинг 13-4: Использование атрибутовreadonlyиdisabled
<!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">
<p>
<label for="name">
Name:
<input value="Adam" disabled id="name" name="name" />
</label>
</p>
<p>
<label for="city">
City:
<input value="Boston" readonly id="city" name="city" />
</label>
</p>
<p>
<label for="fave">
Fruit:
<input id="fave" name="fave" />
</label>
</p>
<button type="submit">Submit Vote</button>
</form>
</body>
</html>
На рисунке 13-5 показано, как браузер работает с этими атрибутами.
Рисунок 13-5: Использование атрибутовdisabledиreadonly
У первого элемента input в листинге 13-4 есть атрибут disabled, который показывает серое текстовое поле и предотвращает пользователя от редактирования текста. У второго элемента input есть атрибут readonly, который не дает пользователю редактировать текст, но не влияет на внешний вид текстового поля. При отправке формы значения, которые были определены атрибутом value, передаются на сервер, как показано на рисунке 13-6.
Рисунок 13-6: Данные формы, полученные от элементовinputс атрибутамиdisabledиreadonly
Обратите внимание, что данные из элемента input с атрибутом disabled не передаются на сервер. Если вы хотите использовать этот атрибут, и вам нужно убедиться, что сервер получит значение элемента input, тогда вам нужно добавить тип hidden элементу input (см. раздел "Использование элемента input для создания скрытых элементов данных" далее в этой главе).
Также я советую с осторожностью использовать атрибут readonly. Хотя данные и показаны пользователю, для него нет никакого визуального сигнала, что поле не редактируется. Браузер просто игнорирует нажатия клавиш, что может привести к путанице.
Указание направления текста
Атрибут dirname позволяет указать имя значения данных, которые передаются на сервер, и содержит направление текста для данных, которые ввел пользователь. На момент написания этой книги ни один из основных браузеров не поддерживал этот атрибут.
