Текстовое поле

Влад Мержевич

Обычная версия

Текстовое поле предназначено для ввода символов с помощью клавиатуры. Различают три элемента формы, которые используются для этой цели — однострочное текстовое поле, поле для ввода пароля и многострочное текстовое поле.

Текстовое поле

Создает элемент для ввода пользователем строки текста.

<input type="text" параметры>

Параметры поля перечислены в табл. 1.

Табл. 1. Параметры текстового поля
Параметр Описание
size Ширина поля.
maxlength Максимальное количество символов разрешенных в тексте. Если этот параметр опустить, то можно вводить строку длинее самого поля.
name Имя поля. Предназначено для того, чтобы обработчик формы мог идентифицировать это поле.
value Начальный текст содержащий в поле.

В примере 1 показано создание текстового поля с разными параметрами

Пример 1. Текстовое поле

Валидный HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Текстовое поле</title>
</head>
<body>

<form action="/cgi-bin/handler.cgi">
<p><b>Как ваше имя?</b></p>
<p><input type="text" maxlength="25" size="20"></p>
</form>

</body>
</html>

В результате получим следующее.

Как ваше имя?

Поле для пароля

Поле для пароля — обычное текстовое поле, но отличается тем, что все символы показываются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль.

<input type="password" параметры>

Возможные параметры совпадают с предыдущим элементом и приведены в табл. 1. В примере 2 показано создание текстового поля для ввода пароля.

Пример 2. Поле для пароля

Валидный HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Поле для пароля</title>
</head>
<body>

<form action="/cgi-bin/handler.cgi">
<p><b>Логин:</b> <input type="text" maxlength="25" size="20" name="text"></p>
<p><b>Пароль:</b> <input type="password" maxlength="15" size="20" name="pass"></p>
</form>

</body>
</html>

Результат данного примера показан ниже.

Логин:

Пароль:

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

Многострочный текст

Поле <TEXTAREA> предназначено для создания области, в которой можно вводить несколько строк текста.

<textarea параметры>
текст
</textarea>

Между тегами <textarea> и </textarea> можно поместить любой текст, который будет отображаться при загрузке поля.

Параметры поля перечислены в табл. 2.

Табл. 2. Параметры многострочного текста
Параметр Описание
name Имя поля. Предназначено для того, чтобы обработчик формы мог идентифицировать это поле.
cols Количество столбцов текста.
rows Число строк текста.
wrap Параметры переноса строк. Возможные значения:
off — отключает перенос строк;
virtuals — показывает переносы строк, но отправляет текст как он введен;
physical — переносы строк вставляются где указано и в таком виде текст отправляется.

Использование различных параметров продемонстрировано в примере 3.

Пример 3. Многострочный текст

Валидный HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Многострочный текст</title>
</head>
<body>

<form action="/cgi-bin/handler.cgi">
<p><b>Введите ваш отзыв:</b></p>
<p><textarea rows="10" cols="45"></textarea></p>
</form>

</body>
</html>

В результате получим следующее.

Введите ваш отзыв:

Copyright © Влад Мержевич
www.htmlbook.ru