|
Two Pilots - учебные странички
Уроки HTML
8. Формы.
Создание форм
В языке HTML формы применяются для отправки данных со странички на обработку в какую-либо программу, установленную на сервере.
Всем известный пример формы можно видеть здесь http://www.colorpilot.ru/support.html.
Пользователь заполняет форму и нажимает кнопку Send (отправить), данные обрабатываеются специальной программой (скриптом) на сервере, и мы получаем на адрес техподдержки вопросы пользователей :-)
Создание форм начинается с элемента
<form>
</form>
У элемента формы form существуют два обязательных атрибута metod и action.
metod - атрибут определяет способ, с помощью которого будет осуществляться связь между формой и Web сервером. Атрибут может принимать значение "get" и "post".
action - значением атрибута action является конкретный адрес скрипта, обрабатывающего данные.
Атрибуты записываются в тег <form> , например так:
<form method= "get" action= "http://www.myserver.com/cgi-bin/mailscript">
В данном уроке рассматривается только создание элементов форм, их виды. Для того, чтобы форма заработала, ее необходимо запрограммировать. Само программирование не входит в рамки данного урока.
Текстовое поле
Для создания поля ввода используют элемент input с атрибутом type.
Type может принимать различные значения. Для самого простого поля ввода текста атрибут type будет иметь значение text.
<input type=text параметры>
Нпример, html код
<form method= "get" action="/cgi-bin/handler.cgi">
<b>Зaполните Ваши данные:</b>
Имя: <input type=text maxlength=25 size=20>
Фамилия:<input type=text maxlength=25 size=20>
</form>
на страничке отобразится так:
Возможно задавать значения параметров
| Параметр |
Описание |
| size=... |
Ширина поля. |
| maxlength=... |
Максимальное количество символов разрешенных в тексте. Если этот параметр опустить, то можно вводить строку длинее самого поля. |
| name=... |
Имя поля. Предназначено для того, чтобы обработчик формы мог идентифицировать это поле. |
| value=... |
Начальный текст содержащий в поле. |
| align=... |
Выравнивание поля. Возможные значения: top, middle, bottom, right, left, texttop, baseline, absmiddle, absbottom. Результат их использования точно такой же, как и у изображений. |
Поле для пароля
Поле для пароля — обычное текстовое поле, но отличается тем, что все символы показываются звездочками, чтобы никто не подглядел вводимый пароль.
Задается кодом
<input type=password параметры>
Например:
<form method= "get" action="/cgi-bin/handler.cgi">
<b>Логин: </b><input type=text maxlength=25 size=20 name="text">
<b>Пароль:</b> <input type=password maxlength=15 size=20 name="pass">
</form>
На страничке будет выглядеть так:
Попробуйте ввести в поля "Логин" и "Пароль" данные. Получилось ? :-)
Многострочный текст
Для возможности введения в поле несколько строк текста используем тег textarea.
Например:
<form method= "get" action="/cgi-bin/handler.cgi">
<b>Введите ваш отзыв: </b>
<textarea rows=10 cols=45></textarea>
</form>
Этот код на страничке можно увидеть в виде поля, в которое можно ввести большой текст.
Для тега textarea используются следующие параметры:
| Параметр |
Описание |
| name=... |
Имя поля. Предназначено для того, чтобы обработчик формы мог идентифицировать это поле.
|
| cols=... |
Количество столбцов текста. |
| rows=... |
Число строк текста. |
| value=... |
Значение поля определяет, что будет отправлено на сервер. |
| wrap=... |
Параметры переноса строк. Возможные значения:
off — отключает перенос строк;
virtuals — показывает переносы строк, но отправляет текст как он введен;
physical — переносы строк вставляются где указано и в таком виде текст отправляется. |
Кнопки
Кнопка — это элемент интерфейса, на который нужно нажимать.
Используем type=button, "button" переводится как "кнопка".
<input type=button параметры>
Код html
<form method= "get" action="/cgi-bin/handler.cgi">
<p align=center><input type=button name=press value=" Нажми меня :-)">
</form>
На страничке отобразится следующим образом:
Для кнопок используются следующие параметры:
| Параметр |
Описание |
| name=... |
Имя поля. Предназначено для того, чтобы обработчик формы мог идентифицировать это поле. |
| value=... |
Надпись на кнопке, а также ее значение. |
| align=... |
Выравнивание поля. Возможные значения: top, middle, bottom, right, left, texttop, baseline, absmiddle, absbottom. Результат их использования точно такой же, как и у изображений. |
Кнопка SUBMIT
При нажатии на кнопку SUBMIT данные формы отправляются на сервер и обрабатываются программой, указанной параметром action тега form.
Используем type=submit
Например,
<tr><td>
<form action="/cgi-bin/handler.cgi">
<p><input type=submit value="Отправить данные">
На страничке мы увидим следующее:
Кнопка RESET
При нажатии на эту кнопку, данные формы возвращаются в первоначальное значение.
Используем type=reset
Пример кода
<form action="/cgi-bin/handler.cgi">
<input type=text width=20> <input type=reset value="Сбросить данные">
</form>
Отображение на страничке
Попробуйте вписать данные и сбросить их!
Флажки (checkbox)
Флажки используют, когда необходимо выбрать два или более варианта из предложенных.
Используем type=checkbox
<form action="/cgi-bin/handler.cgi">
<b>С какими операционными системамы вы знакомы?</b>
<input type=checkbox name=option1 value=a1 checked>Windows 95/98
<input type=checkbox name=option2 value=a2>Windows 2000
<input type=checkbox name=option3 value=a3>Linux
</form>
Вот что получается:
Вы можете поставить или снять галочки у одного или сразу нескольких элементов.
Значение поля value= определяет, что будет отправлено на сервер при поставленной галочке. Остальные параметры аналогичны параметрам кнопок.
Переключатели (radiobutton)
Переключатели используют, когда необходимо выбрать один единственный вариант из предложенных.
Используем type=radio
<form action="/cgi-bin/handler.cgi">
<b>Какое время года Вы больше любите? :-)</b>
<input type=radio name=answer value=a1>Весну
<input type=radio name=answer value=a2>Лето
<input type=radio name=answer value=a3>Осень
<input type=radio name=answer value=a4>Зиму
</form>
На страничке можно будет увидеть следующее:
То есть, используя радиокнопки Вы можете выбрать только ОДНО значение. Попробуйте :-)
Поле со списком
В ниспадающем списке можно выбирать одно или несколько значений. Сделаем выбор времени года с помощью ниспадающего списка.
Поля выбора начинаются тегом <select> и заканчиваются </select> Каждое выбираемое поле заключено в теги <option> и </option >
Пример:
<form action="/cgi-bin/handler.cgi">
<b>Какое время года Вы больше любите? :-)</b>
<p align=center>
<select name= время года>
<option>Весну</option>
<option>Лето</option>
<option>Осень</option>
<option>Зиму</option>
</select>
</form>
На страничке видем следующее:
Для списков используются следующие параметры:
| Параметр select |
Описание |
| name=... |
Имя поля. Предназначено для того, чтобы обработчик формы мог идентифицировать это поле. |
| size=... |
Количество видимых строк. По умолчанию одна строка. |
| multiple |
Этот параметр позволяет выбрать сразу несколько строк. Выбор делается с помощью клавиши Control или Shift. |
| Параметр option |
Описание |
| selected |
Видимое поле по умолчанию. |
| value=... |
Значение определяет, что будет отправлено на сервер при выбранном пункте списка. |
Кнопка с изображением
Кнопки с изображениями аналогичны по действию кнопке Submit, но представляют собой рисунок.
Используем type=image
<form action="/cgi-bin/handler.cgi">
<table align=center>
<tr><td colspan=2>Введите ваше имя:
<tr>
<td><input type=text width=25></td>
<td><input type=image src=../school/examples3/ser.gif width=90 height=68 border=0></td>
</tr>
</table>
</form>
На страничке это будет выглядеть так:
Картанка задается при помощи тега scr и адреса картинки.
src=../school/examples3/ser.gif
Таким образом, комбинируя разные способы создания форм, мы можем на одной странике разместить несколько форм сразу. Для отдедения одного вида формы от другого будем использовать тег <fieldset>
Пример комбинированной формы
Пример использования разных форм на одной страничке
Заполните, пожалуйста, эту форму Вашими данными и нажмите кнопку "Отправить данные"!
Вы сможете увидеть вариант обработки Ваших данных.
Эта форма имеет следующий код:
<form method="post" action="8.php">
<fieldset>
<b>Зaполните Ваши данные:</b><br><br>
Имя: <input type=text name="name" maxlength=25 size=20 value=" ">
<br><br>
</fieldset>
<p>
<fieldset>
<b>Выберите любимый цвет:</b><br>
<p align=center>
<input type=radio name=answer value="#F4F090">Желтый<br>
<input type=radio name=answer value="#80ECF3">Голубой<br>
<input type=radio name=answer value="#F3ACC5">Розовый<br>
<input type=radio name=answer value="#A7F4AB">Зеленый<br>
</select>
<br><br>
</fieldset>
<p>
<fieldset>
<b>Напишите здесь что-нибудь хорошее :-)</b><br>
<textarea name="basictext" rows=7 cols=45 ></textarea>
</fieldset>
<p>
<fieldset>
<input type=reset value="Сбросить данные">
<input type="submit" value="Отправить данные">
</fieldset>
</form>
Упражнение
Cоздайте на свой вкус html-документ, на котором расположите все рассмотренные виды форм. Это может быть страничка опроса, отправки каких-либо данных или что-то еще... Программировать ничего не надо! :-)
Выложите получившийся файл в личный каталог, составьте линк (посмотреть как) и откройте Вашу страничку в браузере.
Пришлите, пожалуйста, линк на Вашу страничку на адрес группы HTML Pilot в качестве отчета о выполнении данного упражнения. Посмотреть, как подписаться...
06/04/2007, К. Жданова
- Главная страничка "Уроки HTML" -
Главная страничка ::
Машинопись ::
Mozilla Firefox ::
Mozilla Thunderbird ::
Total Commander ::
Local server ::
ConTEXT ::
Уроки HTML ::
Справочный сайт (! только для пилотов) ::
Отзыв
|