Все о формах в html - FAQ по HTML | Блог Алексея Фомичева

Форма, как средство взаимодействия с пользователем сайта

Что бы плохого не говорили о формах на страницах сайта, они остается одним из важных элементов веб-страницы с помощью которых можно обмениваться информацией. С помощью форм можно не только обмениваться с сервером данными, но и применив, простейшие скриптовые решения можно получить доступ к любому ее элементу.

Для того чтобы описать форму на странице существует тег form. Данный тег требует обязательного его закрытия. Между открывающим и закрывающим тегом form можно помещать любые html теги, что позволяет расширить применение данного тега, так как можно не только поместить текст в форму, но и изображение, тем самым придать красочность формам.

Основное правило написание форм:

На странице может быть сколько угодно форм, но они не должны быть вложены одна в другую. То есть каждая форма должна писаться отдельно.

Форма может содержать в себе следующие элементы:

  • это стандартные поля для ввода информации;
  • обязательная кнопка для отправки сообщений;
  • url ссылки (адрес перехода) на обработчик данной формы.

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

action — адрес cgi-программы, которая принимает данные формы. Это обязательный параметр тега form.

method — метод пересылки данных, содержащихся в форме, от браузера к веб-серверу. Может принимать два значения: get и post.

Если использовать метода get данные формы пересылаются в составе URL-запроса и перечисляются после символа вопроса (?).

Например, строка запроса может иметь следующий вид:

http://www.mysite.ru/cgi-bin/form.cgi?name=Aleksey&lastname=Fomichev

При использовании метода post данные передаются на веб-сервер в теле запроса. Так же важно знать, что при такой отправке размер передаваемых данных может быть достаточно большим.

Давайте на конкретных примерах рассмотрим, из чего состоит форма.

 

Текстовое поле

Текстовое поле предназначено для ввода символов с помощью клавиатуры. Существуют три элемента формы, которые используются для этой цели — однострочное текстовое поле, поле для ввода пароля и многострочное текстовое поле.

1

<input type="text" параметры>

 

В качестве параметров могут быть следующие значения:

  • size – ширина поля;
  • maxlength — максимальное количество символов разрешенных в тексте. Если этот параметр опустить, то можно вводить строку длиннее самого поля.
  • name — имя поля, которое предназначено для того, чтобы обработчик формы мог идентифицировать это поле.
1
2
3
4
5
6

<body>
<form action="/cgi-bin/obrabotchik.cgi">
   <p><b>Введите Ваше Имя!</b></p>
   <p><input type="text" maxlength="35" size="20"></p>
</form>
</body>

Если вам необходимо вывести поля, в котором в качестве символов ввода используются звездочки, необходимо ввести в параметр type=password. Данный способ позволяет создавать поля для ввода пароля. Данные этого поля передаются в открытом виде без шифрования, а значит, их можно в любой момент перехватить.

 

Многострочный текст

Поле textarea предназначено для создания области, в которой можно вводить несколько строк текста.

1
2
3

<textarea параметры>
   Текст
</textarea>

 

Параметры данного поля:

  • name — имя поля;
  • cols — количество столбцов текста;
  • rows — число строк текста;
  • wrap — Параметры переноса строк. Возможные значения: off — отключает перенос строк; virtuals — показывает переносы строк, но отправляет текст как он введен; physical — переносы строк вставляются, где указано и в таком виде текст отправляется.
1
2
3
4
5
6

<body>
<form action="/cgi-bin/obrabotchik.cgi">
   <p><b>Введите Ваш комментарий:</b></p>
   <p><textarea rows="15" cols="55"></textarea></p>
</form>
</body>

 

Кнопка

Кнопка — это элемент интерфейса, на который нужно нажимать. Создается следующим образом.

1

<input type="button" параметры>
  • name – имя поля;
  • value — Надпись на кнопке
1
2
3
4
5
6
7

<body>
<form action="/cgi-bin/obrabotchik.cgi">
   <p style="text-align:center">
      <input type="button" name="press" value="Нажми меня нежно">
   </p>
</form>
</body>

В качестве типа кнопки могут использоваться два параметра submit и reset. Первый параметр отправляет данные формы на сервер, которые обрабатываются программой, указанной параметром action тега form. При использовании параметра reset данные формы возвращаются в первоначальное значение.

 

Флажки

Флажки используются тогда, когда необходимо сделать выброриз многочисленных предложенных вариантов. Для выбора одного варианта, применяется переключатели (radiobutton).
Флажок создается следующим образом.

1

<input type="checkbox" параметры>

Параметры поля:

  • name – имя поля;
  • value — значение поля определяет, что будет отправлено на сервер при поставленной галочке.
  • checked — если этот параметр стоит, то галочка в поле будет добавлена автоматически.
1
2
3
4
5
6
7
8

<body>
<form action="/cgi-bin/obrabotchik.cgi">
   <p><b>Какая форма оплаты вам больше всего подходит?</b></p>
   <p><input type="checkbox" name="option1" value="a1" checked>Webmoney</p>
   <p><input type="checkbox" name="option2" value="a2">RBKmoney</p>
   <p><input type="checkbox" name="option3" value="a3">Почта России</p>
</form>
</body>

 

Переключатели

Переключатели используют, когда необходимо выбрать один единственный вариант из предложенных. Если требуется выбор нескольких вариантов, для этого следует предпочесть флажки (checkbox).

Переключатели создаются следующим образом.

1

<input type="radio" параметры>
  • name – имя поля;
  • value — значение поля определяет, что будет отправлено на сервер.
  • checked — устанавливает элемент, выбранный по умолчанию.

Имя поля (параметр name) для всех элементов группы должно быть одинаковым.

1
2
3
4
5
6
7

<body>
<form action="/cgi-bin/obrabotchik.cgi">
   <p><b>Есть ли у вас интернет дома?</b></p>
   <p><input type="radio" name="answer" value="a1">Да</p>
   <p><input type="radio" name="answer" value="a2">Нет</p>
</form>
</body>

 

Поле со списком

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

Преимущество списка является то, что он очень компактен. Он может занимать всего одну строку. Чтобы просмотреть весь список нужно на него нажать.

Недостатком является то, что пользователю не виден весь список. Для того чтобы его увидеть необходимо совершать действие над списком.

Поле со списком создается следующим образом.

1
2
3
4
5

<select параметры>
<option параметры> Пункт №1</option>
<option параметры> Пункт №2</option>
<option параметры> Пункт №3</option>
</select>

Параметры для поля select

  • name – имя поля;
  • size – количество видимых строк;
  • multiple — позволяет выбрать сразу несколько строк. Выбор делается с помощью клавиши Control или Shift.

Параметры для поля select

  • value — видимое поле по умолчанию.
  • selected — устанавливает элемент, выбранный по умолчанию.
1
2
3
4
5
6
7
8
9
10

<body>
<form action="/cgi-bin/obrabotchik.cgi">
   <p><b>Выберите из списка форму оплаты?</b></p>
   <p><select name="money">
   <option>Webmoney</option>
   <option>RBKmoney</option>
   <option>Почта России</option>
   </select></p>
</form>
</body>

 

Скрытое поле

Скрытое поле оправдывает сое название, прячет содержимое от пользователя. Основной целью создания скрытых полей — в передаче технической информации на сервер. В большинстве случаев это необходимо для передачи данных формы от страницы к странице.

Синтаксис создания скрытого поля.

1

<input type="hidden" name=... value=...>
  • name — имя поля;
  • value —определяет, какая информация будет отправлена на сервер.
1
2
3
4
5
6
7
8
9

<body>
<form action="/cgi-bin/obrabotchik.cgi" method="POST">
   <p><b>Выберите любое значение (данные не будут передоваться на сервер!)</b></p>
   <p><input type="text" size="35">
   <input type="hidden" name="user" value="Vasya">
   <input type="hidden" name="password" value="Pupkin"></p>
   <p><input type="submit" value="Отправить"></p>
</form>
</body>

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

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

С уважением, Алексей Фомичёв

Из жизни веб-мастеров:
Молодой человек пришел к Великому Оптимизатору.
— Великий Оптимизатор, научите меня секретам оптимизации сайтов.
Великому Оптимизатору было лень работать с новичком. Отказывать в просьбе он не стал, а
сказал:
— Да, хорошо, я научу тебя секретам оптимизации. Сейчас я не беру учеников. Приходи через месяц.
Молодой человек ушел и через месяц вернулся.
— Великий Оптимизатор, научите меня секретам оптимизации сайтов.
Великий Оптимизатор помрачнел и говорит:
— Да, я научу тебя секретам оптимизации, но для этого ты должен поработать над своим сайтом. В течение года ты каждый день должен меняться ссылками и получать по сто новых ссылок на свой сайт.
Молодой человек ушел. Через год вернулся.
— Великий Оптимизатор! Целый год я менялся ссылками и каждый день на мой сайт ставили по сто ссылок. Научите меня оптимизации сайтов.
— Да, — сказал Великий Оптимизатор. — Прежде ты должен суметь получить для главной страницы твоего сайта PR=10 и без клоакинга.
Молодой человек ушел. Но через 3 года вернулся.
— Великий Оптимизатор. 3 года я работал над сайтом и наконец-то на главной странице моего сайта PR=10.
— Нихр...а себе , — сказал Великий Оптимизатор.

 

Содержание FAQ по HTML:
Что такое HTML или история возникновения гипертекстовой разметки
Введение
Форматирование текста
Учимся делать ссылки
Работаем со списком
Изучаем таблицы
Форма, как средство взаимодействия с пользователем сайта



Поделись с друзьями в социальных сетях!




03.11.2013 / Создание блога / Теги: , / Комментарии: 2
Похожие записи
Комментарии: 2
  1. 11.11.2013 в 22:44 – Ответить

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

Оставить комментарий на Виктор Отменить ответ