Пособие по HTML-формам: Еще больше элементов ввода

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

Формы заказа HTML содержат поле для ввода пароля. Вы можете создать его с помощью значения ‘password’.

Поле для ввода пароля создается с помощью следующего кода:

<input type="password" name="pwd" />

Другие атрибуты:

maxlength=”maxChar”

максимальная длина пароля (в символах).

value=”textValue”

Значение по умолчанию, которое отображается в поле для ввода пароля.

«Скрытые» элементы ввода

«Скрытые» элементы ввода не показываются пользователю. Вместо этого вы сами задаете эти поля. Как правило, скрытые поля содержат информацию о конфигурации для скрипта, который обрабатывает данные формы HTML на стороне сервера.

Пример:

<input type="hidden" name="admin-email" value="me@myserver.com" />

Ввод изображений

Можно использовать собственные изображения вместо стандартной кнопки формы.

Когда пользователь нажимает на изображение, данные формы отправляются.

Используйте следующий код для создания пользовательского элемента управления на основе загруженного изображения.

<input type="image" name='signup' src="images/signup.gif" />

src=”image_url”

URL-адрес файла изображения для загрузки. Вы можете указать относительный путь.

Name

Определяет изображение, которое было нажато. Координаты местоположения области, в которой пользователь нажимает изображение, передаются следующим образом: image_name.x=x-coordinate и image_name.y=y-coordinate.

Загрузка файлов

Вы наверняка видели страницы, на которых пользователи могут выбирать файл для загрузки. Этот элемент реализует форму поиска HTML.

Для данного элемента ввода существует следующий синтаксис.

<input type="file" name="name" />

name=”name”

Имя, используемое для идентификации элемента в скрипте на стороне сервера.

Большинство браузеров создают для этого элемента поле с кнопкой «Обзор...».

При создании формы с поддержкой загрузки файлов не забудьте добавить в тег <form> атрибут enctype со значением “multipart/form-data”.

Пример:

<form enctype="multipart/form-data" method="post">

<p>
   Photo: <input type="file" name='photo' />
</p>
<input type="submit" value="submit" />
</form>

Многофункциональная кнопка

С помощью значения «button» в форме отображается многофункциональная кнопка. Чтобы установить для кнопки значение, добавьте код JavaScript для обработки события, возникающего при нажатии на кнопку.

Рассмотрим работу кнопки формы HTML на примере:

<input type="button" onclick="javascript:alert('Кнопка нажата');" value="Нажмите!">

Этот код отображает кнопку с меткой «Нажмите!«. При нажатии на кнопку, появляется окно с сообщением «Кнопка нажата«.

Кнопка сброса

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

Приведенный ниже код создает кнопку сброса:

<input type="reset" value="Начать заново">

Этот код отображает кнопку с меткой «Начать заново«.

Перевод статьи «HTML Form Tutorial Part III: Still More Input Elements» был подготовлен дружной командой проекта Сайтостроение от А до Я.