diff options
Diffstat (limited to 'files/ru/web/html/element/form')
| -rw-r--r-- | files/ru/web/html/element/form/index.html | 199 |
1 files changed, 199 insertions, 0 deletions
diff --git a/files/ru/web/html/element/form/index.html b/files/ru/web/html/element/form/index.html new file mode 100644 index 0000000000..fb2506c7cc --- /dev/null +++ b/files/ru/web/html/element/form/index.html @@ -0,0 +1,199 @@ +--- +title: <form> +slug: Web/HTML/Element/form +translation_of: Web/HTML/Element/form +--- +<h2 id="Summary" name="Summary">Резюме</h2> + +<p><em>Элемент HTML form</em> (<code><form></code>) представляет (собой) раздел документа, содержащий интерактивные элементы управления, которые позволяют пользователю отправлять информацию на веб-сервер.</p> + +<p>Можно использовать <code><a href="/en-US/docs/CSS/%3Avalid" rel="custom">:valid</a></code> и <code><a href="/en-US/docs/CSS/%3Ainvalid" rel="custom">:invalid</a></code> CSS псевдоклассы для стилизации <code><form></code> элемента, в зависимости от того, валиден или нет конкретный элемент {{domxref("HTMLFormElement.elements", "elements")}} внутри формы.</p> + +<h2 id="Usage_Context" name="Usage_Context">Контекст Использования</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td>Категория содержимого</td> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a></td> + </tr> + <tr> + <td>Разрешённое содержимое</td> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, но не содержащий <code><form></code> элементов</td> + </tr> + <tr> + <td>Пропуск тега</td> + <td>Нет. И открывающий и закрывающий тег должны быть.</td> + </tr> + <tr> + <td>Нормативный документ</td> + <td><a href="http://www.w3.org/TR/html5/forms.html#the-form-element" title="http://www.w3.org/TR/html5/forms.html#the-form-element">HTML5, section 4.10.3</a> (<a href="http://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html#h-17.3" title="http://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html#h-17.3">HTML4.01, section 17.3</a>)</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">Атрибуты</h2> + +<p>Как и все HTML элементы, этот элемент поддерживает <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">глобальные атрибуты</a>.</p> + +<dl> + <dt>{{htmlattrdef("accept")}} {{HTMLVersionInline(4)}} {{obsolete_inline}}</dt> + <dd>Список типов содержимого, разделенных запятой, которые принимает сервер. + <div class="note"><strong>Примечание об использовании:</strong> Этот атрибут был удалён в HTML5 и его не следует больше использовать. Взамен, используйте <span class="st">{{htmlattrxref("accept", "input")}}</span> атрибут заданного {{HTMLElement("input")}} элемента.</div> + </dd> + <dt>{{htmlattrdef("accept-charset")}}</dt> + <dd>Разделенные пробелами <a href="/en-US/docs/Web/Guide/Localizations_and_character_encodings">символьные кодировки</a>, которые принимает сервер. Браузер использует их в том порядке, в котором они перечислены. Значение по умолчанию означает <a href="/en-US/docs/Web/HTTP/Headers/Content-Encoding">ту же кодировку что и у страницы</a>.<br> + (В предыдущей версии HTML, различные кодировки могли быть разделены запятыми.)</dd> + <dt>{{htmlattrdef("action")}}</dt> + <dd>URI-адрес программы, которая обрабатывает информацию переданную через форму. Это значение может быть переписано с помощью атрибута {{htmlattrxref("formaction", "button")}} на {{HTMLElement("button")}} или {{HTMLElement("input")}} элементе.</dd> + <dt>{{htmlattrdef("autocomplete")}} {{HTMLVersionInline(5)}}</dt> + <dd>Указывает, могут ли элементы управления автоматически быть дописаны в форме браузером. Эта настройка может быть переписана с помощью атрибута <code>autocomplete</code> на элементе формы. Возможные значения: + <ul> + <li><code>off</code>: Пользователь должен явно ввести значение в каждое поле или документ предоставит свой собственный метод автодополнения; браузер автоматически не дополняет записи.</li> + <li><code>on</code>: Браузер может автоматически дополнить значения, основанные на значениях, которые пользователь уже вводил, в течение предыдущего использования формы.</li> + </ul> + + <div class="note"> + <p><strong>Примечание: </strong>Если вы установили значение <code>off</code> <code>для</code> <code>autocomplete</code> атрибута формы, из-за того, что документ предоставляет своё собственное автодополнение, то вам следует также установить значение <code>off</code> для <code>autocomplete</code> каждого {{HTMLElement("input")}} элемента формы, которые документ может автоматически дополнить. Подробнее, смотрите {{anch("Google Chrome notes")}}.</p> + </div> + </dd> + <dt>{{htmlattrdef("enctype")}}</dt> + <dd>Когда значение атрибута method равно <code>post</code>, атрибут - <a href="http://en.wikipedia.org/wiki/Mime_type" title="http://en.wikipedia.org/wiki/Mime_type">MIME тип</a> содержимого, которое используется, чтобы передать форму на сервер. Возможные значения: + <ul> + <li><code>application/x-www-form-urlencoded</code>: Значение по умолчанию, если атрибут не задан.</li> + <li><code>multipart/form-data</code>: Используйте это значение, если пользуетесь элементом {{HTMLElement("input")}} атрибутом <code>type</code> установленным в "file".</li> + <li><code>text/plain (HTML5)</code></li> + </ul> + + <p>Это значение может быть переписано атрибутом {{htmlattrxref("formenctype", "button")}} на элементе {{HTMLElement("button")}} или {{HTMLElement("input")}}.</p> + </dd> + <dt>{{htmlattrdef("method")}}</dt> + <dd><a href="/en-US/docs/HTTP" title="http://www.w3.org/Protocols/rfc2616/rfc2616.html">HTTP</a> метод, который браузер использует, для отправки формы. Возможные значения: + <ul> + <li><code>post</code>: Соответствует HTTP <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5" title="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5">POST методу</a> ; данные из формы включаются в тело формы и посылаются на сервер.</li> + <li><code>get</code>: Соответствует <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3" title="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3">GET методу</a>; данные из формы добавляются к URI атрибута <code>action</code>, их разделяет '?', и полученный URI посылается на сервер. Используйте этот метод, когда форма содержит только ASCII символы и не имеет побочного эффекта.</li> + </ul> + + <p>Это значение может быть переписано атрибутом {{htmlattrxref("formmethod", "button")}} на {{HTMLElement("button")}} или {{HTMLElement("input")}} элементе.</p> + </dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>Имя формы. В HTML 4 его использование запрещено (<code>id</code> следует использовать взамен). Оно должно быть уникальным и не пустым среди всех форм в документе в HTML 5.</dd> + <dt>{{htmlattrdef("novalidate")}} {{HTMLVersionInline(5)}}</dt> + <dd>Это Boolean атрибут показывает, что форма не проверяется на валидность, когда отправляется серверу. Если атрибут пропущен (и поэтому форма проверяется), эта настройка по умолчанию, может быть переписана атрибутом {{htmlattrxref("formnovalidate", "button")}} на {{HTMLElement("button")}} или {{HTMLElement("input")}} элементе, принадлежащем форме.</dd> + <dt>{{htmlattrdef("target")}}</dt> + <dd>Имя или ключевое слово, показывающее где отображать ответ, который будет получен, после отправки формы. В HTML 4, это имя или ключевое слово для фрейма. В HTML5, это имя или ключевое слово, <em>контекста</em> <em>просмотра </em>(например, вкладка, окно, или линейный фрейм). Следующие ключевые слова имееют специальное значение: + <ul> + <li><code>_self</code>: Загружает ответ в том же самом фрейме HTML 4 (или HTML5 контексте просмотра) как текущий. Это значение по умолчанию, если атрибут не указан.</li> + <li><code>_blank</code>: Загружает ответ в новом безымянном окне HTML 4 или HTML5 контексте просмотра.</li> + <li><code>_parent</code>: Загружает ответ HTML 4 в родительском наборе фрейма для текущего фрейма или HTML5 родительский контекст просмотра для текущего просмотра. Если нет предка, эта опция действует точно так же как as <code>_self</code>.</li> + <li><code>_top</code>: HTML 4: Загружает ответ в полное, оригинальное окно, закрывая все другие фреймы. HTML5: Загружает ответ в верхний уровень контекста просмотра (т.е., контекст просмотра это предок текущего и не имеет других предков). Если нет предка, эта опция действует точно так же как as <code>_self</code>.</li> + </ul> + + <p>HTML5: Это значение может быть перезаписано {{htmlattrxref("formtarget", "button")}} атрибутом на {{HTMLElement("button")}} или {{HTMLElement("input")}} элементе.</p> + </dd> +</dl> + +<h2 id="DOM_interface" name="DOM_interface">DOM_interface</h2> + +<p>Этот элемент реализует {{domxref("HTMLFormElement")}} интерфейс.</p> + +<h2 id="Examples" name="Examples">Примеры</h2> + +<pre class="brush: html"><!-- Простая форма, которая пошлёт GET запрос --> +<form action=""> + <label for="GET-name">Name:</label> + <input id="GET-name" type="text" name="name"> + <input type="submit" value="Save"> +</form> + +<!-- Простая форма, которая пошлёт POST запрос --> +<form action="" method="post"> + <label for="POST-name">Name:</label> + <input id="POST-name" type="text" name="name"> + <input type="submit" value="Save"> +</form> + +<!-- Форма с fieldset, legend, и label --> +<form action="" method="post"> + <fieldset> + <legend>Title</legend> + <input type="radio" name="radio" id="radio"> <label for="radio">Click me</label> + </fieldset> +</form> +</pre> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость браузера</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>novalidate</code> attribute</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>novalidate</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p><a id="Google_Chrome_notes" name="Google_Chrome_notes">[1] Интерфейс для автодополнений в Google Chrome может меняться при запросе, в зависимости от утверждения установлен ли <code>autocomplete</code> со значеним <code>off</code> на {{HTMLElement("input")}} элементах формы, так же как и на самой форме. С одной стороны, когда <code>autocomplete</code> со значеним <code>off</code> установлен для формы, но при этом не установлен для её {{HTMLElement("input")}} элементов, при запросе пользователя автоматически заполнить поля формы, Chrome может отобразить сообщение "autocomplete has been disabled for this form." С другой стороны, если и форма и её input элементы имеют <code>autocomplete</code> со значеним <code>off</code>, браузер не отобразит это сообщение. По этой причине, вам следует устанавливать атрибуту <code>autocomplete</code> значение <code>off</code> для каждого {{HTMLElement("input")}} у которого стоит нестандартное автодополнение.</a></p> + +<h2 id="See_also" name="See_also">Смотрите также</h2> + +<ul> + <li>Другие элементы, которые используются для создания форм: {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}},{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}}, {{HTMLElement("meter")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}.</li> +</ul> + +<p><label>{{HTMLRef}}</label></p> |