Типы атрибута type

Существуют следующие типы атрибута type: button, checkbox, file, hidden, image, password, radio, reset, submit, text. С двумя из них мы уже познакомились на примере. Рассмотрим оставшиеся типы более подробно.

Тип checkbox описывает поле для галочки. При создании страницы можно задать величину этого поля с помощью свойств height и width. Если height или width больше 20 пикселей, то отступ вокруг поля для галочки устанавливается равным 4 пикселям, а внутренние ширина или высота устанавливаются 8 пикселей. Если height или width меньше 20 пикселей, но больше 13 пикселей, то отступ вокруг поля для галочки равно половине разности от указанной ширины или высоты минус 13. Например, если задана ширина width, равная 17, мы получим: (17-13)/2. Если height или width меньше 12 пикселей, то отступ вокруг поля для галочки равен 0, а внутренний размер равен тому, какой задан автором.

Тип type="file" используется для отправки серверу целого файла. При этом в ярлыке формы <form> необходимо задать адрес приложения, которому будет послан файл, и метод отправки. В нашем случае файл посылается по адресу /scripts/cpshost.dll?PUBLISH?/scripts/repost.asp с использованием метода post.

Файл form2.htm:

<html>
<head>
<title>Type="file"</title>
</head>
<body>
<FORM NAME="0Form" ACTION="/scripts/cpshost.dll?PUBLISH?/scripts/repost.asp" ENCTYPE="muitipart/form-data" METHOD="post">
<P>Имя файла для отправки серверу:<br>
<INPUT TYPE="file" NAME="0File1">
<P>После того, как файл выбран, нажмите кнопку "Отправить файл": <INPUT TYPE="submit" value="Отправить файл">
</FORM>
</body>
</html>


Имя файла для отправки серверу:

После того, как файл выбран, нажмите кнопку "Отправить файл":

На этом примере мы познакомились с новым атрибутом action. В нем указывается адрес приложения, которое будет заниматься обработкой формы, это приложение находится на сервере. Вместо адреса приложения можно указать почтовый адрес, тогда форма будет отправлена как почтовое сообщение. Метод отправки может быть либо get, либо post.

Заменим строку action новой строкой:

ACTION="mailto:name@host.com"

Имя файла для отправки серверу:

После того, как файл выбран, нажмите кнопку "Отправить файл":

Сейчас после поле нажатия кнопки "Отправить файл" появляется предупреждение о том, что форма пересылается по почте

При отправке форм сервер получает информацию в виде пар, каждая из которых представляет собой имя и соответствующее ему значение. Эти пары можно обработать на сервере. Отправку формы, т.е. набора таких пар, можно организовать по-разному. Если задать type="hidden", то отправка произойдет без предоставления каких-либо видимых элементов управления, доступных пользователю. При значении type="image", на экран пользователя будет выведен рисунок, щелчок на котором вызовет немедленную отправку формы.

Соответствующий файл form4.htm:

<html>
<head>
<title>Type="file"</title>
</head>
<body>
<FORM NAME="0Form" ACTION="mailto:name@host.com" ENCTYPE="multipart/form-data" METHOD="post">
<INPUT TYPE="image" src="images\bull.gif">
Чтобы отослать форму, щелкните мышкой на рисунке. </FORM>
</body>
</html>

Чтобы отослать форму, щелкните мышкой на рисунке.

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

<INPUT TYPE="password">.

Тип type="radio" создает радиокнопки. Радиокнопки используются для ограничения пользовательского выбора, пользователь имеет возможность выбрать лишь один вариант из нескольких. Для этого несколько кнопок объединяются в группу, все кнопки в одной группе имеют одно и то же имя name. При посылке формы именно выбранная кнопка создает пару name/value. Для отметки выбранной кнопки по умолчанию используется свойство checked, которому присваивается значение true. В качестве примера приведем файл form5.htm:

<html>
<head>
<title>Type="file"</title>
</head>
<body>
<FORM NAME="0Form" ACTION="mailto:name@host.com" ENCTYPE="multipart/form-data" METHOD="post">
<Р>Укажите, пожалуйста. Ваш возраст.</Р>
<Р>
<INPUT type=radio name="radio"> СНЕСКЕD возраст 1-10 лет
<INPUT type=radio name="radio">B03pacT 11 лет
<INPOT type=radio name="radio">B03pacT 12-120 лет
<input type="submit">
</FORM>
</body>

Укажите, пожалуйста. Ваш возраст.

возраст 1-10 лет
возpacт 11 лет
возpacт 12-120 лет

INPUT type=reset создает кнопку, которая, будучи нажата, восстанавливает значения элементов управления формы и возвращает их к своим первоначальным значениям.


<<пред. страница

Оглавление

след. страница >>


Hosted by uCoz