Рейтинг@Mail.ru

Создание форм

Формы представляют собой наиболее важные интерактивные элементы HTML, позволяющие разработчикам страниц интерактивно взаимодействовать с посетителями. С их помощью пользователь может возвращать комментарии по поводу посещения определенного узла, пересылать запросы или регистрироваться. Разработчик задает вопросы, создавая форму, а пользователь отвечает на них заполняя её. Содержимое формы либо передаётся сценарию CGI, либо по электронной почте посылается получателю. Сам процесс создания формы состоит из двух этапов. Первый заключается в создании самой формы, а второй заключает в себе создание на сервере сценария CGI, написанного на любом языке серверного программирования. Форма создается при помощи различных тэгов и атрибутов, заключенных в пару <form></form>:

Тэг <form>.

<form> и </form> - создает форму (Web-эквивалент диалогового окна Windows). Все теги форм, размещенные между тегами lt;form> и </form> принадлежат этой форме.

Тэг <form> является необходимым условием для всех форм. Он может иметь следующие атрибуты:

method
Этот атрибут определяет способ пересылки данных сценарию CGI. Здесь способ(протокол) GET выбран по умолчанию, но в большинстве случаев разработчики пользуются протоколом POST, который позволяет передавать большие объемы данных.
Метод передачи данных определяет каким способом будут переданы данные формы по протоколу HTTP. Есть два способа передачи данных - GET и POST. Метод GET передает данные в адресной строке. Метод POST передает данные по протоколу, скрывая их; после каких либо действий данные уничтожаются. Передавать данные методом GET неудобно и небезопасно, поэтому его применяют как правило только в поисковых машинах или при отсутствии возможности использовать язык серверного программирования (При этом язык JavaScript способен считывать эти данные из адресной строки).
action
Этот атрибут определяет путь к сценарию CGI или адрес электронной почты.
enctype
Кодировка, или MIME-тип отправляемого сообщения. Если Вы отсылаете данные на обрабатывающую страницу, не меняйте этот параметр(за исключением отправки файлов), в противном случае, для отправки сообщений можно использовать text/html или text/plain.
name
Уникальное имя формы
autocomplete
Включение иди выключение автозаполнения текстовых полей. Т.к. это делает браузер, лучше назначить текстовым полям осмысленный имена.

О том, что такое MIME-типы, смотрим здесь

Синтаксис формы для сценария:

<form method="get|post" action="URL сценария">
</form>
Синтаксис формы для почты:
<form method="get|post" action="mailto:адрес">
</form>

Теги формы: <input /> и <textarea>(</textarea>).

<input /> - Основной тег формы. Может создавать различные элементы, используя обязательный атрибут type. Поддерживает много различных атрибутов.
<textarea> и </textarea> - создает форму (Web-эквивалент диалогового окна Windows). Все теги форм, размещенные между тегами lt;form> и </form> принадлежат этой форме.

Параметры тега <input />

alt
Альтернативный текст для кнопки с изображением.
autocomplete
Включение или выключение автозаполнения текста.
Предварительно активированный переключатель или флажок.
disabled
Блокирует доступ и изменение элемента.
maxlength
Максимальное количество символов разрешенных в тексте.
name
Уникальное имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать. Исключение - переключатели (input type="radio"), где всей группе переключателей присваивается одно имя.
readonly
Устанавливает, что поле не может изменяться пользователем.
size
Ширина текстового поля.
src
Адрес графического файла для поля с изображением.
type
Сообщает браузеру, к какому типу относится элемент формы.
value
Значение элемента. Для кнопок - это текст, выводимый пользователю. В текстовых полях - сам текст. В переключателях и списках используется для скриптов.

Атрибут type тега <input />:

Табл. 2. Значения параметра type
Тип Описание Вид
button Кнопка.
checkbox Флажки. Позволяют выбрать более одного варианта из предложенных. Лимонад Чай Кофе
file Поле для ввода имени файла, который пересылается на сервер.
hidden Скрытое поле. Оно никак не отображается на веб-странице. Используется в скриптах для удобства пользователя.  
text Текстовое поле. Предназначено для ввода символов с помощью клавиатуры.
password Обычное текстовое поле, но отличается от него тем, что все символы показываются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль.
radio Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных. У каждого тега должен быть атрибут name, значение которого для всех переключателей одинаково. Ваши страхи
Клаустрофобия (боязнь замкнутого пространства)
Фентофобия (боязнь насекомых)
Пантофобия (боязнь всего)
reset Кнопка для возвращение данных формы в первоначальное значение.
submit Кнопка для отправки данных формы на сервер. Атрибут name указывает то, что будет выведено на кнопке.
image Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер, как при кнопке submit.

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

А теперь удалите текст.

Еще один элемент формы создается тегом <textarea>. Это текстовое поле, состоящее из большого количества строк и столбцов. Имеет такие атрибуты:

Параметры тега <textarea>

autocomplete
Включение или выключение автозаполнения текста.
readonly
Устанавливает, что поле не может изменяться пользователем.
disabled
Блокирует доступ и изменение элемента.
maxlength
Максимальное количество символов разрешенных в тексте.
name
Уникальное имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать. Исключение - переключатели (input type="radio"), где всей группе переключателей присваивается одно имя.
cols
Количество столбцов
rows
Количество строк
value
Значение элемента, т.е. текст.
Пример - форма, отсылающая сообщение на e-mail.:
<form action="mailto:имя@домен.ru?subject="Тема сообщения"
method="post" enctype="text/plain">
<br /> Комментарии:<br />
<textarea type="text" name="комментарий" rows="5" cols="50"></textarea> <br />
Имя: <br />
<input type="text" name="имя" size="57" /> <br />
E-mail: <br />
<input type="text" name="e-mail" size="52" maxlength="360" /> <br /> <input type="reset" value="Сброс" /> <input type="submit" value="Послать" /> </form>
Пример:

Комментарии:

Имя:

E-mail:

Форму удоно выделять рамкой(<fieldset>).

Без языков серверного программирования формы нужны только для скриптов, например, для составления калькулятора:

CALCULATOR
1 2 3 +
4 5 6 -
7 8 9 *
0 /
= C

 

Наконец, раздел "Контент" подошел к концу. Следующий раздел познакомит нас с новой, нелегкой, но интересной технологией - Таблицами стилей

 

 

uroki.webservis.ru        Рейтинг@Mail.ru