ZAQ32: На главную | К содержанию раздела

Формы.

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

Тэг <form>

Тэг <form> является базовым тэгом для создания формы. Например:

<form action=file.php>
<input type=submit value=Регистрация>
</form>

Результат представлен на рисунке ниже:

Рис. 12

Теперь подробнее. Здесь мы создали форму, при помощи открывающегося и закрывающегося тэгов <form></form>. О методе action чуть позже. <input type=submit value=Регистрация> - создает кнопку (type=submit) и определяет надпись на кнопке (value=Регистрация)

Рассмотрим атрибуты тэга <form> подробнее:

• name – имя формы. Бывает полезно, когда в одном документе несколько форм.
• action – определяет адрес, по которому будут переданы результаты формы. Здесь можно написать URL-адрес, адрес электронной почты, путь к скрипту.
• method – метод передачи информации, которая будет содержаться в заполненной форме. Может принимать два значения: GET (передает данные в открытом виде, то есть отображает их в строке URL) или POST (не отображает параметры передачи в строке URL, следовательно, этот вариант более предпочтителен).
• enctype – способ кодирования.
• target – определяет окно, проявляемое в результате обработки формы. Может принимать следующие значения: _self, _parent, _top, _blank (представляет наибольший интерес, так как открывает новое окно).

<input>

Тэг <input> - один из ключевых тэгов при работе с формами, так как он создает ее базовые объекты, к которым относятся, в том числе, кнопка и поле ввода.
Данный тэг размещается внутри тэга <form>. То есть, нужно писать так:
<form «атрибуты»>
<input «атрибуты» >
</form>

Атрибуты тэга:

• name – имя.
• value – задает значение, которое будет содержать тот или иной объект по умолчанию. Например, в выше приведенном примере кнопка содержит значение «Регистрация». Если для текстового поля написать: value=поиск, то по умолчанию, в строке ввода текста будет отображена подсказка: «поиск».
• type – один из ключевых атрибутов. Определяет тип поля, которое будет содержаться в форме.
  • text – простое поле ввода, всего одна строка текста. Например:
    <form action=file.php>
    <input type=text size=20 maxlength=25>
    </form>
    В результате будет создано простое текстовое поле длиной 20. Причем длина строки, которая вводится в текстовое поле не должно превышать 25 символов.
    
    Рис. 13
    
  • textarea – тоже текстовое поле, но оно уже может содержать несколько строк.
    
  • password – тоже текстовое поле, но когда пользователь вводит информацию, там будут одни черные кружочки. Так создаются поля для ввода пароля.
    <form action=file.php>
    Пароль: <input type=password size=10>
    </form>
    
    Рис.14
    
  • checkbox – создает флажки для выбора
    <form action=file.php>
    Сделайте выбор:<br>
    <input type=checkbox name=one value=1 checked>Первый вариант<br>
    <input type=checkbox name=two value=2>Второй вариант<br>
    <input type=checkbox name=three value=3 checked>Третий вариант<br>
    </form>
    Результат вы можете увидеть на рисунке ниже. Обратите внимание, первый и третий пункты уже выделены. Этого мы добились, дописав атрибут checked для первого и третьего вариантов.
    
    
    Рис.15
    
  • radio – переключатель. В отличии от checkbox может быть выбран только один.
    <form action=file.php>
    Сделайте выбор:<br>
    <input type=radio name=one value=1 checked>Первый вариант<br>
    <input type= radio name=two value=2>Второй вариант<br>
    </form>
    
    
    Рис. 16
    
  • submit – с данным атрибутом мы уже сталкивались. Его задача – создание простой кнопки, которая и выполнит заданное в параметре action действие.
    image – создает графическую кнопку.
    <form action=file.php>
    <input type=image name=imgbut src=imf/but.gif>
    </form>
    В результате вы получите ту же кнопку, только она будет представлять из себя картинку but.gif, которая расположена в каталоге img. Для указания месторасположения картинки используется все тот же параметр src
    
  • reset – перезагрузка формы, в результате все параметры формы будут возвращены в значение по умолчанию. То есть, форма примет тот же вид, как и в момент первого открытия браузером.
    
  • hidden – используется для передачи скрытых параметров.
    o поля этого типа не отображаются на экране монитора, что позволяет разместить "секретную" информацию в рамках формы. Содержание этого поля посылается на сервер в виде name/value вместе с остальной информацией формы. Этот тип может быть использован для передачи информации о взаимодействии клиент/сервер.
    
  • button - позволяет создать кнопку в HTML документе, что добавляет функции при использовании Visual Basic Script или Java Script. Параметр NAME позволяет задать имя данной кнопке, которое может быть использовано для какой-либо функции в скрипте. Параметр VALUE позволяет задать текст, который будет отображен на кнопке в документе.

• ACCEPT - конкретизирует тип файла. Используется только совместно с пара-метром TYPE="file". Значение задается в виде MIME.
• VALUE - задает текстовый заголовок для полей любого типа, в том числе и кнопок. Для типов, имеющих значение вида Boolean (отмеченный или неотмеченный), таких как checkbox или radio, будет возвращено значение, заданное в параметре VALUE.
• CHECKED - указывает, что поля типов checkbox и/или radio (см. выше параметр TYPE) активизированы.
• SIZE - определяет размер поля в символах. Например, чтобы определить поле с видимой шириной в 24 символа, надо указать SIZE="24".
• MAXLENGTH - определяет максимальное количество символов, которые можно ввести в текстовом поле. Оно может быть больше, чем количество символов, указанных в параметре SIZE, в этом случае поле будет прокручиваться (scroll). По умолчанию количество символов не ограничено.
• SRC - задает URL-адрес картинки, используемой при создании графической кнопки, инициирующей передачу данных. Используется совместно с параметром TYPE="image".
• ALIGN - определяет способ вертикального выравнивания для изображений. Используется совместно с параметром TYPE="image". Полностью аналогичен параметру ALIGN элемента IMG. По умолчанию имеет значение bottom.

<textarea>

Тэг <textarea> предназначен для создания многострочного текста. Например:

Листинг 14:
<form action=”script.php” method=”post”>
<textarea name="textname" cols="20" rows="20">
Здесь будет размещена текстовая информация в 20 строках и шириной = 20
</textarea>
</form>

Результат представлен на рисунке ниже:

Рис. 17

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

• NAME – имя области. Данный атрибут обязателен для заполнения.
• COLS – ширина поля ввода.
• ROWS – количество строк. Если выделенного количества строк не будет хватать, автоматически отобразиться полоса прокрутки.
• WRAP – пока с данным атрибутом мы еще не сталкивались. Он осуществляет перенос символов и может принимать несколько значений: off (нет переноса), virtual.

<select>

Тэг <select> предназначен для создания раскрывающегося списка.
А выглядит это вот так:

Листинг 15:
<form action=”script.php” method=”post”>
<select name="Варианты">
<option>первый
<option>второй
<option>третий
<option>четвертый
<option selected>пятый
</select>
</form>

В итоге мы получим список, в котором по умолчанию будет выбран пункт «пятый».

Рис. 18

Основные атрибуты тэга таковы:
• multiple – позволяет выбрать несколько значений из списка. Это может выглядеть следующим образом. Несколько модифицируем предыдущий пример:
Листинг 16:
<form action=”script.php” method=”post”>
<select name="Варианты" multiple >
<option>первый
<option>второй
<option>третий
<option>четвертый
<option selected>пятый
</select>
</form>
И результат теперь будет несколько иной:

Рис. 19

• NAME – имя меню
• SIZE – позволяет задать количество пунктов меню, которые будут видимы на форме.

С тэгом <select> неразрывно связан тэг <option>. Он позволяет проводить некоторые манипуляции с различными пунктами меню. Основные атрибуты тэга:

• selected – определяет пункт меню, который выбран по умолчанию. В листинге 17 и 18 данный атрибут уже использовался.
• value – позволяет задать для каждого из пунктов определенное значение.
  

Подводя итог, хотелось бы сказать, что формы являются практически неотъемлемой частью любого сайта, начиная от простого элемента «Поиск», который как правило состоит из простого текстового поля и кнопки, и заканчивая сложными регистрационными формами, которые целиком не умещаются на экран. HTML-код всего лишь позволяет создать такой своеобразный каркас формы, ее визуальное представление. Для передачи содержимого формы необходимо будет использовать несколько иные технологии. Но не зная, как построить простую форму, вам будет очень трудно двигаться дальше.

ZAQ32: На главную | К содержанию раздела