diff options
| author | Florian Merz <me@fiji-flo.de> | 2021-02-11 13:12:08 +0100 |
|---|---|---|
| committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 13:12:08 +0100 |
| commit | 43a5cac2eff22c21071800e13bef12af9d3a37d0 (patch) | |
| tree | f6e91f8aa958f15bd0b0aabf7b8dfc09063eceda /files/zh-tw/learn/forms | |
| parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
| download | translated-content-43a5cac2eff22c21071800e13bef12af9d3a37d0.tar.gz translated-content-43a5cac2eff22c21071800e13bef12af9d3a37d0.tar.bz2 translated-content-43a5cac2eff22c21071800e13bef12af9d3a37d0.zip | |
unslug zh-tw: move
Diffstat (limited to 'files/zh-tw/learn/forms')
| -rw-r--r-- | files/zh-tw/learn/forms/how_to_structure_a_web_form/index.html | 315 | ||||
| -rw-r--r-- | files/zh-tw/learn/forms/index.html | 359 |
2 files changed, 674 insertions, 0 deletions
diff --git a/files/zh-tw/learn/forms/how_to_structure_a_web_form/index.html b/files/zh-tw/learn/forms/how_to_structure_a_web_form/index.html new file mode 100644 index 0000000000..b403666795 --- /dev/null +++ b/files/zh-tw/learn/forms/how_to_structure_a_web_form/index.html @@ -0,0 +1,315 @@ +--- +title: 如何建構 HTML 表單 +slug: Learn/HTML/Forms/How_to_structure_an_HTML_form +translation_of: Learn/Forms/How_to_structure_a_web_form +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Forms/Your_first_form", "Learn/Forms/Basic_native_form_controls", "Learn/Forms")}}</div> + +<p class="summary">有了基礎後，我們就能探討表單元素，所提供的結構與文意之詳細資訊；還有各表單部份的相異之處。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">先決條件：</th> + <td>對電腦還有 <a href="/zh-TW/docs/Learn/HTML/Introduction_to_HTML">HTML</a> 有基本理解。</td> + </tr> + <tr> + <th scope="row">目標：</th> + <td>理解如何構建 HTML 表單並給予無障礙的語意化。</td> + </tr> + </tbody> +</table> + +<p>表單表單的彈性化令其成為 <a href="/zh-TW/docs/Learn/HTML" title="/zh-TW/docs/HTML">HTML</a> 最複雜的結構之一。你能使用專用的表單元素和屬性，來構建任何類型的基本表單。使用正確的 HTML 表單結構能讓確保表單可用、且<a href="/zh-TW/docs/Learn/Accessibility">無障礙</a>。</p> + +<h2 id="<form>_元素"><form> 元素</h2> + +<p>{{HTMLElement("form")}} 元素會形式上的定義表單和決定行為屬性。每次建立 HTML 表單時，都必須使用 form 元素；並將所有內容嵌進去。大多數的輔助技術與瀏覽器套件，都能抓到 {{HTMLElement("form")}} 元素，並實做特殊的 hook，使其更易於使用。</p> + +<p>我們之前就講過這件事了。</p> + +<div class="warning"><strong>注意：</strong>絕對不能在表單裡面再嵌入表單。這會讓表單行為變得難以理解，所以是一個壞主意。</div> + +<p>你可以從表單外面控制 {{HTMLElement("form")}} 。這麼做的話，除非使用 <a href="/zh-TW/docs/Web/HTML/Attributes/form"><code>form</code></a> 將其與表單關聯，否則該操作預設上和任何表單無關。引入此功能是為了可以在即使該操作未嵌在表單中，其依舊能顯式地將操作與表單綁定。</p> + +<p>接下來就開始探討表單裡面可能會嵌入什麼吧。</p> + +<h2 id="<fieldset>_and_<legend>_元素"><fieldset> and <legend> 元素</h2> + +<p>{{HTMLElement("fieldset")}} 元素能方便地建立用途相近、樣式及語意化都很方便的小部件組（groups of widgets）。你可以透過添加 {{HTMLElement("legend")}} 來給 {{HTMLElement("fieldset")}} 的內部開頭添加標籤。{{HTMLElement("legend")}} 的文字內容能描述 {{HTMLElement("legend")}} 目的。</p> + +<p>多數輔助科技會在 {{HTMLElement("legend")}} 元素被 {{HTMLElement("fieldset")}} 包住時偵測並使用它。比如說 <a href="http://www.freedomscientific.com/products/software/jaws/" rel="external" title="http://www.freedomscientific.com/products/fs/jaws-product-page.asp">Jaws</a> 與 <a href="http://www.nvda-project.org/" rel="external" title="http://www.nvda-project.org/">NVDA</a> 之類的螢幕報讀器就會在讀到每個控件的標籤前，讀出 legend 的內容。</p> + +<p>下面就有一個示例：</p> + +<pre class="brush:html; notranslate"><form> + <fieldset> + <legend>Fruit juice size</legend> + <p> + <input type="radio" name="size" id="size_1" value="small"> + <label for="size_1">Small</label> + </p> + <p> + <input type="radio" name="size" id="size_2" value="medium"> + <label for="size_2">Medium</label> + </p> + <p> + <input type="radio" name="size" id="size_3" value="large"> + <label for="size_3">Large</label> + </p> + </fieldset> +</form></pre> + +<div class="note"> +<p><strong>註</strong>：你可以在<a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/fieldset-legend.html">fieldset-legend.html</a> 觀察範例（<a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/fieldset-legend.html">或著觀察這個動態互動</a>）。</p> +</div> + +<p>在閱讀表單時，螢幕報讀器會針對第一個小部件組，說出「Fruit juice size small」、接著針對第二個小部件組，說出「Fruit juice size medium」、第三個則是「Fruit juice size large」。</p> + +<p>這個示例的是最重要的用法之一：每次有一組 radio 按鈕時，就該在裡面放一個 {{HTMLElement("fieldset")}} 元素。{{HTMLElement("fieldset")}} 也能用在表單的其他地方。理想上，要是表單一長，就要把他放到其他頁面。但如果做不到這點，那將不同的相關部分，放在不同的 fieldsets 之中，也可以提高可用性。</p> + +<p>由於 {{HTMLElement("fieldset")}} 對輔助技術的影響，這個元素是建立無障礙表單的基石，但請注意不要濫用這個元素。可以的話，<a href="/zh-TW/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">聽聽螢幕報讀是怎麼講的</a>。如果踢起來怪怪的，那就試著改進表單。</p> + +<h2 id="<label>_元素"><label> 元素</h2> + +<p>正如上篇文章中所見，{{HTMLElement("label")}} 元素是定義 HTML 表單控件的正式方法。如果要構建無障礙的表單，這是最重要的元素：正確實做後，螢幕閱讀器會說出表單元素標籤、以及相關說明，同時也對有視力的用戶很有用。以這個例子為例，我們在上一篇文章中看過：</p> + +<pre class="brush: html notranslate"><label for="name">Name:</label> <input type="text" id="name" name="user_name"></pre> + +<p>在 <code><label></code> 元素透過 <code>for</code> 屬性與 <code><input></code> 元素的 <code>id</code> 屬性正確連結後，螢幕閱讀器就會讀出「Name, edit text」這樣的文字。</p> + +<p>還有另一種控制標籤與表單控件關聯的方法：那就是把表單控件嵌在 <code><label></code> 元素裡面，以便隱式關聯。</p> + +<pre class="brush: html notranslate"><label for="name"> + Name: <input type="text" id="name" name="user_name"> +</label></pre> + +<p>但即使在這種情況下，最好還是設置 <code>for</code> 屬性，以確保所有輔具都能理解標籤和控件之間的關係。</p> + +<p>如果沒有標籤、或著說表單控件沒有被顯式或隱式關聯，螢幕閱讀器會讀出沒啥幫助的「Edit text blank」。</p> + +<h3 id="標籤也能點喔！">標籤也能點喔！</h3> + +<p>使用標籤的另一個好處，就是能在點選該標籤後，啟動相對應的小部件。這種功能在控制文字輸入的時候會很好用：用戶點選標籤時就可以 focus 到 input 那邊。這對 button 與 checkbox 尤其有用：因為點選的區域可能很小，因此使它盡可能簡單地啟用，會是很有用的。</p> + +<p>例如在下面的示例中，點選「I like cherry」標籤文字後會切換 <em>taste_cherry</em> checkbox 的點選狀態：</p> + +<pre class="brush:html; notranslate"><form> + <p> + <input type="checkbox" id="taste_1" name="taste_cherry" value="cherry"> + <label for="taste_1">I like cherry</label> + </p> + <p> + <input type="checkbox" id="taste_2" name="taste_banana" value="banana"> + <label for="taste_2">I like banana</label> + </p> +</form></pre> + +<div class="note"> +<p><strong>註</strong>：你可以在 <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/checkbox-label.html">checkbox-label.html</a> 觀察示例（<a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/checkbox-label.html">這裡有展示版本！</a>）</p> +</div> + +<h3 id="多個標籤">多個標籤</h3> + +<p>嚴格來說，一個小部件組能放很多個標籤，但由於部分輔助科技處理上會有問題，所以這也不是個好點子。如果有多個標籤，請試著把巢狀各個小部件，並在裡面只安插一個 {{htmlelement("label")}} 元素。</p> + +<p>來看看這個例子：</p> + +<pre class="brush: html notranslate"><p>Required fields are followed by <abbr title="required">*</abbr>.</p> + +<!-- So this: --> +<div> + <label for="username">Name:</label> + <input id="username" type="text" name="username"> + <label for="username"><abbr title="required" aria-label="required">*</abbr></label> +</div> + +<!-- would be better done like this: --> +<div> + <label for="username"> + <span>Name:</span> + <input id="username" type="text" name="username"> + <abbr title="required" aria-label="required">*</abbr> + </label> +</div> + +<!-- But this is probably best: --> +<div> + <label for="username">Name: <abbr title="required" aria-label="required">*</abbr></label> + <input id="username" type="text" name="username"> +</div></pre> + +<p>{{EmbedLiveSample("Multiple_labels", 120, 120)}}</p> + +<p>The paragraph at the top states a rule for required elements. The rule must be included <em>before</em> it is used so that sighted users and users of assistive technologies such as screen readers can learn what it means before they encounter a required element. While this helps inform users what an asterisk means, it can not be relied upon. A screen reader will speak an asterisk as "<em>star</em>" when encountered. When hovered by a sighted mouse user, "<em>required</em>" should appear, which is achieved by use of the <code>title</code> attribute. Titles being read aloud depend on the screen reader's settings, so it is more reliable to also include the <code><a href="/zh-TW/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute">aria-label</a></code> attribute, which is always read by screen readers.</p> + +<p>The above variants increase in effectiveness as you go through them:</p> + +<ul> + <li>In the first example, the label is not read out at all with the input — you just get "edit text blank", plus the actual labels are read out separately. The multiple <code><label></code> elements confuse the screenreader.</li> + <li>In the second example, things are a bit clearer — the label read out along with the input is "name star name edit text required", and the labels are still read out separately. Things are still a bit confusing, but it's a bit better this time because the <code><input></code> has a label associated with it.</li> + <li>The third example is best — the actual label is read out all together, and the label read out with the input is "name required edit text".</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: You might get slightly different results, depending on your screenreader. This was tested in VoiceOver (and NVDA behaves similarly). We'd love to hear about your experiences too.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: You can find this example on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/required-labels.html">required-labels.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/required-labels.html">see it live also</a>). don't test the example with 2 or 3 of the versions uncommented — screenreaders will definitely get confused if you have multiple labels AND multiple inputs with the same ID!</p> +</div> + +<h2 id="建立表單所常用的_HTML_結構">建立表單所常用的 HTML 結構</h2> + +<p>Beyond the structures specific to web forms, it's good to remember that form markup is just HTML. This means that you can use all the power of HTML to structure a web form.</p> + +<p>As you can see in the examples, it's common practice to wrap a label and its widget with a {{HTMLElement("li")}} element within a {{HTMLElement("ul")}} or {{HTMLElement("ol")}} list. {{HTMLElement("p")}} and {{HTMLElement("div")}} elements are also commonly used. Lists are recommended for structuring multiple checkboxes or radio buttons.</p> + +<p>In addition to the {{HTMLElement("fieldset")}} element, it's also common practice to use HTML titles (e.g. {{htmlelement("h1")}}, {{htmlelement("h2")}}) and sectioning (e.g. {{htmlelement("section")}}) to structure complex forms.</p> + +<p>Above all, it is up to you to find a comfortable coding style that results in accessible, usable forms. Each separate section of functionality should be contained in a separate {{htmlelement("section")}} element, with {{htmlelement("fieldset")}} elements to contain radio buttons.</p> + +<h3 id="主動學習：建立表單結構">主動學習：建立表單結構</h3> + +<p>Let's put these ideas into practice and build a slightly more involved form — a payment form. This form will contain a number of control types that you may not yet understand. Don't worry about this for now; you'll find out how they work in the next article (<a href="/zh-TW/docs/Learn/Forms/Basic_native_form_controls">Basic native form controls</a>). For now, read the descriptions carefully as you follow the below instructions, and start to form an appreciation of which wrapper elements we are using to structure the form, and why.</p> + +<ol> + <li>To start with, make a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">blank template file</a> and the <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.css">CSS for our payment form</a> in a new directory on your computer.</li> + <li>Apply the CSS to the HTML by adding the following line inside the HTML {{htmlelement("head")}}: + <pre class="brush: html notranslate"><link href="payment-form.css" rel="stylesheet"></pre> + </li> + <li>Next, create your form by adding the outer {{htmlelement("form")}} element: + <pre class="brush: html notranslate"><form> + +</form></pre> + </li> + <li>Inside the <code><form></code> tags, add a heading and paragraph to inform users how required fields are marked: + <pre class="brush: html notranslate"><h1>Payment form</h1> +<p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p></pre> + </li> + <li>Next we'll add a larger section of code into the form, below our previous entry. Here you'll see that we are wrapping the contact information fields inside a distinct {{htmlelement("section")}} element. Moreover, we have a set of two radio buttons, each of which we are putting inside its own list ({{htmlelement("li")}}) element. We also have two standard text {{htmlelement("input")}}s and their associated {{htmlelement("label")}} elements, each contained inside a {{htmlelement("p")}}, and a password input for entering a password. Add this code to your form: + <pre class="brush: html notranslate"><section> + <h2>Contact information</h2> + <fieldset> + <legend>Title</legend> + <ul> + <li> + <label for="title_1"> + <input type="radio" id="title_1" name="title" value="K" > + King + </label> + </li> + <li> + <label for="title_2"> + <input type="radio" id="title_2" name="title" value="Q"> + Queen + </label> + </li> + <li> + <label for="title_3"> + <input type="radio" id="title_3" name="title" value="J"> + Joker + </label> + </li> + </ul> + </fieldset> + <p> + <label for="name"> + <span>Name: </span> + <strong><abbr title="required">*</abbr></strong> + </label> + <input type="text" id="name" name="username"> + </p> + <p> + <label for="mail"> + <span>E-mail: </span> + <strong><abbr title="required">*</abbr></strong> + </label> + <input type="email" id="mail" name="usermail"> + </p> + <p> + <label for="pwd"> + <span>Password: </span> + <strong><abbr title="required">*</abbr></strong> + </label> + <input type="password" id="pwd" name="password"> + </p> +</section></pre> + </li> + <li>The second <code><section></code> of our form is the payment information. We have three distinct controls along with their labels, each contained inside a <code><p></code>. The first is a drop-down menu ({{htmlelement("select")}}) for selecting credit card type. The second is an <code><input></code> element of type <code>tel</code>, for entering a credit card number; while we could have used the <code>number</code> type, we don't want the number's spinner UI. The last one is an <code><input></code> element of type <code>date</code>, for entering the expiration date of the card; this one will come up with a date picker widget in supporting browsers, and fall back to a normal text input in non-supporting browsers. These newer input types are reintroduced in <a href="/zh-TW/docs/Learn/Forms/HTML5_input_types">The HTML5 input types</a>.<br> + <br> + Enter the following below the previous section: + <pre class="brush: html notranslate"><section> + <h2>Payment information</h2> + <p> + <label for="card"> + <span>Card type:</span> + </label> + <select id="card" name="usercard"> + <option value="visa">Visa</option> + <option value="mc">Mastercard</option> + <option value="amex">American Express</option> + </select> + </p> + <p> + <label for="number"> + <span>Card number:</span> + <strong><abbr title="required">*</abbr></strong> + </label> + <input type="tel" id="number" name="cardnumber"> + </p> + <p> + <label for="date"> + <span>Expiration date:</span> + <strong><abbr title="required">*</abbr></strong> + <em>formatted as mm/dd/yyyy</em> + </label> + <input type="date" id="date" name="expiration"> + </p> +</section></pre> + </li> + <li>The last section we'll add is a lot simpler, containing only a {{htmlelement("button")}} of type <code>submit</code>, for submitting the form data. Add this to the bottom of your form now: + <pre class="brush: html notranslate"><p> <button type="submit">Validate the payment</button> </p></pre> + </li> +</ol> + +<p>You can see the finished form in action below (also find it on GitHub — see our payment-form.html <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.html">source</a> and <a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/payment-form.html">running live</a>):</p> + +<p>{{EmbedLiveSample("A_payment_form","100%",620, "", "Learn/Forms/How_to_structure_a_web_form/Example")}}</p> + +<h2 id="結論">結論</h2> + +<p>你現在擁有了正確建構 HTML 表單的所有知識。接下來將介紹本章介紹的許多功能。在下一篇文章中，將詳細探討如何使用各種不同類型的表單小部件，來收集用戶的訊息。</p> + +<h2 id="參見">參見</h2> + +<ul> + <li><a href="http://www.alistapart.com/articles/sensibleforms/" rel="external" title="http://www.alistapart.com/articles/sensibleforms/">A List Apart: <em>Sensible Forms: A Form Usability Checklist</em></a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/Forms/Your_first_form", "Learn/Forms/Basic_native_form_controls", "Learn/Forms")}}</p> + +<h2 id="在本模塊">在本模塊</h2> + +<ul> + <li><a href="/zh-TW/docs/Learn/Forms/Your_first_form">Your first form</a></li> + <li><a href="/zh-TW/docs/Learn/Forms/How_to_structure_a_web_form">How to structure a web form</a></li> + <li><a href="/zh-TW/docs/Learn/Forms/Basic_native_form_controls">Basic native form controls</a></li> + <li><a href="/zh-TW/docs/Learn/Forms/HTML5_input_types">The HTML5 input types</a></li> + <li><a href="/zh-TW/docs/Learn/Forms/Other_form_controls">Other form controls</a></li> + <li><a href="/zh-TW/docs/Learn/Forms/Styling_web_forms">Styling web forms</a></li> + <li><a href="/zh-TW/docs/Learn/Forms/Advanced_form_styling">Advanced form styling</a></li> + <li><a href="/zh-TW/docs/Learn/Forms/UI_pseudo-classes">UI pseudo-classes</a></li> + <li><a href="/zh-TW/docs/Learn/Forms/Form_validation">Client-side form validation</a></li> + <li><a href="/zh-TW/docs/Learn/Forms/Sending_and_retrieving_form_data">Sending form data</a></li> +</ul> + +<h3 id="Advanced_Topics">Advanced Topics</h3> + +<ul> + <li><a href="/zh-TW/docs/Learn/Forms/How_to_build_custom_form_controls">How to build custom form controls</a></li> + <li><a href="/zh-TW/docs/Learn/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li> + <li><a href="/zh-TW/docs/Learn/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li> +</ul> diff --git a/files/zh-tw/learn/forms/index.html b/files/zh-tw/learn/forms/index.html new file mode 100644 index 0000000000..589880794f --- /dev/null +++ b/files/zh-tw/learn/forms/index.html @@ -0,0 +1,359 @@ +--- +title: 網站表單-與數據合作 +slug: Learn/HTML/Forms +tags: + - Featured + - Forms + - Guide + - HTML + - NeedsTranslation + - TopicStub + - Web + - 待翻譯 +translation_of: Learn/Forms +--- +<p><span class="seoSummary">這篇指南提供了一系列的文章，幫你掌握HTML表單的基本知識。對於與使用者互動，網站表單是一項十分有力的工具，最常使用於用戶數據蒐集，或控制使用者介面。但由於一些歷史與技術上的因素，並沒有顯著的方法發揮表單的潛力。</span>在下面的指引中，我們將介紹網站表單所有基本面向，包括標記他們的HTML結構、設定控制器樣式、驗證數據及將數距提送至伺服器</p> + +<h2 id="參考文章列表">參考文章列表</h2> + +<ol> + <li><a href="/zh-TW/docs/HTML/Forms/My_first_HTML_form">我的第一個HTML表單</a></li> + <li><a href="/zh-TW/docs/HTML/Forms/How_to_structure_an_HTML_form"><span>如何構建 HTML 表單</span></a></li> + <li><a href="/zh-TW/docs/HTML/Forms/The_native_form_widgets"><span>本機表單控件</span></a></li> + <li>CSS和HTML表單 + <ol> + <li><a href="/zh-TW/docs/HTML/Forms/Styling_HTML_forms"><span>造型HTML表單</span></a></li> + <li><a href="/zh-TW/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML_forms">HTML表單高級造型</a></li> + <li><a href="/zh-TW/docs/Property_compatibility_table_for_form_widgets">表單控件屬性兼容表</a></li> + </ol> + </li> + <li><a href="/zh-TW/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>發送和檢索表單數據</span></a></li> + <li><a href="/zh-TW/docs/HTML/Forms/Data_form_validation">數據表單驗證</a></li> + <li><a href="/zh-TW/docs/HTML/Forms/How_to_build_custom_form_widgets">如何<span>創建自定義表單控件</span></a></li> + <li><a href="/zh-TW/docs/HTML/Forms/Sending_forms_through_JavaScript">通過JavaScript發送形式</a> + <ol> + <li><a href="/zh-TW/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects">使用FORMDATA 對象</a></li> + </ol> + </li> + <li><a href="/zh-TW/docs/HTML/Forms/HTML_forms_in_legacy_browsers">在傳統的瀏覽器的HTML表單</a></li> +</ol> + +<h2 id="HTML_文件">HTML 文件</h2> + +<h3 id="HTML_元素">HTML 元素</h3> + +<table> + <thead> + <tr> + <th scope="col">HTML 元素</th> + <th scope="col">元素的 DOM interface</th> + <th scope="col">說明</th> + </tr> + </thead> + <tbody> + <tr> + <td style="vertical-align: top;">{{HTMLElement("button")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLButtonElement")}}</td> + <td style="vertical-align: top;">該<code>按鈕</code>元素表示一個可點擊的按鈕。</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("datalist")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLDataListElement")}}</td> + <td style="vertical-align: top;">該<span style="font-family: courier new;">數據列表</span>元素包含了一組 {{ HTMLElement("option") }} 表示對其他表單元素的值可能的選擇要素。</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("fieldset")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLFieldSetElement")}}</td> + <td style="vertical-align: top;">該<span style="font-family: courier new;">字段集</span>是用來在表單中的組數表單元素。</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("form")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLFormElement")}}</td> + <td style="vertical-align: top;">的<code>形式</code>元素表示的文件的一部分，它包含使用戶能夠提交信息給web服務器的交互元件。</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("input")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLInputElement")}}</td> + <td style="vertical-align: top;">該 <code>輸入</code>元素用於創建表格的交互式控制。</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("keygen")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLKeygenElement")}}</td> + <td style="vertical-align: top;">所述<code>凱基</code>元素存在，以促進生成的密鑰材料，並提交了公開密鑰的作為HTML形式的一部分</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("label")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLLabelElement")}}</td> + <td style="vertical-align: top;">該<code>標籤</code>元素代表一個項目在用戶界面的標題</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("legend")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLLegendElement")}}</td> + <td style="vertical-align: top;">在<code>傳說</code>元素代表一個標題為其父 {{ HTMLElement("fieldset") }} 的內容。</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("meter")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLMeterElement")}}</td> + <td style="vertical-align: top;">所述<code>米</code>元素表示一個已知的範圍內的任一標量值或分數值。</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("optgroup")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLOptGroupElement")}}</td> + <td style="vertical-align: top;">在<code>OPTGROUP</code>元素創建一個 {{ HTMLElement("select") }} 元素中的一組選項。</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("option")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLOptionElement")}}</td> + <td style="vertical-align: top;">在HTML <code><font>選項</font></code><font>元素用於創建表示 </font> {{ HTMLElement("select") }} <font>，一個 </font>{{ HTMLElement("optgroup") }} <font>或</font> {{ HTMLElement("datalist") }}<font> 元素中的項目的控制。<em> </em><code><em> </em></code></font></td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("output")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLOutputElement")}}</td> + <td style="vertical-align: top;">的<code>輸出</code>元素表示一個計算的結果。</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("progress")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLProgressElement")}}</td> + <td style="vertical-align: top;">的<code>進展</code>元素用於查看任務的完成進度。</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("select")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLSelectElement")}}</td> + <td style="vertical-align: top;">在<code>選擇</code>元素代表呈現一個選項菜單的控制。</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("textarea")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLTextAreaElement")}}</td> + <td style="vertical-align: top;">該<code>textarea的</code>元素代表多行純文本編輯控制。</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>注：</strong>所有的表單元素，因為所有的HTML元素，支持 {{domxref("HTMLElement")}} DOM接口。</p> +</div> + +<h3 id="HTML_屬性">HTML 屬性</h3> + +<table class="standard-table"> + <thead> + <tr> + <th>屬性</th> + <th>能使用該屬性的 HTML 元素</th> + <th>說明</th> + </tr> + </thead> + <tbody> + <tr> + <td>accept</td> + <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> + <td>的類型列表服務器接受，通常是文件類型。</td> + </tr> + <tr> + <td style="white-space: nowrap;">accept-charset</td> + <td>{{ HTMLElement("form") }}</td> + <td>支持的字符集列表。</td> + </tr> + <tr> + <td>action</td> + <td>{{ HTMLElement("form") }}</td> + <td>一個程序處理通過表單提交的信息的URI。</td> + </tr> + <tr> + <td>autocomplete</td> + <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> + <td>指示是否在這個表單控件可以在默認情況下有其值由瀏覽器自動完成。</td> + </tr> + <tr> + <td>autofocus</td> + <td>{{ HTMLElement("button") }}、 {{ HTMLElement("input") }}、 {{ HTMLElement("keygen") }}、 {{ HTMLElement("select") }}、 {{ HTMLElement("textarea") }}</td> + <td>該元素應該在頁面加載後自動聚焦。</td> + </tr> + <tr> + <td>challenge</td> + <td>{{ HTMLElement("keygen") }}</td> + <td>即隨著公共密鑰提交的挑戰字符串。</td> + </tr> + <tr> + <td>checked</td> + <td>{{ HTMLElement("input") }}</td> + <td>指示是否應將元素在頁面加載檢查。</td> + </tr> + <tr> + <td>cols</td> + <td>{{ HTMLElement("textarea") }}</td> + <td>限定在一個textarea的列數。</td> + </tr> + <tr> + <td>data</td> + <td>{{ HTMLElement("object") }}</td> + <td>指定的資源的URL。</td> + </tr> + <tr> + <td>dirname</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td></td> + </tr> + <tr> + <td>disabled</td> + <td>{{ HTMLElement("button") }} 、{{ HTMLElement("fieldset") }} 、 {{ HTMLElement("input") }} 、 {{ HTMLElement("keygen") }} 、 {{ HTMLElement("optgroup") }} 、 {{ HTMLElement("option") }} 、 {{ HTMLElement("select") }} 、 {{ HTMLElement("textarea")}}</td> + <td>表明用戶是否可以與元件進行交互。</td> + </tr> + <tr> + <td>enctype</td> + <td>{{ HTMLElement("form") }}</td> + <td>定義當表單數據的內容類型<code>的方法</code>是POST。</td> + </tr> + <tr> + <td>for</td> + <td>{{ HTMLElement("label") }}、 {{ HTMLElement("output") }}</td> + <td>描述了屬於這一種元素。</td> + </tr> + <tr> + <td>form</td> + <td>{{ HTMLElement("button") }} 、 {{ HTMLElement("fieldset") }} 、 {{ HTMLElement("input") }} 、 {{ HTMLElement("keygen") }} 、 {{ HTMLElement("label") }} 、 {{ HTMLElement("meter") }} 、 {{ HTMLElement("object") }} 、 {{ HTMLElement("output") }} 、 {{ HTMLElement("progress") }} 、 {{ HTMLElement("select") }} 、 {{ HTMLElement("textarea")}}</td> + <td>表明是元件的所有者的形式。</td> + </tr> + <tr> + <td>high</td> + <td>{{ HTMLElement("meter") }}</td> + <td>表示下界的上限範圍。</td> + </tr> + <tr> + <td>keytype</td> + <td>{{ HTMLElement("keygen") }}</td> + <td>指定鍵所產生的類型。</td> + </tr> + <tr> + <td>list</td> + <td>{{ HTMLElement("input") }}</td> + <td>標識的預定義的選項的列表，以向用戶建議。</td> + </tr> + <tr> + <td>low</td> + <td>{{ HTMLElement("meter") }}</td> + <td>指示上限較低的範圍內。</td> + </tr> + <tr> + <td>max</td> + <td>{{ HTMLElement("input") }} 、 {{ HTMLElement("meter") }} 、 {{ HTMLElement("progress") }}</td> + <td>指示所允許的最大值。</td> + </tr> + <tr> + <td>maxlength</td> + <td>{{ HTMLElement("input") }} 、 {{ HTMLElement("textarea") }}</td> + <td>定義了在元件允許的字符的最大數目。</td> + </tr> + <tr> + <td>method</td> + <td>{{HTMLElement("form")}}</td> + <td>定義提交表單時使用的HTTP方法。可GET（默認）或POST。</td> + </tr> + <tr> + <td>min</td> + <td>{{ HTMLElement("input") }} 、 {{ HTMLElement("meter") }}</td> + <td>指示所允許的最小值。</td> + </tr> + <tr> + <td>multiple</td> + <td>{{ HTMLElement("input") }}、 {{ HTMLElement("select") }}</td> + <td>表示是否多個值所用的類型的輸入可以輸入<code>電子郵件</code>或<code>文件</code>。</td> + </tr> + <tr> + <td>name</td> + <td>{{ HTMLElement("button") }} 、 {{ HTMLElement("form") }} 、 {{ HTMLElement("fieldset") }} 、 {{ HTMLElement("input") }} 、 {{ HTMLElement("keygen") }} 、 {{ HTMLElement("output") }} 、 {{ HTMLElement("select") }} 、 {{ HTMLElement("textarea") }}</td> + <td>該元素的名稱。例如所使用的服務器，以確定在表單提交的字段。</td> + </tr> + <tr> + <td>novalidate</td> + <td>{{ HTMLElement("form") }}</td> + <td>此屬性表明，當提交表單應該無法通過驗證。</td> + </tr> + <tr> + <td>optimum</td> + <td>{{ HTMLElement("meter") }}</td> + <td>表示最佳數值。</td> + </tr> + <tr> + <td>pattern</td> + <td>{{ HTMLElement("input") }}</td> + <td>定義一個正則表達式元素的值將針對驗證。</td> + </tr> + <tr> + <td>placeholder</td> + <td>{{ HTMLElement("input") }}、 {{ HTMLElement("textarea") }}</td> + <td>提供一個提示什麼可以在字段中輸入的用戶。</td> + </tr> + <tr> + <td>readonly</td> + <td>{{ HTMLElement("input") }} 、 {{ HTMLElement("textarea") }}</td> + <td>指示該元素是否可以編輯或沒有。</td> + </tr> + <tr> + <td>required</td> + <td>{{ HTMLElement("input") }} 、 {{ HTMLElement("select") }}、 {{ HTMLElement("textarea") }}</td> + <td>指示此元素是否必填。</td> + </tr> + <tr> + <td>rows</td> + <td>{{ HTMLElement("textarea") }}</td> + <td>限定在一個textarea的行數。</td> + </tr> + <tr> + <td>selected</td> + <td>{{ HTMLElement("option") }}</td> + <td>定義了將在頁面加載所選的值。</td> + </tr> + <tr> + <td>size</td> + <td>{{ HTMLElement("input") }}、 {{ HTMLElement("select") }}</td> + <td>限定了元件的寬度（以像素為單位）。如果該元素的<code>類型</code>的屬性是<code>文本</code>或<code>密碼</code>那麼它的字符數。</td> + </tr> + <tr> + <td>src</td> + <td>{{ HTMLElement("img") }}</td> + <td>可嵌入內容的URL。</td> + </tr> + <tr> + <td>step</td> + <td>{{ HTMLElement("input") }}</td> + <td></td> + </tr> + <tr> + <td>target</td> + <td>{{ HTMLElement("form") }}</td> + <td></td> + </tr> + <tr> + <td>type</td> + <td>{{ HTMLElement("button") }} 、 {{ HTMLElement("input") }}</td> + <td>限定了元件的類型。</td> + </tr> + <tr> + <td>usemap</td> + <td>{{ HTMLElement("img") }}</td> + <td></td> + </tr> + <tr> + <td>value</td> + <td>{{ HTMLElement("button") }}、 {{ HTMLElement("option") }}、 {{ HTMLElement("input") }}、 {{ HTMLElement("meter") }}、 {{ HTMLElement("progress") }}</td> + <td>定義了將被顯示在頁面上的負載元件的默認值。</td> + </tr> + <tr> + <td>wrap</td> + <td>{{ HTMLElement("textarea") }}</td> + <td>指示文本是否應被包裹或沒有。</td> + </tr> + </tbody> +</table> + +<h3 id="規範性引用文件">規範性引用文件</h3> + +<ul> + <li><a href="http://www.w3.org/html/wg/drafts/html/master/forms.html#forms" lang="en" rel="external" title="http://www.w3.org/TR/html5/forms.html">W3C HTML 5.1規範（表格）</a></li> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms" rel="external" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms">WHATWG HTML生活水平（表格）</a></li> +</ul> + +<div id="gtx-trans" style="position: absolute; left: 562px; top: 71px;"> +<div class="gtx-trans-icon"></div> +</div> |