HTML-формы

Все, что вы используете для написания логина, паролей, выбора города из выпадающего списка и т.д. это формы. Это формы, которые занимаются передачей определенной (текстовой и не только) информацией на сервер. Например, на сервере есть cgi-сценарий, который получает информацию из полей и записывает их в базу данных (по сути, обычная регистрация пользователя).

Все эти формы и элементы для передачи информации разделяются на три категории (обратите внимание, что кроме первого следующие два тега имеют закрывающие парные теги):

  • <input…>
  • <textarea…>…</textarea>
  • <select…><option>…</option></select>

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

Создадим форму, что бы понять, как это работает:

<form action=/cgi-bin/myscript.cgi>
 <input type=submit value="Вперед!">
 </form>

Формально, созданная нами кнопка Вперед! является полем ввода, но она не будет передавать сценарию никакой информации, так как отсутствует атрибут name. Но если немного видоизменить вторую строку и добавить атрибут name:

<input type=submit name="submit" value="Вперед!">

То сценарий уже получит информацию submit=Вперед! (как было написано выше name=value). Это помогает определить, как именно было выполнено действие, при помощи ввода URL или нажатия кнопки. Например, при нажатии кнопки Enter вместо кнопки Вперед!, сценарий не получит информации от кнопки, но об этом чуть позже.

Поля ввода тега <input>

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

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

Стандартное текстовое поле, которые мы часто может встречать на различных сайтах, которые имеют, например форму регистрации. Это те поля, куда мы вводим различные текстовые данные как e-mail, имя и т.д. Давайте создадим такую форму:

<input type=text name=test value=Hello size=15 maxlength=15>

Атрибуты name и value вам знакомы (имя и значение, под значением понимается та информация, которая содержится в поле). Атрибут size означает длину текстового поля, обычно она (задаваемая веб-мастером длина поля) либо соответствует максимальной длине вмещаемых знаков, либо чуть больше. В общем, это больше по части дизайна. Если вы изначально хотите, выводите информацию, в поле состоящую из нескольких слов, то вам необходимо добавить это предложение в кавычки. Вот как это выглядит:

<input type=text name=test value=”Это текст в текстовом поле” >

Поле ввода password

<input type=password name=pswd>

Полностью аналогичен предыдущему полю. Единственное отличие заключается в том, что при вводе в это поле символов, они не будут отображаться, вместо вводимых символов вы увидите точки или звездочки. На самом деле такую простую защиту пароля, если ее вообще можно назвать защитой, может обойти любой первоклассник. Достаточно в исходном коде страницы поменять тип поля с password на text и введенные символы отобразятся.

Скрытое поле ввода hidden

Этот элемент в частности используется для хранения и передачи той информации серверу, которую необязательно видеть пользователю. Такое поле на веб-странице используется, чтобы хранить какие либо параметры. Например, у нас есть форма, которая отправляет письмо. Соответственно мы можем зафиксировать e-mail адрес получателя, но скрыть от глаз пользователя. Конечно, это далеко не самое элегантное решение, но это лишь пример использование такого поля:

<form action=/cgi-bin/my.cgi>
<input type=hidden name=email value="admin@google.com">

<h5>Введите заголовок</h5>

<input type=text name=title>
... еще поля ...
</form>

Стоит отметить, что если мы будем использовать вместо поля hidden поле text, сценарий получит все равно одинаковые данные. Поэтому неважно, что вы используете скрытое поле, ее передаваемая информация ничем не отличается от передаваемой информации полем text.

Перейти ко второй части статьи (ссылка появится скоро)

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