Пособие по 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="Начать заново">Этот код отображает кнопку с меткой "Начать заново".