path: root/files/zh-cn/learn/forms/advanced_form_styling/index.html

---
title: 高级设计 HTML 表单
slug: Learn/Forms/Advanced_form_styling
translation_of: Learn/Forms/Advanced_form_styling
original_slug: Learn/HTML/Forms/Advanced_styling_for_HTML_forms
---
<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Styling_HTML_forms", "Learn/HTML/Forms/Property_compatibility_table_for_form_widgets", "Learn/HTML/Forms")}}</div>

<p class="summary">在本文中，我们将看到<a href="https://developer.mozilla.org/en-US/docs/HTML">HTML</a>表单怎样使用<a href="https://developer.mozilla.org/en-US/docs/CSS">CSS</a>装饰难以定制的表单小部件。如<a href="/en-US/docs/HTML/Forms/Styling_HTML_forms">前面章节</a>所示，文本域和按钮完全可以使用CSS，现在我们将深入探索HTML表单样式。</p>

<p>在继续之前，让我们回忆一下两种表单小部件：</p>

<dl>
 <dt>bad</dt>
 <dd>这个元素很难设计，需要一些复杂的技巧，有时还涉及到高级的CSS3的知识。</dd>
 <dt>ugly</dt>
 <dd>忘记使用CSS来设计这些元素吧。你最多能做一点点事情，还不能保证可以跨浏览器，而且在它们出现时永远不能做到完全的受控。</dd>
</dl>

<h2 id="CSS表现力">CSS表现力</h2>

<p>除了文本框和按钮之外，使用其他表单小部件的主要问题是在许多情况下，CSS的表现不能满足设计复杂的小部件的要求。</p>

<p>HTML和CSS最新的发展扩展了CSS的表现力：</p>

<ul>
 <li><a href="http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes" rel="external">CSS 2.1</a> 非常受限，只给出三个伪类：

  <ul>
   <li>{{cssxref(":active")}}</li>
   <li>{{cssxref(":focus")}}</li>
   <li>{{cssxref(":hover")}}</li>
  </ul>
 </li>
 <li><a href="http://www.w3.org/TR/css3-selectors/" rel="external">CSS Selector Level 3</a> 增加了三个与HTML表单相关的伪类：
  <ul>
   <li>{{cssxref(":enabled")}}</li>
   <li>{{cssxref(":disabled")}}</li>
   <li>{{cssxref(":checked")}}</li>
   <li>{{cssxref(":indeterminate")}}</li>
  </ul>
 </li>
 <li><a href="http://dev.w3.org/csswg/css3-ui/#pseudo-classes" rel="external">CSS Basic UI Level 3</a> 也增加了几个伪类用于描述小部件的状态：
  <ul>
   <li>{{cssxref(":default")}}</li>
   <li>{{cssxref(":valid")}}</li>
   <li>{{cssxref(":invalid")}}</li>
   <li>{{cssxref(":in-range")}}</li>
   <li>{{cssxref(":out-of-range")}}</li>
   <li>{{cssxref(":required")}}</li>
   <li>{{cssxref(":optional")}}</li>
   <li>{{cssxref(":read-only")}}</li>
   <li>{{cssxref(":read-write")}}</li>
  </ul>
 </li>
 <li><a href="http://dev.w3.org/csswg/selectors4/" rel="external">CSS Selector Level 4</a> 目前处于积极应用和重点讨论的状态，但并不打算为表单做更多的改善：
  <ul>
   <li>{{cssxref(":user-error")}} 只是改进了伪类{{cssxref(":invalid")}}。</li>
  </ul>
 </li>
</ul>

<p>所有这一切是一个好的开端，但是有两个问题。首先，一些浏览器不需要实现CSS 2.1之上的特性。其次在设计像日期选择器这样的复杂的小部件时，这些实在不够好。</p>

<p>浏览器厂家在CSS表现力在表单方面的扩展做了一些尝试，在某些情况下，知道什么可用也挺不错的。</p>

<div class="warning">
<p><strong>警告：</strong> 尽管 这些尝试很有趣，但<strong>它们是非标准的，也就是不可靠的。</strong>. 如果你使用它们(也许你并不常用)，你要自己承担风险，使用非标准的属性<a href="http://www.alistapart.com/articles/every-time-you-call-a-proprietary-feature-css3-a-kitten-dies/">对于Web并不是好事</a> 。</p>
</div>

<ul>
 <li><a href="/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions" title="/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions">Mozilla CSS 扩展</a>

  <ul>
   <li>{{cssxref(":-moz-placeholder")}}</li>
   <li>{{cssxref(":-moz-submit-invalid")}}</li>
   <li>{{cssxref(":-moz-ui-invalid")}}</li>
   <li>{{cssxref(":-moz-ui-valid")}}</li>
  </ul>
 </li>
 <li><a href="/en-US/docs/CSS/CSS_Reference/Webkit_Extensions" title="/en-US/docs/CSS/CSS_Reference/Webkit_Extensions">WebKit CSS 扩展</a>
  <ul>
   <li>{{cssxref("::-webkit-input-placeholder")}}</li>
   <li><a href="http://trac.webkit.org/wiki/Styling%20Form%20Controls" rel="external" title="http://trac.webkit.org/wiki/Styling Form Controls">其他</a></li>
  </ul>
 </li>
 <li><a href="http://msdn.microsoft.com/en-us/library/ie/hh869403%28v=vs.85%29.aspx" rel="external">Microsoft CSS 扩展</a>
  <ul>
   <li><code><a href="http://msdn.microsoft.com/en-us/library/ie/hh772745%28v=vs.85%29.aspx" rel="external">:-ms-input-placeholder</a></code></li>
  </ul>
 </li>
</ul>

<h3 id="控制表单元素的外观">控制表单元素的外观</h3>

<p>基于WebKit(Chrome, Safari)和 Gecko(Firefox)的浏览器提供更高级的HTML部件定制。它们也实现了跨平台，因此需要一种方式把原生小部件转换为用户可设置样式的小部件。</p>

<p>为此，它们使用了专有属性：{{cssxref("-webkit-appearance")}}或{{cssxref("-moz-appearance")}}。这<strong>些属性是非标准的，不应该使用。</strong>事实上，它们在WebKit 和Gecko中的表现也是不相同的。然而，有一个值很好用：<code>none</code>，用这个值，你（几乎完全）能控制一个已知小部件的样式。</p>

<p>因此，如果你在应用一个元素的样式时遇到麻烦，可以尝试使用那些专有属性。我们下面有一些例子，这个属性最成功的例子是WebKit浏览器中的搜索域的样式：</p>

<pre class="brush: html">&lt;form&gt;
    &lt;input type="search"&gt;
&lt;/form&gt;</pre>

<pre class="brush: css">&lt;style&gt;
input[type=search] {
    border: 1px dotted #999;
    border-radius: 0;

    -webkit-appearance: none;
}
&lt;/style&gt;</pre>

<p>{{EmbedLiveSample("Controlling_the_appearance_of_form_elements", 250, 40)}}</p>

<div class="note">
<p><strong>注意：</strong>当我们谈及Web技术的时总是很难预测未来。扩展CSS表现力是很困难的，其他规范也做了一些探索性的工作，如<a href="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html" rel="external">Shadow DOM</a>提供了一些观点。可完全设置样式的表单的问题还远未结束。</p>
</div>

<h2 id="举例">举例</h2>

<h3 id="复选框和单选按钮">复选框和单选按钮</h3>

<p>独自设计复选框或单选按钮的样式是让人抓狂的。例如由于浏览器反应各不相同，在修改复选框和单选按钮的大小时，并不保证确实能改变它们。</p>

<h4 id="一个简单的测试用例">一个简单的测试用例</h4>

<p>让我们研究一下下面的测试用例：</p>

<pre class="brush: html">&lt;span&gt;&lt;input type="checkbox"&gt;&lt;/span&gt;</pre>

<pre class="brush: css">span {
    display: inline-block;
    background: red;
}

input[type=checkbox] {
    width : 100px;
    height: 100px;
}</pre>

<p>这里是不同的浏览器的处理方式：</p>

<table>
 <thead>
  <tr>
   <th scope="col">浏览器</th>
   <th scope="col">视图</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Firefox 57 (Mac OSX)</td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/15671/firefox-mac-checkbox.png"></td>
  </tr>
  <tr>
   <td>Firefox 57 (Windows 10)</td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/15691/firefox-windows-checkbox.png"></td>
  </tr>
  <tr>
   <td>Chrome 63 (Mac OSX)</td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/15676/chrome-mac-checkbox.png"></td>
  </tr>
  <tr>
   <td>Chrome 63 (Windows 10)</td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/15681/chrome-windows-checkbox.png"></td>
  </tr>
  <tr>
   <td>Opera 49 (Mac OSX)</td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/15701/opera-mac-checkbox.png"></td>
  </tr>
  <tr>
   <td>Internet Explorer 11 (Windows 10)</td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/15696/ie11-checkbox.png"></td>
  </tr>
  <tr>
   <td>Edge 16 (Windows 10)</td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/15686/edge-checkbox.png"></td>
  </tr>
 </tbody>
</table>

<h4 id="更复杂的例子">更复杂的例子</h4>

<p>由于Opera和Internet Explorer没有像{{cssxref("-webkit-appearance")}}或{{cssxref("-moz-appearance")}}这样的特性，使用它们是不合适的。幸运的是，CSS有足够多的表现方式可以找到解决方法。让我们做一个很普通的例子：</p>

<pre class="brush: html">&lt;form&gt;
  &lt;fieldset&gt;
    &lt;p&gt;
      &lt;input type="checkbox" id="first" name="fruit-1" value="cherry"&gt;
      &lt;label for="first"&gt;I like cherry&lt;/label&gt;
    &lt;/p&gt;
    &lt;p&gt;
      &lt;input type="checkbox" id="second" name="fruit-2" value="banana" disabled&gt;
      &lt;label for="second"&gt;I can't like banana&lt;/label&gt;
    &lt;/p&gt;
    &lt;p&gt;
      &lt;input type="checkbox" id="third" name="fruit-3" value="strawberry"&gt;
      &lt;label for="third"&gt;I like strawberry&lt;/label&gt;
    &lt;/p&gt;
  &lt;/fieldset&gt;
&lt;/form&gt;</pre>

<p>带有一些基本的样式：</p>

<pre class="brush: css">body {
  font: 1em sans-serif;
}

form {
  display: inline-block;

  padding: 0;
  margin : 0;
}

fieldset {
  border : 1px solid #CCC;
  border-radius: 5px;
  margin : 0;
  padding: 1em;
}

label {
  cursor : pointer;
}

p {
  margin : 0;
}

p+p {
  margin : .5em 0 0;
}</pre>

<div class="note">
<p><strong>注：下面的内容（仅限样式化 checkbox 部分）与英文版出入极大，猜测已经是过时内容</strong></p>
</div>

<p>现在，让我们设计一个定制复选框的样式</p>

<p>计划用自己的图像替换原生的复选框，首先需要准备复选框在所有状态下的图像，那些状态是：未选、已选、禁用不选、禁用已选。该图像将用作CSS精灵：</p>

<p><img alt="Check box CSS Sprite" src="/files/4173/checkbox-sprite.png" style="height: 64px; width: 16px;"></p>

<p>一开始要隐藏初始复选框。可以简单的把它们从页面视图中拿开。这里要考虑两个重要的事情：</p>

<ul>
 <li>不能用<code>display:none</code>来隐藏复选框，因为后面我们需要把复选框对用户可见。而使用<code>display:none</code>，用户不能再访问这个复选框，这就表示复选框不能选择或不选择。</li>
 <li>我们将使用CSS3选择器来实现定制的样式，为了支持旧版浏览器，可以在所有选择器前设置{{cssxref(":root")}}伪类。目前所有我们需要支持的浏览器都支持{{cssxref(":root")}}伪类，但是其他的并不能保证。这是一个过滤旧的Internet Explorer的便利方式的例子。那些旧版浏览器将看到传统的复选框，而新式的浏览器可以看到定制的复选框。</li>
</ul>

<pre class="brush: css">:root input[type=checkbox] {
  /* original check box are push outside the viexport */
  position: absolute;
  left: -1000em;
}</pre>

<p>现在加上自己的图像就可以摆脱原来的复选框了，为此，要在初始的复选框后面加上{{HTMLElement("label")}}元素，并使用它的{{cssxref(":before")}}伪元素。因此在下面章节中，要使用<a href="/en-US/docs/CSS/Attribute_selectors" title="/en-US/docs/CSS/Attribute_selectors">selector属性</a>来选择复选框，然后使用<a href="/en-US/docs/CSS/Adjacent_sibling_selectors" title="/en-US/docs/CSS/Adjacent_sibling_selectors">adjacent sibling selector</a>来选择原有复选框后面的<code>label</code>。最后，访问{{cssxref(":before")}}伪元素来设计复选框显示定制样式。</p>

<pre class="brush: css">:root input[type=checkbox] + label:before {
  content: "";
  display: inline-block;
  width  : 16px;
  height : 16px;
  margin : 0 .5em 0 0;
  background: url("https://developer.mozilla.org/files/4173/checkbox-sprite.png") no-repeat 0 0;

/* The following is used to adjust the position of
   the check boxes on the text baseline */

  vertical-align: bottom;
  position: relative;
  bottom: 2px;
}</pre>

<p>在初始复选框上使用{{cssxref(":checked")}}和{{cssxref(":disabled")}}伪类来改变定制复选框的状态。因为使用了CSS精灵，我们需要做的只是修改背景的位置。</p>

<pre class="brush: css">:root input[type=checkbox]:checked + label:before {
  background-position: 0 -16px;
}

:root input[type=checkbox]:disabled + label:before {
  background-position: 0 -32px;
}

:root input[type=checkbox]:checked:disabled + label:before {
  background-position: 0 -48px;
}</pre>

<p>最后一件（但是很重要的）事情：当用户使用键盘从一个表单小部件导航到另一个表单小部件时，每个小部件都应该被显式聚焦。因为我们隐藏了初始的复选框，我们必须自己实现这个特性，让用户知道定制复选框在表单中的位置，下列的CSS实现了它们聚焦。</p>

<pre class="brush: css">:root input[type=checkbox]:focus + label:before {
  outline: 1px dotted black;
}</pre>

<p>你可以在线查看结果：</p>

<p>{{EmbedLiveSample("A_more_complex_example", 250, 130)}}</p>

<h3 id="Dealing_with_the_select_nightmare">Dealing with the select nightmare</h3>

<p>{{HTMLElement("select")}} 元素被认为是一个 "丑陋的" 组件，因为不可能保证它在跨平台时样式化的一致性。然而，有些事情是可能的。废话少说，让我们来看一个例子：</p>

<pre class="brush: html">&lt;select&gt;
  &lt;option&gt;Cherry&lt;/option&gt;
  &lt;option&gt;Banana&lt;/option&gt;
  &lt;option&gt;Strawberry&lt;/option&gt;
&lt;/select&gt;</pre>

<pre class="brush: css">select {
  width   : 80px;
  padding : 10px;
}

option {
  padding : 5px;
  color   : red;
}</pre>

<p>下面的表格显示了在两种情况下不同浏览器的处理方式。头两列就是上面的例子。后面两列使用了其他的定制CSS，可以对小部件的外观进行更多的控制：</p>

<pre class="brush: css">select, option {
  -webkit-appearance : none; /* To gain control over the appearance on WebKit/Chromium */
  -moz-appearance : none; /* To gain control over the appearance on Gecko */

  /* To gain control over the appearance on and Trident (IE)
     Note that it also works on Gecko and has partial effects on WebKit */
  background : none;
}</pre>

<table>
 <thead>
  <tr>
   <th colspan="1" rowspan="2" scope="col">Browser</th>
   <th colspan="2" scope="col">Regular rendering</th>
   <th colspan="2" scope="col">Tweaked rendering</th>
  </tr>
  <tr>
   <th scope="col">closed</th>
   <th scope="col">open</th>
   <th scope="col">closed</th>
   <th scope="col">open</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Firefox 57 (Mac OSX)</td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/15672/firefox-mac-select-1-closed.png"></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/15673/firefox-mac-select-1-open.png"></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/15674/firefox-mac-select-2-closed.png"></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/15675/firefox-mac-select-2-open.png"></td>
  </tr>
  <tr>
   <td>Firefox 57 (Windows 10)</td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/15692/firefox-windows-select-1-closed.png"></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/15693/firefox-windows-select-1-open.png"></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/15694/firefox-windows-select-2-closed.png"></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/15695/firefox-windows-select-2-open.png"></td>
  </tr>
  <tr>
   <td>Chrome 63 (Mac OSX)</td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/15677/chrome-mac-select-1-closed.png"></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/15678/chrome-mac-select-1-open.png"></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/15684/chrome-windows-select-2-closed.png"></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/15680/chrome-mac-select-2-open.png"></td>
  </tr>
  <tr>
   <td>Chrome 63 (Windows 10)</td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/15682/chrome-windows-select-1-closed.png"></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/15683/chrome-windows-select-1-open.png"></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/15684/chrome-windows-select-2-closed.png"></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/15685/chrome-windows-select-2-open.png"></td>
  </tr>
  <tr>
   <td>Opera 49 (Mac OSX)</td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/15702/opera-mac-select-1-closed.png"></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/15703/opera-mac-select-1-open.png"></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/15704/opera-mac-select-2-closed.png"></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/15705/opera-mac-select-2-open.png"></td>
  </tr>
  <tr>
   <td>IE11 (Windows 10)</td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/15697/ie11-select-1-closed.png"></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/15698/ie11-select-1-open.png"></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/15699/ie11-select-2-closed.png"></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/15700/ie11-select-2-open.png"></td>
  </tr>
  <tr>
   <td>Edge 16 (Windows 10)</td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/15687/edge-select-1-closed.png"></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/15688/edge-select-1-open.png"></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/15689/edge-select-2-closed.png"></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/15690/edge-select-2-open.png"></td>
  </tr>
 </tbody>
</table>

<p>如你所见，计时使用了<code>-*-appearance</code>属性的帮助，任然有一些遗留的问题：</p>

<ul>
 <li>不同的操作系统和浏览器对属性{{cssxref("padding")}} 属性的处理各不相同。</li>
 <li>Internet Explorer旧版本不允许平滑样式</li>
 <li>Firefox没有实现下拉箭头的样式。</li>
 <li>如果要在下拉列表内实现{{HTMLElement("option")}}元素样式，Chrome和Opera浏览器的表现在不同的系统中是不一样的。</li>
</ul>

<p>在我们的例子中，只使用了三个CSS属性，在考虑使用更多CSS属性时，可以想象是很混乱的。正如我们看到的，CSS始终不适合用来修改这些小部件的外观，但是仍然可以用来稍微做一些事情。如果愿意的话，可以演示一下在不同操作系统和浏览器之间的区别。</p>

<p>我们也可以帮助了解在下一章节中哪个属性更合适：<a href="/en-US/docs/Properties_compatibility_table_for_forms_widgets" title="/en-US/docs/Properties_compatibility_table_for_forms_widgets">Properties compatibility table for form widgets</a></p>

<h2 id="走向更完美表单之路：有用的库和polyfills（腻子）">走向更完美表单之路：有用的库和polyfills（腻子）</h2>

<p>虽然对于复选框和单选按钮而言，CSS的表示方式足够丰富，但是对更高级的小部件来说差距仍然很大。即使可以用{{HTMLElement("select")}}元素作一些事情，但是对file小部件的样式完全没用。对于日期选择器也同样如此。</p>

<p>要实现对表单小部件的完全控制，你别无选择，只能选择依靠JavaScript。在文章<a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a>中，我们将看到具体的做法，其中还有一些非常有用的库：</p>

<ul>
 <li><a href="http://sprawsm.com/uni-form/" rel="external">Uni-form</a>是一个对采用CSS样式的表单标记实现标准化的框架，在使用jQuery时，还提供一些附加特性，但这是可选的。</li>
 <li><a href="http://formalize.me/" rel="external">Formalize</a>是对公共JavaScript框架的扩展（如jQuery, Dojo, YUI等），有助于规范和定制表单。</li>
 <li><a href="http://www.emblematiq.com/lab/niceforms/" rel="external">Niceforms</a>是一个独立的JavaScript方法，能提供web表单的完整定制。</li>
</ul>

<p>下面的库不止应用于表单，他们在处理HTML表单时是非常有趣的：</p>

<ul>
 <li><a href="http://jqueryui.com/" rel="external">jQuery UI</a>做了一些有趣的改进，可以定制象日期选择器（特别关注可访问性）这样的小部件。</li>
 <li><a href="http://twitter.github.com/bootstrap/base-css.html#forms" rel="external">Twitter Bootstrap</a>在规范表单时是非常有用的。</li>
 <li><a href="http://afarkas.github.com/webshim/demos/demos/webforms.html" rel="external">WebShim</a>是一个大型工具，可以用来处理浏览器对HTML5的支持。对web表单部分确实有用。</li>
</ul>

<p>记住，使用CSS和JavaScript是有副作用的。所以在选择使用那些库时，应该在脚本失败的情况下能回滚样式表。脚本失败的原因很多，尤其在手机应用中，因此你需要尽可能好的设计你的Web站点或应用。</p>

<h2 id="相关链接">相关链接</h2>

<p>虽然HTML表单使用CSS仍有一些黑洞，但通常也有方法绕过它们。即使没有清楚的，通用的解决方案，但新式的浏览器也提供了新的可能性。目前最好的方法是更多的学习不同浏览器支持CSS的方式，并应用于HTML表单小部件。</p>

<p>在本指南的下一章节中，我们将探讨不同的HTML表单小部件怎样很好的支持更重要的CSS属性：<a href="/en-US/docs/Properties_compatibility_table_for_forms_widgets" title="/en-US/docs/Properties_compatibility_table_for_forms_widgets">Properties compatibility table for form widgets</a>.</p>

<h2 id="相关链接_2">相关链接</h2>

<ul>
 <li><a href="http://diveintohtml5.info/forms.html" rel="external">Dive into HTML5: Forms</a></li>
 <li><a href="http://www.smashingmagazine.com/2011/06/27/useful-ideas-and-guidelines-for-good-web-form-design/" rel="external">Useful ideas and guidelines for good web form design</a></li>
</ul>

<p>{{PreviousMenuNext("Learn/HTML/Forms/Styling_HTML_forms", "Learn/HTML/Forms/Property_compatibility_table_for_form_widgets", "Learn/HTML/Forms")}}</p>

<h2 id="在本单元中">在本单元中</h2>

<ul>
 <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Your first HTML form</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li>
</ul>

<p>
 <audio class="hidden"></audio>
</p>