3、其他表单元素3.1 textarea元素3.2 select元素3.3 datalist元素3.4 keygen元素3.5 output元素 3、其他表单元素 3.1 textarea元素基本语法：<br />文本内容<br />在上面的语法格式中，cols和rows为标记的必须属性，其中cols用来定义多行文本输入框每行中的字符数，rows用来定义多行文本输入框显示的行数，它们的取值均为正整数。<br /><textarea>元素除了cols和rows属性外，还拥有几个可选属性，分别为disabled、name和readonly。</p> <table> <thead> <tr> <th>属性</th> <th>值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_textarea_autofocus.asp">autofocus</a></td> <td>autofocus</td> <td>规定在页面加载后文本区域自动获得焦点。</td> </tr> <tr> <td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_textarea_cols.asp">cols</a></td> <td><em>number</em></td> <td>规定文本区内的可见宽度。</td> </tr> <tr> <td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_textarea_disabled.asp">disabled</a></td> <td>disabled</td> <td>规定禁用该文本区。</td> </tr> <tr> <td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_textarea_form.asp">form</a></td> <td><em>form_id</em></td> <td>规定文本区域所属的一个或多个表单。</td> </tr> <tr> <td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_textarea_maxlength.asp">maxlength</a></td> <td><em>number</em></td> <td>规定文本区域的最大字符数。</td> </tr> <tr> <td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_textarea_name.asp">name</a></td> <td><em>name_of_textarea</em></td> <td>规定文本区的名称。</td> </tr> <tr> <td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_textarea_placeholder.asp">placeholder</a></td> <td><em>text</em></td> <td>规定描述文本区域预期值的简短提示。</td> </tr> <tr> <td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_textarea_readonly.asp">readonly</a></td> <td>readonly</td> <td>规定文本区为只读。</td> </tr> <tr> <td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_textarea_required.asp">required</a></td> <td>required</td> <td>规定文本区域是必填的。</td> </tr> <tr> <td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_textarea_rows.asp">rows</a></td> <td><em>number</em></td> <td>规定文本区内的可见行数。</td> </tr> <tr> <td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_textarea_wrap.asp">wrap</a></td> <td><br />- hard<br />- soft<br /></td> <td>规定当在表单中提交时，文本区域中的文本如何换行。。</td> </tr> </tbody> </table> <p><a name="cDiKA"></a></p> <h3 id="e4ga8c"><a name="e4ga8c" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.2 select元素</h3><p>基本语法：<br /><select><br /><option>选项1</option><br /><option>选项2</option><br /><option>选项3</option><br /></select><br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633401234432-26d375d7-76d1-4961-952d-b62abc7231ad.png#clientId=u7aca6224-b34f-4&from=paste&height=346&id=u3dc1c3e4&margin=%5Bobject%20Object%5D&name=image.png&originHeight=346&originWidth=1164&originalType=binary&ratio=1&size=430491&status=done&style=none&taskId=u2c878b83-37b1-4c9a-8f2b-74a26741883&width=1164" alt="image.png"><br />功能：<br />元素用来创建下拉列表。<br />元素中的 <option> 标签定义了列表中的可用选项。</p> <pre><code class="lang-html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> 年龄： <select name="age"> <option value="18">18</option> <option value="19">19</option> <option value="20" selected="selected">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> </select> </body> </html> </code></pre> <p><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1632908167704-d1b2a122-55f9-459e-94ca-fde6c0883626.png#clientId=ud9b9aa96-b3b2-4&from=paste&id=ue828fb2c&margin=%5Bobject%20Object%5D&originHeight=513&originWidth=1920&originalType=url&ratio=1&status=done&style=none&taskId=ud1331772-6c97-48e3-b5b9-b4a58497ebe" alt=""><br />代码讲解<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1632908189784-8a9ddbba-ed92-4c9e-bb33-9b4b387239ca.png#clientId=ud9b9aa96-b3b2-4&from=paste&height=373&id=u1f15929c&margin=%5Bobject%20Object%5D&name=image.png&originHeight=373&originWidth=583&originalType=binary&ratio=1&size=27165&status=done&style=none&taskId=ud30d3336-21b2-44ff-b825-b00213f15f0&width=583" alt="image.png"> <a name="D5ols"></a></p> <h3 id="3gty2s"><a name="3gty2s" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.3 datalist元素</h3><p><datalist> 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。<br />datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。<br />请使用 input 元素的 list 属性来绑定 datalist。</p> <pre><code class="lang-html"><input id="myCar" list="cars" /> <datalist id="cars"> <option value="BMW"> <option value="Ford"> <option value="Volvo"> </datalist> </code></pre> <p><a name="Dv3o7"></a></p> <h3 id="94yq64"><a name="94yq64" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.4 keygen元素</h3><p><keygen> 标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。</p> <pre><code class="lang-html"><form action="demo_keygen.asp" method="get"> Username: <input type="text" name="usr_name" /> Encryption: <keygen name="security" /> <input type="submit" /> </form> </code></pre> <table> <thead> <tr> <th>属性</th> <th>值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_keygen_autofocus.asp">autofocus</a></td> <td>autofocus</td> <td>使 keygen 字段在页面加载时获得焦点。</td> </tr> <tr> <td>challenge</td> <td>challenge</td> <td>如果使用，则将 keygen 的值设置为在提交时询问。</td> </tr> <tr> <td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_keygen_disabled.asp">disabled</a></td> <td>disabled</td> <td>禁用 keytag 字段。</td> </tr> <tr> <td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_keygen_form.asp">form</a></td> <td><em>formname</em></td> <td>定义该 keygen 字段所属的一个或多个表单。</td> </tr> <tr> <td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_keygen_keytype.asp">keytype</a></td> <td>rsa</td> <td>定义 keytype。rsa 生成 RSA 密钥。</td> </tr> <tr> <td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_keygen_name.asp">name</a></td> <td><em>fieldname</em></td> <td>定义 keygen 元素的唯一名称。<br />name 属性用于在提交表单时搜集字段的值。</td> </tr> </tbody> </table> <p><a name="r5au7"></a></p> <h3 id="an51h1"><a name="an51h1" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.5 output元素</h3><p>output元素用于不同类型的输出，可以在浏览器中显示计算结果或脚本输出。</p> <table> <thead> <tr> <th>属性</th> <th>值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_output_for.asp">for</a></td> <td><em>element_id</em></td> <td>定义输出域相关的一个或多个元素。</td> </tr> <tr> <td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_output_form.asp">form</a></td> <td><em>form_id</em></td> <td>定义输入字段所属的一个或多个表单。</td> </tr> <tr> <td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_output_name.asp">name</a></td> <td><em>name</em></td> <td>定义对象的唯一名称。（表单提交时使用）</td> </tr> </tbody> </table>
