HTML теги
  • Валидация тегов
  • <!-- -->
  • <!DOCTYPE>
  • <a>
    • download
    • href
    • rel
    • target
    • type
  • <abbr>
  • <acronym>
  • <address>
  • <applet>
  • <article>
  • <aside>
  • <audio>
  • <b>
  • <base>
    • href
    • target
  • <basefont>
  • <bdi>
  • <bdo>
  • <bgsound>
  • <bdi>
  • <bdo>
  • <bgsound>
  • <big>
  • <blink>
  • <blockquote>
  • <body>
  • <br>
  • <button>
  • <canvas>
  • <caption>
  • <center>
  • <cite>
  • <code>
  • <col>
  • <colgroup>
  • <comment>
  • <datalist>
  • <dd>
  • <del>
  • <details>
  • <dfn>
  • <dir>
  • <div>
  • <dl>
  • <dt>
  • <em>
  • <embed>
  • <fieldset>
  • <figcaption>
  • <figure>
  • <form>
  • <footer>
  • <form>
  • <frame>
  • <frameset>
  • <h1>
  • <h2>
  • <h3>
  • <h4>
  • <h5>
  • <h6>
  • <head>
  • <header>
  • <hgroup>
  • <hr>
  • <html>
  • <i>
  • <iframe>
  • <img>
  • <input>
  • <ins>
  • <isindex>
  • <kbd>
  • <keygen>
  • <label>
    • for
  • <legend>
  • <li>
  • <link>
  • <listing>
  • <main>
  • <map>
  • <mark>
  • <marquee>
  • <menu>
  • <meta>
  • <meter>
  • <multicol>
  • <nav>
  • <nobr>
  • <noembed>
  • <noframes>
  • <noscript>
  • <object>
  • <ol>
  • <optgroup>
  • <option>
  • <output>
  • <p>
  • <param>
  • <plaintext>
  • <pre>
  • <progress>
  • <q>
  • <rp>
  • <rt>
  • <ruby>
  • <s>
  • <samp>
  • <script>
  • <section>
  • <select>
  • <small>
  • <source>
  • <spacer>
  • <span>
  • <strike>
  • <strong>
  • <style>
  • <sub>
  • <summary>
  • <sup>
  • <table>
  • <tbody>
  • <textarea>
  • <tfoot>
  • <th>
  • <thead>
  • <time>
  • <title>
  • <tr>
  • <track>
  • <tt>
  • <u>
  • <ul>
  • <var>
  • <video>
  • <wbr>
  • <xmp>

Тег <form>

  • IE
    3.0+
  • Chrome
    1.0+
  • Opera
    4.0+
  • Safari
    5.0+
  • Firefox
    1.0+
  • Android
    1.0+
  • iOS
    1.0+

Тег <form> устанавливает форму на веб-странице. Форма предназначена для обмена данными между пользователем и сервером. Область применения форм не ограничена отправкой данных на сервер, с помощью клиентских скриптов можно получить доступ к любому элементу формы, изменять его и применять по своему усмотрению.

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

Для отправки формы на сервер используется кнопка Submit, того же можно добиться, если нажать клавишу Enter в пределах формы. Если кнопка Submit отсутствует в форме, клавиша Enter имитирует ее использование.

Когда форма отправляется на сервер, управление данными передается программе, заданной атрибутом action тега <form>. Предварительно браузер подготавливает информацию в виде пары «имя=значение», где имя определяется атрибутом name тега <input>, а значение введено пользователем или установлено в поле формы по умолчанию. Если для отправки данных используется метод GET, то адресная строка может принимать следующий вид: http://site.ru/index.php?page=5

Параметры перечисляются после вопросительного знака, указанного после адреса CGI-программы и разделяются между собой символом амперсанда (&). Нелатинские символы преобразуются в шестнадцатеричное представление (в форме %HH, где HH — шестнадцатеричный код для значения ASCII-символа), пробел заменяется на плюс (+).

Допускается внутрь контейнера <form> помещать другие теги, при этом сама форма никак не отображается на веб-странице, видны только ее элементы и результаты вложенных тегов. Закрывающий тег обязателен.

<form action="URL">  ...</form>
Атрибуты
accept-charset
Устанавливает кодировку, в которой сервер может принимать и обрабатывать данные.
action
Адрес программы или документа, который обрабатывает данные формы.
autocomplete
Включает автозаполнение полей формы.
enctype
Способ кодирования данных формы.
method
Метод протокола HTTP.
name
Имя формы.
novalidate
Отменяет встроенную проверку данных формы на корректность ввода.
target
Имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.

Также для этого тега доступны универсальные атрибуты и события.

Пример
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег form</title>
</head>
<body>

<form action="handler.php" method="post">
 <h6>Какую алгоритмическую сложность имеют следующие операции 
для NSMutableArray в среднем и в худшем случаях:</h6>
 <div>
    <input type="radio" name="ans" value="a1" id="check1">
    <label for="check1">вставка нового элемента в начало структуры</label>
 </div>
 <div>
    <input type="radio" name="ans" value="a2" id="check2">
    <label for="check2">вставка нового элемента в конец структуры</label>
 </div>
 <div>
    <input type="radio" name="ans" value="a3" id="check3">
    <label for="check3">поиск существующего элемента по значению</label>
 </div>
 <div>
    <input type="radio" name="ans" value="a4" id="check4">
    <label for="check4">поиск существующего элемента по индексу</label>
 </div>
 <div>
    <input type="radio" name="ans" value="a5" id="check5">
    <label for="check5">удаление существующего элемента</label>
 </div>
 <div><input type="submit"></div>
</form>

</body>
</html>

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

Вид элементов формы в окне браузера

Категория: Блочные элементы, Формы

Статьи по теме
  • Защита от дурака
  • Отправка данных формы
  • Создание формы
  • Сумасшедшие формы
Популярные статьи
2D игра на Unity. Подробное руководство. Часть 1
  • unity
2D игра на Unity. Подробное руководство. Часть 1
Адаптивный слайдер без Javascript на CSS3
  • слайдер
Адаптивный слайдер без Javascript на CSS3
Работа с Unity в 2D
  • unity
Работа с Unity в 2D
2D игра на Unity. Подробное руководство. Часть 3
  • unity
2D игра на Unity. Подробное руководство. Часть 3
2D игра на Unity. Подробное руководство. Часть 4
  • unity
2D игра на Unity. Подробное руководство. Часть 4
2D игра на Unity. Подробное руководство. Часть 5
  • unity
2D игра на Unity. Подробное руководство. Часть 5
2D игра на Unity. Подробное руководство. Часть 6
  • unity
2D игра на Unity. Подробное руководство. Часть 6
Учебник по новому GUI в Unity. Часть 2.
  • unity
Учебник по новому GUI в Unity. Часть 2.
Учебник по новому GUI в Unity. Часть 1.
  • unity
Учебник по новому GUI в Unity. Часть 1.

HTML LESS LESS React
Онлайн журнал для профессиональных веб-дизайнеров и программистов
БлогПлагиныГрафикаИнструменты
© 2009-2017 WebSketches.ru