| 属性 |
描述 |
| type |
值为 submit 是提交按钮；值为 button 是可点击按钮；值为 reset 是重置按钮 |
| value |
初始指定值 |
| disabled |
禁用按钮 |
| formaction |
可强制设置 form 的 action 属性值 |
| formmethod |
可强制设置 form 的 method 属性值 即访问方式 |
| formtarget |
可强制设置表单提交新窗口打开 |
| form |
按钮加这个属性可在表单外，通过表单 ID 绑定表单，随表单一起提交到服务器 |
<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <form action="login.php" id="myform" method="GET"> <section> <label for="username">账号:</label ><input type="text" name="username" id="username" /> </section> <section> <label for="password">密码:</label ><input type="password" name="password" id="password" /> </section> <button type="submit">登录</button> <button type="reset" form="myform">重置</button> </form> </body></html>
2. 下拉框
| 标签/属性 |
描述 |
<select>...</select> |
定义一个下拉框 |
<option>...</option> |
定义一个下拉框的表项值 |
<optgroup>...</optgroup> |
对下拉框表项值进行分组 |
size="10" |
作用在 select 标签中，意思是展示多少个表项 |
label="xx" |
作用在 optgroup 标签中，意思是对分组进行命名 |
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>下拉框</title> </head> <body> <form action=""> <select name="" id="" size="10"> <optgroup label="省份"> <option value="">广东</option> <option value="">湖北</option> <option value="">北京</option> <option value="">上海</option> </optgroup> <optgroup label="市级"> <option value="">武汉</option> <option value="">广州</option> <option value="">合肥</option> <option value="">宁波</option> </optgroup> </select> </form> </body></html>
3. 多行文本域
| 标签/属性 |
描述 |
<textarea>...</textarea> |
定义一个文本域 |
cols |
文本域宽度 |
rows |
文本域高度 |
form |
绑定表单 |
minlength |
限制最小长度 |
maxlength |
限制最大长度 |
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>文本域</title> </head> <body> <form action="" id="myform"></form> <textarea name="myformtext" id="myformtext" cols="60" rows="10" minlength="6" maxlength="100" form="myform" ></textarea> </body></html>
4.0 表单分组
| 标签/属性 |
描述 |
<fieldset>...</fieldset> |
定义一个表单分组 |
<legend>...</legend> |
定义一个表单分组的名称 |
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>表单分组</title> </head> <body> <form action=""> <fieldset> <legend>账户信息</legend> <section> <label for="">账号：</label> <input type="text" id="username" /> </section> <section> <label for="">密码：</label> <input type="password" id="password" /> </section> </fieldset> <fieldset> <legend>其他信息</legend> <section> <label for="">邮箱：</label> <input type="email" id="email" /> </section> <section> <label for="">电话：</label> <input type="tel" id="tel" /> </section> </fieldset> </form> </body></html>
总结
