Пятница, 08 Февраля 2013 16:21

Элемент form, HTML форма

Written by 
Оцени эту запись
(3 Голоса)

Элемент <form> используется для создания формы на HTML странице. Формы предназначены для ввода данных пользователем. Примеры использования - формы регистрации и авторизации, форма поиска, калькулятор.

 

 

Определение HTML формы

 

При помощи тега <form> на HTML странице можно собрать данные пользователя и отправить их на сервер для обработки.

 

 

Пример простой формы:

Элемент form, HTML форма

 

 

<form action="/" method="get">

<p>Имя: <input type="text" name="first_name"></p>

<p>Фамилия: <input type="text" name="last_name"></p>

<p><input type="submit" value="Отправить"></p>

</form>

 

Элемент <form> поддерживается всеми основными браузерами.

 

Элемент <form> должен иметь открывающий и закрывающий теги.

 

Тег <form> является блочным элементом.

 

Элементы управления

 

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

 

В элементе <form> могут присутствовать такие элементы управления:

 

 

Элемент input может принимать разные облики в зависимости от значения его атрибута type. Основные типы элемента input:

 

<input type="text">

- для ввода текста

<input type="checkbox">

- выбор нескольких значений из списка

<input type="radio">

- выбор одного значения из списка

<input type submit>

- для отправки формы

 

Также элемент input может принимать и другой вид:

 

 

<input type="number">

- для ввода чисел

<input type="file">

- для загрузки файлов

<input type="date">

- для указания даты

 

Элемент textarea служит для ввода многострочного текста, такого как описание, комментарий или вопрос.

 

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

 

Элемент select служит для выбора одного или нескольких пунктов из списка. Пример:

 

 

<select>
<option>Пункт 1</option>
<option>Пункт 2</option>
<option>Пункт 3</option>
<option>Пункт 4</option>
<option>Пункт 5</option>
<option>Пункт 6</option>
</select>

 

 

 

 

 

Элементы option и optgroup являются частью элемента select. Элемент option задает пункт списка, а optgroup - группу пунктов. Пример:

 

 

<select>
<optgroup label="Группа 1">
<option>Пункт 1</option>
<option>Пункт 2</option>
<option>Пункт 3</option>
<option>Пункт 4</option>
</optgroup>
<optgroup label="Группа 2">
<option>Пункт 5</option>
<option>Пункт 6</option>
</optgroup>
</select>

 

 

 

 

 

Элемент fieldset служит для объединения/группировки элементов управления.

 

Элемент label используется в роли подписи для элементов input с типами checkbox и radio. Причем можно выделить(убрать выделение) элемент input, кликнув по элементу label. Элементы связываются между собой при помощи атрибутов id элемента input и for для label.

 

Атрибуты элемента form

 

В HTML5 элементу form были добавлены атрибуты autocomplete и novalidate, а также был удален атрибут accept. В XHTML не желательно указывать элементам атрибут name, лучше использовать идентификатор.

 

А теперь пройдемся подробнее по атрибутам элемента form:

 

accept - определяет типы файлов, которые может принимать сервер при загрузке(не поддерживается в HTML5)

 

accept-charset - определяет кодировку, которая будет использоваться при обработке данных

 

action - задает путь к файлу или программе, куда должны быть отправлены данные для обработки при отправке формы

 

autocomplete(новый в HTML5) - включает/выключает автозаполнение полей формы, принимает значения on или off.

 

enctype - способ кодировки данных формы, используется только при методе post. Может принимать значения application/x-www-form-undercoded, multipart/form-data, text/plain.

 

method - может принимать значения get или post. Определяет способ отправки данных на сервер. При использовании метода get данные передаются в адресной строке. Этот способ достаточно удобный, но количество данных для передачи ограничено. При использовании метода post можно передавать на сервер большее объемы данных.

 

name - указывает имя формы

 

novalidate(новый в HTML5) - указывает на то, что форма не должна быть проверена на валидность данных при отправке. Значение атрибута  - novalidate.

 

target - указывает где будет отображаться ответ после отправки формы. Принимает значения _blank(в новом окне), _self(в том же окне), _parent(в родительском фрейме), _top(в текущем окне, обойдя все фреймы).

 

 

 

 

 

 

Additional Info

Еще в этой категории: « Тег div Элемент textarea »

Комментарии  

 
0 #1 Женя 01.03.2014 19:35
отлично :-)
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов