diff options
Diffstat (limited to 'files/zh-tw/web/html/element/form/index.html')
| -rw-r--r-- | files/zh-tw/web/html/element/form/index.html | 191 |
1 files changed, 191 insertions, 0 deletions
diff --git a/files/zh-tw/web/html/element/form/index.html b/files/zh-tw/web/html/element/form/index.html new file mode 100644 index 0000000000..07a2e91254 --- /dev/null +++ b/files/zh-tw/web/html/element/form/index.html @@ -0,0 +1,191 @@ +--- +title: <form> +slug: Web/HTML/Element/form +translation_of: Web/HTML/Element/form +--- +<div>{{HTMLRef}}</div> + +<p>HTML <strong><code><form></code></strong> 元素表示提交訊息的區塊，此區塊含有許多可互動的控制項。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/form.html", "tabbed-standard")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</div> + +<p>It is possible to use the {{cssxref(':valid')}} and {{cssxref(':invalid')}} CSS <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> to style a <code><form></code> element based on whether or not the {{domxref("HTMLFormElement.elements", "elements")}} inside the form are valid.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/Guide/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Palpable_content">palpable content</a></td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">Flow content</a>, but not containing <code><form></code> elements</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">flow content</a></td> + </tr> + <tr> + <th scope="row">Implicit ARIA role</th> + <td><code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Form_Role">form</a></code> if the form has an <a href="https://www.w3.org/TR/accname-1.1/#dfn-accessible-name">accessible name</a>, otherwise <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">no corresponding role</a></td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td><code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Search_role">search</a></code>, {{ARIARole("none")}} or {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLFormElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> + +<dl> + <dt>{{htmlattrdef("accept")}} {{obsolete_inline}}</dt> + <dd>Comma-separated <a href="/en-US/docs/Web/SVG/Content_type">content types</a> the server accepts. + <div class="note"><strong>This attribute was removed in HTML5 and should not be used.</strong> Instead, use the {{htmlattrxref("accept", "input")}} attribute on <code><input type=file></code> elements.</div> + </dd> + <dt>{{htmlattrdef("accept-charset")}}</dt> + <dd>Space-separated <a href="/en-US/docs/Web/Guide/Localizations_and_character_encodings">character encodings</a> the server accepts. The browser uses them in the order in which they are listed. The default value means <a href="/en-US/docs/Web/HTTP/Headers/Content-Encoding">the same encoding as the page</a>.<br> + (In previous versions of HTML, character encodings could also be delimited by commas.)</dd> + <dt>{{htmlattrdef("action")}}</dt> + <dd>The URL that processes the form submission. This value can be overridden by a {{htmlattrxref("formaction", "button")}} attribute on a {{HTMLElement("button")}}, <code><a href="/en-US/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code>, or <code><a href="/en-US/docs/Web/HTML/Element/input/image"><input type="image"></a></code> element.</dd> + <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt> + <dd>A nonstandard attribute used by iOS Safari that controls how textual form elements should be automatically capitalized. <code>autocapitalize</code> attributes on a form elements override it on <code><form></code>. Possible values: + <ul> + <li><code>none</code>: No automatic capitalization.</li> + <li><code>sentences</code> (default): Capitalize the first letter of each sentence.</li> + <li><code>words</code>: Capitalize the first letter of each word.</li> + <li><code>characters</code>: Capitalize all characters — that is, uppercase.</li> + </ul> + </dd> + <dt>{{htmlattrdef("autocomplete")}}</dt> + <dd>Indicates whether input elements can by default have their values automatically completed by the browser. <code>autocomplete</code> attributes on form elements override it on <code><form></code>. Possible values: + <ul> + <li><code>off</code>: The browser may not automatically complete entries. (Browsers tend to ignore this for suspected login forms; see <a href="/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#The_autocomplete_attribute_and_login_fields">The autocomplete attribute and login fields</a>.)</li> + <li><code>on</code>: The browser may automatically complete entries.<span style="display: none;"> </span></li> + </ul> + </dd> + <dt>{{htmlattrdef("enctype")}}</dt> + <dd>If the value of the <code>method</code> attribute is <code>post</code>, <code>enctype</code> is the <a href="https://en.wikipedia.org/wiki/Mime_type">MIME type</a> of the form submission. Possible values: + <ul> + <li><code>application/x-www-form-urlencoded</code>: The default value.</li> + <li><code>multipart/form-data</code>: Use this if the form contains {{HTMLElement("input")}} elements with <code>type=file</code>.</li> + <li><code>text/plain</code>: Introduced by HTML5 for debugging purposes.</li> + </ul> + + <p>This value can be overridden by {{htmlattrxref("formenctype", "button")}} attributes on {{HTMLElement("button")}}, <code><a href="/en-US/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code>, or <code><a href="/en-US/docs/Web/HTML/Element/input/image"><input type="image"></a></code> elements.</p> + </dd> + <dt>{{htmlattrdef("method")}}</dt> + <dd>The <a href="/en-US/docs/Web/HTTP">HTTP</a> method to submit the form with. Possible values: + <ul> + <li><code>post</code>: The <a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5">POST method</a>; form data sent as the <a href="/en-US/docs/Web/API/Body">request body</a>.</li> + <li><code>get</code>: The <a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3">GET method</a>; form data appended to the <code>action</code> URL with a <code>?</code> separator. Use this method when the form <a href="/en-US/docs/Glossary/Idempotent">has no side-effects</a>.</li> + <li><code>dialog</code>: When the form is inside a {{HTMLElement("dialog")}}, closes the dialog on submission.</li> + </ul> + + <p>This value is overridden by {{htmlattrxref("formmethod", "button")}} attributes on {{HTMLElement("button")}}, <code><a href="/en-US/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code>, or <code><a href="/en-US/docs/Web/HTML/Element/input/image"><input type="image"> </a></code>elements.</p> + </dd> + <dt>{{htmlattrdef("name")}} {{deprecated_inline}}</dt> + <dd>The name of the form. Deprecated as of HTML 4 (use <code>id</code> instead). It must be unique among the forms in a document and not an empty string as of HTML5.</dd> + <dt>{{htmlattrdef("novalidate")}}</dt> + <dd>This Boolean attribute indicates that the form shouldn't be validated when submitted. If this attribute is not set (and therefore the form <em><strong>is</strong></em> validated), it can be overridden by a {{htmlattrxref("formnovalidate", "button")}} attribute on a {{HTMLElement("button")}}, <code><a href="/en-US/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code>, or <code><a href="/en-US/docs/Web/HTML/Element/input/image"><input type="image"></a></code> element belonging to the form.</dd> + <dt>{{htmlattrdef("rel")}}</dt> + <dd>Creates a hyperlink or annotation depending on the value, see the <a href="/docs/Web/HTML/Attributes/rel">{{htmlattrdef("rel")}}</a> attribute for details.</dd> + <dt>{{htmlattrdef("target")}}</dt> + <dd>Indicates where to display the response after submitting the form. In HTML 4, this is the name/keyword for a frame. In HTML5, it is a name/keyword for a <em>browsing context</em> (for example, tab, window, or iframe). The following keywords have special meanings: + <ul> + <li><code>_self</code> (default): Load into the same browsing context as the current one.</li> + <li><code>_blank</code>: Load into a new unnamed browsing context.</li> + <li><code>_parent</code>: Load into the parent browsing context of the current one. If no parent, behaves the same as <code>_self</code>.</li> + <li><code>_top</code>: Load into the top-level browsing context (i.e., the browsing context that is an ancestor of the current one and has no parent). If no parent, behaves the same as <code>_self</code>.</li> + </ul> + + <p>This value can be overridden by a {{htmlattrxref("formtarget", "button")}} attribute on a {{HTMLElement("button")}}, <code><a href="/en-US/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code>, or <code><a href="/en-US/docs/Web/HTML/Element/input/image"><input type="image"></a></code> element.</p> + </dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><!-- Form which will send a GET request to the current URL --> +<form> + <label>Name: + <input name="submitted-name" autocomplete="name"> + </label> + <button>Save</button> +</form> + +<!-- Form which will send a POST request to the current URL --> +<form method="post"> + <label>Name: + <input name="submitted-name" autocomplete="name"> + </label> + <button>Save</button> +</form> + +<!-- Form with fieldset, legend, and label --> +<form method="post"> + <fieldset> + <legend>Title</legend> + <label><input type="radio" name="radio"> Select me</label> + </fieldset> +</form></pre> + +<p>{{ EmbedLiveSample('Examples', '100%', 110) }}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-form-element', '<form>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-form-element', '<form>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.3', '<form>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("html.elements.form")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/HTML/Forms">HTML forms guide</a></li> + <li>Other elements that are used when creating forms: {{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> + <li>Getting a list of the elements in the form: {{domxref("HTMLFormElement.elements")}}</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Form_Role">ARIA: Form role</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Search_role">ARIA: Search role</a></li> +</ul> |