Азы html. Как устроены HTML формы (form). Тэги Input, Select, option, optgroup, textarea

Добрый день, дорогие читатели блога TakProstoTak.ru. За окнами чудесный зимний день, а у меня под рукой клавиатура, на которой я набиваю текст будущей статьи. Статья посвещена изучению HTML форм (form), я попытаюсь рассказать все что знаю об устройстве веб форм, как самому сделать форму. Это первая статья посвещеная html формам и для начала хочеться поговорить о том, что такое формы.

Подробно о создании html форм

Простейшая форма содержит текстовые поля для ввода информации и кнопку отправки формы, пример такой формы можно посмотреть у меня на сайте в разделе контакты.
простая html форма
чтобы создать на вашей странице подобную форму нужно добавить на страницу html между тэгами <body>...</body> следующий код формы:

<form action="obr.php" method="POST">Ваш email:

<input type="text" name="email" />

Ваше сообщение:

<textarea name="comtext" rows="5" cols="60"></textarea>
<input type="button" name="button" value="Отправить" /></form>

Тело формы заключается между тэгами <form>...</form>.  Рассмотрим основные атрибуты тэга form. Один из основных атрибутов это атрибут action - определяет скрипт обработчика формы. После нажатия  кнопки "отправить", данные формы будут переданы обработчику.  Если обработчик не указан, то данные будут переданы обработчику по умолчанию. Обработчиком по умолчанию является тот скрипт, который вывел форму, т.е. если страница с формой выводиться файлом index.php, значит он и есть обработчик формы по умолчанию. Следующий атрибут method - определяем каким методом должны передаваться данные формы. Существует два метода: GET и POST. Методом GET данные передаются в виде строки в URL страницы. После нажатия кнопки "отправить" будет свормирован GET запрос. В нашем случае запрос GET будет выглядеть так:

_http://adress_saita/obr.php?email=***&comtext=***&button=Отправить.

Все поля формы имеющие атрибут name будут переданы обработчику посредством метода GET. Обычно методом GET не принято передавать пароли, поскольку пароль будет виден в явном виде в строке запроса, а браузер к тому же поместит в кэш строку запроса с паролем, так что это не безопасно, кроме того передача большого объема данных невозможна из за того, что URL-ы становяться гиганскими,  а если учесть что URL имеет органиченную длину, то понятно что часть передаваемых данных будет потеряна. Чтобы передовать большие объемы текстов или файлы через HTML форму нужно использовать метод POST. Исходя из этого для формы входа на сайт, где используется поле с паролем нужно использовать метод POST. Метод POST осуществляет скрытую передачу данных, пользователь не видит как передаются данные обработчику. HTML Форма состоит из текстовых полей ввода, кнопок, чекбоксов, радиокнопок. Давайте попорядку рассмотрим элементы которые можно использовать на html форме.

Тэг input. Значения атрибута type тэга input html формы


Текстовое поле (type="text")

<input type="text" value="значение по умолчанию" />

Значение текстового поля помещается в атрибут Value и передается обработчику.

Поле для ввода пароля (type="password") Данные вводимые в это поле маскируются, в результате пароль который вы ввели невидно на экране

<input type="password" value="значение по умолчанию" />

Переключатель (type="radio") Как правило используется группа переключателей использующих одинаковый атрибут name. Укажите ваше любимое блюдо:

Лазанья
Прирожки с вермешелью
<table>
<tbody>
<tr>
<td>Лазанья</td>
<td><input type="radio" name="bludo" value="Лазанья" /></td>
</tr>
<tr>
<td>Прирожки с вермешелью</td>
<td><input type="radio" name="bludo" value="Прирожки с вермешелью" /></td>
</tr>
</tbody>
</table>

Обратите внимание на то, что кнопки взаимосвязаны, если выбрать одно блюдо, то второе блюдо станет неактивным, если оно было выбрано до этого. Взаимосвязь обеспечивается за счет того что у радиокнопок одинаковый атрибут name="bludo"

Примечание: для того чтобы список радиокнопок выглядел стройным, используем таблицу. Если нужно чтобы одна из радиокнопок была выбрана по умолчанию, необходимо задать ей атрибут checked="checked".

Флажок, Чекбокс (type="checkbox")
Поскольку флажки не взаимосвязаны то атрибуты name различны у разных флажков.

Что будем заказывать?

Лазанью
Прирожки с вермешелью
<table>
<tbody>
<tr>
<td>Лазанью</td>
<td><input type="checkbox" name="bludo1" value="Лазанья" checked="checked" /></td>
</tr>
<tr>
<td>Прирожки с вермешелью</td>
<td><input type="checkbox" name="bludo2" value="Прирожки с вермешелью" /></td>
</tr>
</tbody>
</table>

Примечание: Первое блюдо выбрано по умолчанию, это обеспечивается атрибутом checked="checked"

Скрытое поле (type="hidden")

<input type="hidden" value="значение" />

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

Кнопка отправки формы (type="submit")
По нажатию кнопки происходит отправка формы. Атрибут value является произвольным и используется для задания надписи на кнопке.

<input type="submit" value="значение" />

Кнопка (type="button")
просто кнопка, в отличае от submit не отправляет форму, но при помощи JavaScript можно выполнять определенные функции. Честно говоря, без яваскрипта непонятно для чего она нужна.

<input type="button" value="значение" />

Кнопка сброса формы(type="reset")
Очищает поля формы.

<input type="reset" value="сброс формы" />

Поле для загрузки файла(type="file"). Загрузка файлов при помощи формы.
При помощи данного поля можно выбрать файл с вашего компьютера и передать обработчику (загрузка на сервер).

<input type="file" name="file1" />

Кнопка с изображением(type="image")
Используется в тех случаях, когда нужно вместо стандартной кнопки использовать красивую кнопку в виде изображения. В атрибуте src задается файл изображения, атрибуты width и height определяют габариты кнопки.

<input type="image" src="images/image.jpg" />

Основные атрибуты html тэга Input

  • name - важный атрибут, определяет имя поля. Как правило значение атрибута уникально для разных полей кроме случая с radio переключателями. В php обработчике передаются все поля имеющие атрибут name. Если в тэге form указан метод GET то в PHP обработчике эти данные можно извлечь из ассоциативного массива $_GET['pole'] (name="pole"). Если используется метод POST тогда следует использовать ассоциативный массив $_POST['pole'].
  • type - определяет тип поля, возможные значения рассмотрены ранее.
  • maxlength (необязательный) - определяет максимальное количество символов которое можно ввести в текстовое поле.
  • checked (необязательный)  -  если это параметр выбран, то соответствующий элемент (radio, checkbox, option) будет выбран по умолчанию.
  • value (необязательный) - задает значение поля по умолчанию.
  • required (необязательный) - если данный атрибут указан для поля, то это поле обязательно должно быть заполнено иначе браузер не отправит форму и выдаст предупреждение.

Списки (select, option, optgroup) html форм, текстовое поле textarea.


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

<select name="list">
<option value="1">Один</option>
<option value="2" selected>Два</option>
<option value=3">Три</option>
</select>

Список с возможностью множественного выбора (атрибут multiple)
По умолчанию выбраны последние 2 пункта. Чтобы в списке можно было выбирать несколько значений, нужно в тэге select указать атрибут multiple

<select name="list" multiple>
<option value="1">Один</option>
<option value="2" selected>Два</option>
<option value=3" selected>Три</option>
</select>

Группировка элементов списка (тэг optgroup)

Чтобы группировать элементы списка для этого случит тэг optgroup. Элементы списка (option) заключенные между тэгов <optgroup label="название группы">...</optgroup> будут выделены из основного списка отступом (сгруппированы) и вся группа будет иметь название, которое указано в атрибуте label тэга optgroup.

<select name="list">
<optgroup label="Новосибирская область">
<option value="1">Новосибирск</option>
<option value="2">Бердск</option>
</optgroup>
<optgroup label="Омская область">
<option value="3">Омск</option>
</optgroup>
<optgroup label="Свердловская область">
<option value="4" selected>Екатеринбург</option>
<option value="5">Нижний Тагил</option>
</optgroup>
<optgroup label="Тюменская область">
<option value="6">Тюмень</option>
<option value="7">Тобольск</option>
</optgroup>
</select>

текстовое поле textarea.

<textarea name="text"  rows=3 cols=75>
Перенос сайта с одного хостинга на другой ничем не отличается от переноса
 сайта с домашнего компьютера на сервер хостинга, за исключением нюансов
 панели управления конкретного хостинг провайдера.
</textarea>

Атрибуты поля textarea:

  • name - как и в случае с тектовым полем Input значение атрибута name служит для приема и обработки текста на стороне сервера (обработчик).
  • value - тест, который ввели в тектовое поле помещается в этот атрибут.
  • cols - количество столбцов в тектовом поле. Чем больше значение атрибута, тем шире тектовое поле.
  • rows - атрибут определяет количество строк тектового поля textarea.

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



Похожие статьи:
↑ Наверх ↑
  • Комментарии

Прокомментировать

Подписаться, не комментируя

Видеоуроки для вебмастеров

Идеальный хостинг