表单相关标签表单标签<form>输入框 inputinput type类型">input type类型input属性">input属性select下拉列表datalist 可输入下拉列表output 显示计算结果 表单相关标签 定义一个 HTML 表单，用于用户输入。 定义一个输入控件 </a></td> <td>定义多行的文本输入控件。</td> </tr> <tr> <td><a rel="nofollow" href="https://www.runoob.com/tags/tag-button.html"><button></a></td> <td>定义按钮。</td> </tr> <tr> <td><a rel="nofollow" href="https://www.runoob.com/tags/tag-select.html"><select></a></td> <td>定义选择列表（下拉列表）。</td> </tr> <tr> <td><a rel="nofollow" href="https://www.runoob.com/tags/tag-optgroup.html"><optgroup></a></td> <td>定义选择列表中相关选项的组合。 （将option分组）</td> </tr> <tr> <td><a rel="nofollow" href="https://www.runoob.com/tags/tag-option.html"><option></a></td> <td>定义选择列表中的选项。</td> </tr> <tr> <td><a rel="nofollow" href="https://www.runoob.com/tags/tag-label.html"><label></a></td> <td>定义 input 元素的标注。</td> </tr> <tr> <td><a rel="nofollow" href="https://www.runoob.com/tags/tag-fieldset.html"><fieldset></a></td> <td>定义围绕表单中元素的边框。</td> </tr> <tr> <td><a rel="nofollow" href="https://www.runoob.com/tags/tag-legend.html"><legend></a></td> <td>定义 fieldset 元素的标题。</td> </tr> <tr> <td><a rel="nofollow" href="https://www.runoob.com/tags/tag-datalist.html"><datalist></a><strong>New</strong></td> <td>规定了 input 元素可能的选项列表。</td> </tr> <tr> <td><a rel="nofollow" href="https://www.runoob.com/tags/tag-keygen.html"><keygen></a><strong>New</strong></td> <td>规定用于表单的密钥对生成器字段。</td> </tr> <tr> <td><a rel="nofollow" href="https://www.runoob.com/tags/tag-output.html"><output></a><strong>New</strong></td> <td>定义一个计算的结果</td> </tr> </tbody> </table> <p><a name="P2eph"></a></p> <h1 id="fpn2u5"><a name="fpn2u5" class="reference-link"></a><span class="header-link octicon octicon-link"></span>表单标签<code><form></code></h1><p><code><form></form></code>表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。<br /><code><form method="传送方式" action="服务器文件"></code><br /><code>action</code>，浏览者输入的数据被传送到的地方<br /><code>method</code>，数据传送的方式 <a name="Ktr3q"></a></p> <h1 id="1tjrv9"><a name="1tjrv9" class="reference-link"></a><span class="header-link octicon octicon-link"></span>输入框 input</h1><p><code>name</code>：为文本框命名，用于提交表单，后台接收数据用。<br /><code>value</code>：为文本输入框设置默认值。<br /><code>type</code>：通过定义不同的<code>type</code>类型，<code>input</code>的功能有所不同。 <a name="I91LH"></a></p> <h2 id="dxbbw6"><a name="dxbbw6" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a rel="nofollow" href="https://www.w3school.com.cn/html/html_form_input_types.asp">input type类型</a></h2><pre><code>text 单行文本输入框 password 密码输入框（密码显示为***) radio 单选框 （checked属性用于显示选中状态） checkbox 复选框（checked属性用于显示选中状态） file 上传文件 button 普通按钮 reset 重置按钮（点击按钮，会触发form表单的reset事件） submit 提交按钮（点击按钮，会吃饭form表单的submit事件） email 专门用于输入 e-mail url 专门用于输入 url number 专门用于number range 显示为滑动条，用于输入一定范围内的值 date 选取日期和时间（还包含：month、week、time、datetime、datetime-local） color 选取颜色 </code></pre><p>HTML5 增加的多个新的输入类型：</p> <ul> <li>color</li><li>date</li><li>datetime</li><li>datetime-local</li><li>email</li><li>month</li><li>number</li><li>range</li><li>search</li><li>tel</li><li>time</li><li>url</li><li>week</li></ul> <p><a name="I3DJc"></a></p> <h2 id="en9cq5"><a name="en9cq5" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a rel="nofollow" href="https://www.w3school.com.cn/html/html_form_attributes.asp">input属性</a></h2><table> <thead> <tr> <th>属性名</th> <th>描述</th> <th>值/demo</th> </tr> </thead> <tbody> <tr> <td>value</td> <td>value 属性规定输入字段的初始值</td> <td>value=”John”</td> </tr> <tr> <td>readonly</td> <td>readonly 属性规定输入字段为只读（不能修改）readonly 属性不需要值。它等同于 readonly=”readonly”</td> <td>readonly</td> </tr> <tr> <td>disabled</td> <td>disabled 属性规定输入字段是禁用的。<br />被禁用的元素是<strong>不可用和不可点击</strong>的。<br />被禁用的元素<strong>不会被提交</strong>。<br />disabled 属性不需要值。它等同于 disabled=”disabled”。</td> <td>disabled</td> </tr> <tr> <td><em>size</em></td> <td><em>size</em> 属性规定输入框的尺寸</td> <td>size=”40”</td> </tr> <tr> <td>maxlength</td> <td>maxlength 属性规定输入字段允许的最大长度：</td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </tbody> </table> <p><a name="PYyq3"></a></p> <h3 id="7dk31f"><a name="7dk31f" class="reference-link"></a><span class="header-link octicon octicon-link"></span> </h3><p>HTML5 为 <input> 增加了如下属性：</p> <ul> <li>autocomplete</li><li>autofocus</li><li>form</li><li>formaction</li><li>formenctype</li><li>formmethod</li><li>formnovalidate</li><li>formtarget</li><li>height 和 width</li><li>list</li><li>min 和 max</li><li>multiple</li><li>pattern (regexp)</li><li>placeholder</li><li>required</li><li>step</li></ul> <p>并为 <form> 增加如下属性：</p> <ul> <li>autocomplete</li><li>novalidate</li></ul> <p><a name="G3PA9"></a></p> <h3 id="9otl6e"><a name="9otl6e" class="reference-link"></a><span class="header-link octicon octicon-link"></span>select下拉列表</h3><p><img src="https://cdn.nlark.com/yuque/0/2020/png/303665/1583761887224-d27048dd-f82f-4e7f-bed3-0a6406b13958.png#align=left&display=inline&height=290&originHeight=579&originWidth=1263&size=49610&status=done&style=none&width=631.5" alt="image.png"> <a name="zIMhW"></a></p> <h3 id="fhackh"><a name="fhackh" class="reference-link"></a><span class="header-link octicon octicon-link"></span>datalist 可输入下拉列表</h3><pre><code class="lang-html"><form action="/demo/demo_form.asp"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit"> </form> <p><b>注释：</b>Safari 或 IE9（以及更早的版本）不支持 datalist 标签。</p> </code></pre> <p><a name="cdMCb"></a></p> <h3 id="9ywtre"><a name="9ywtre" class="reference-link"></a><span class="header-link octicon octicon-link"></span> </h3><p><a name="dS4Y9"></a></p> <h3 id="6ol3tb"><a name="6ol3tb" class="reference-link"></a><span class="header-link octicon octicon-link"></span>output 显示计算结果</h3><pre><code class="lang-html"><form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" value="50">100 +<input type="number" id="b" value="50"> =<output name="x" for="a b"></output> </form> </code></pre>
