Текстовые поля и поля ввода паролей

Элемент input со значением type="text" (или без атрибута type) задает текстовое поле для ввода строки текста (текстового поля).

Элемент input со значением type="password" также создает элемент ввода строки текста, отличающийся от предыдущего поля только тем, что все вводимые символы представляются в виде символа "*" или "·" (в зависимости от Web-браузера).

Для текстового поля или поля ввода пароля можно задать следующие атрибуты:

· name – имя поля;

· maxlength – максимальное количество символов, разрешенных для ввода в поле (по умолчанию количество вводимых в поле символов не ограничено);

· size – ширина поля (в символах, значение по умолчанию зависит от Web-браузера);

· value – начальное значение поля (по умолчанию в поле ничего не выводится);

· readonly (без значения) – в поле нельзя вводить данные (однако текст в поле можно изменить, используя сценарии JavaScript);

· disabled (без значения) – поле отключено.

Для текстового поля или пароля можно задать стили шрифта, текста (в Opera не действует свойство text-decoration), цвета и фона, а также стили полей, границ и отступов блоковой модели документа.

Для текстового поля или поля ввода пароля в интерфейсе HTMLInputElement DOM2 HTML, помимо общих свойств элемента input, определены следующие свойства:

· name – значение атрибута name;

· maxLength – значение атрибута maxlength;

· size – значение атрибута size;

· value – текущее значение атрибута value;

· defaultValue – значение, заданное в атрибуте value элемента input;

· readOnly (false или true) – возможность или невозможность записи в поле;

· disabled (false или true) – состояние поля (активное или неактивное);

· form (только для чтения) – содержит объект HTMLFormElement формы, к которой принадлежит текстовое поле или поле ввода пароля.

Для текстового поля и поля ввода пароля определены также следующие методы:

· focus() – переводит фокус клавиатуры на поле (устанавливает курсор в начало поля);

· blur() – убирает фокус клавиатуры с поля (удаляет курсор из поля, если он там был, иначе не производит никакого действия);

· select() – выделяет введенное содержимое поля.

Пример 4.5.25. Использование текстовых полей и полей ввода пароля:

Фрагмент HTML для текстовых полей и полей ввода пароля:

<h3>1. Использование текстового поля и пароля</h3>

<table>

<tr>

<td>Введите имя: </td>

<td><input type="text" name="login"

id="login1"/></td>

</tr><tr>

<td>Введите пароль: </td>

<td><input type="password" name="pass"

id="pass1"/></td>

</tr>

</table>

<h3>2. Использование стилей в текстовом поле и пароле</h3>

<table>

<tr>

<td>Введите имя: </td>

<td><input type="text" name="login"

id="login2"

style="color: green;

background-color: yellow;

font-weight: bold; font-size: 16pt"/></td>

</tr><tr>

<td>Введите пароль: </td>

<td><input type="password" name="pass"

id="pass2"

style="color: red;

background-color: gainsboro"/></td>

</tr>

</table>

<h3>3. Использование текстового поля с максимально<br/>

допустимым количеством вводимых символов, равным 5</h3>

<p>Введите имя: <input type="text" name="login"

id="login3" maxlength="5"/></p>

<h3>4. Использование текстового поля размером 5

символов</h3>

<p>Введите отчество: <input type="text" name="login"

id="login4" size="5"/></p>

<h3>5. Использование текстового поля

с начальным текстом</h3>

<p>Введите имя: <input type="text" name="login"

id="login5" value="Иванов"/></p>

<h3>6. Использование текстового поля с начальным

текстом<br/>только для чтения</h3>

<p>Информационное поле: <input type="text" id="info"

value="Начало занятий: 10.00" readonly/></p>

<h3>7. Использование отключенного текстового поля<br/>

с начальным текстом</h3>

<p>Информационное поле:

<input type="text" id="disabledinfo"

value="Начало занятий: 10.00" disabled/></p>

</form>

Web-страница для этого фрагмента (при заполнении полей в пунктах 1-4) будет иметь следующий вид (обратите внимание, что курсор находится в конце текстового поля в пункте 4):