Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 按钮，下拉框，文本域，表单域元素的学习
Blogger Information
Blog 6
fans 0
comment 1
visits 4751
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
按钮，下拉框，文本域，表单域元素的学习
云猫
Original
1047 people have browsed it

1. 表单和按钮<button>

属性 描述
type 值为 submit 是提交按钮；值为 button 是可点击按钮；值为 reset 是重置按钮
value 初始指定值
disabled 禁用按钮
formaction 可强制设置 form 的 action 属性值
formmethod 可强制设置 form 的 method 属性值 即访问方式
formtarget 可强制设置表单提交新窗口打开
form 按钮加这个属性可在表单外，通过表单 ID 绑定表单，随表单一起提交到服务器
  • 示例代码
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <body>
  9.     <form action="login.php" id="myform" method="GET">
  10.       <section>
  11.         <label for="username">账号:</label
  12.         ><input type="text" name="username" id="username" />
  13.       </section>
  14.       <section>
  15.         <label for="password">密码:</label
  16.         ><input type="password" name="password" id="password" />
  17.       </section>
  18.       <button type="submit">登录</button>
  19.       <button type="reset" form="myform">重置</button>
  20.     </form>
  21.   </body>
  22. </html>

2. 下拉框

标签/属性 描述
<select>...</select> 定义一个下拉框
<option>...</option> 定义一个下拉框的表项值
<optgroup>...</optgroup> 对下拉框表项值进行分组
size="10" 作用在 select 标签中，意思是展示多少个表项
label="xx" 作用在 optgroup 标签中，意思是对分组进行命名
  • 示例代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>下拉框</title>
  7.   </head>
  8.   <body>
  9.     <form action="">
  10.       <select name="" id="" size="10">
  11.         <optgroup label="省份">
  12.           <option value="">广东</option>
  13.           <option value="">湖北</option>
  14.           <option value="">北京</option>
  15.           <option value="">上海</option>
  16.         </optgroup>
  17.         <optgroup label="市级">
  18.           <option value="">武汉</option>
  19.           <option value="">广州</option>
  20.           <option value="">合肥</option>
  21.           <option value="">宁波</option>
  22.         </optgroup>
  23.       </select>
  24.     </form>
  25.   </body>
  26. </html>

3. 多行文本域

标签/属性 描述
<textarea>...</textarea> 定义一个文本域
cols 文本域宽度
rows 文本域高度
form 绑定表单
minlength 限制最小长度
maxlength 限制最大长度
  • 示例代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>文本域</title>
  7.   </head>
  8.   <body>
  9.     <form action="" id="myform"></form>
  10.     <textarea
  11.       name="myformtext"
  12.       id="myformtext"
  13.       cols="60"
  14.       rows="10"
  15.       minlength="6"
  16.       maxlength="100"
  17.       form="myform"
  18.     ></textarea>
  19.   </body>
  20. </html>

4.0 表单分组

标签/属性 描述
<fieldset>...</fieldset> 定义一个表单分组
<legend>...</legend> 定义一个表单分组的名称
  • 示例代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>表单分组</title>
  7.   </head>
  8.   <body>
  9.     <form action="">
  10.       <fieldset>
  11.         <legend>账户信息</legend>
  12.         <section>
  13.           <label for="">账号：</label> <input type="text" id="username" />
  14.         </section>
  15.         <section>
  16.           <label for="">密码：</label> <input type="password" id="password" />
  17.         </section>
  18.       </fieldset>
  19.       <fieldset>
  20.         <legend>其他信息</legend>
  21.         <section>
  22.           <label for="">邮箱：</label> <input type="email" id="email" />
  23.         </section>
  24.         <section>
  25.           <label for="">电话：</label> <input type="tel" id="tel" />
  26.         </section>
  27.       </fieldset>
  28.     </form>
  29.   </body>
  30. </html>

总结

  • 通过本节课学习，已经基本掌握表单的常用组件知识！
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：表单中的一些属性, 你在其它地方可能从未看到过, 好好学
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post