HTML 按钮
- 按钮有两种创建方法，使用
<button>标签的方法较为常见
| 方法 |
button |
input |
| 示例 |
<button type="submit">提交</button> |
<input type="button" value="提交"> |
| 属性 |
意义 |
| name |
按钮名称 |
| type |
按钮类型 |
| value |
按钮初始值 |
| form |
将按钮与表单绑定 |
| formaction |
覆盖表单的 action 属性 |
| formmethod |
覆盖表单的 method 属性 |
| formtarget |
覆盖表单的 target 属性 |
<!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> <h3>登录表单</h3> <form action="" method="POST"> <section> <label for="email">邮箱:</label> <input type="email" name="email" id="email" required autofocus placeholder="请输入邮箱" /> </section> <section> <label for="passwore">密码:</label> <input type="password" name="password" id="password" required placeholder="请输入密码" /> </section> <button formaction="post.php" formmethod="post" formtarget="_blank"> 登录 </button> <button formaction="register.php" formmethod="post" formtarget="_blank"> 注册 </button> </form> </body></html>
点击预览
下拉列表
<!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="class" id="class"> <optgroup label="文科"> <option value="zheng">政治</option> <option value="li" selected>历史</option> <option value="di">地理</option> </optgroup> <optgroup label="理科"> <option value="wu">物理</option> <option value="hua">化学</option> <option value="sheng">生物</option> </optgroup> </select> </form> </body></html>
点击预览
文本域
- 文本域使用
<textarea>标签生成 - 文本域的常用属性
| 属性 |
含义 |
| name |
名称 |
| id |
id |
| rows |
文本域列数 |
| cols |
文本域行数 |
| minlength |
最短输入长度 |
| maxlength |
最长输入长度 |
| placeholder |
预留信息 |
| readonly |
文本域只读 |
<!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="common"> <label for="replay">文本域</label> <textarea name="replay" id="replay" cols="30" rows="10" minlength="10" maxlength="50" placeholder="不超过50字" ></textarea> <button type="submit">提交</button> </form> </body></html>
点击预览
表单域
- 表单域使用
<fieldset>标签生成，用于将表单元素分组 - 代码示例
<!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> <h3>个人信息表</h3> <form action=""> <fieldset> <legend>必填信息</legend> <section> <label for="name">姓名:</label> <input type="text" required placeholder="请输入姓名" name="name" id="name" autofocus /> <label for="sex">性别:</label> <input type="radio" name="sex" id="male" value="male" /> <label for="male">男</label> <input type="radio" name="sex" id="female" value="female" /> <label for="female">女</label> <br /> <label for="idcard">证件类型</label> <select name="idcard" id="idcard"> <option value="sfz">身份证</option> <option value="jlz">外国人居留证</option> <option value="gatjzz">港澳台居住证</option> </select> <label for="idnumber">证件号码:</label> <input type="text" name="idnumber" id="number" required placeholder="请输入证件号码" /> </section> </fieldset> <fieldset> <legend>选填信息</legend> <label for="introduce">自我介绍:</label> <textarea style="display: block; resize: none;" name="introduce" id="introduce" cols="54" rows="10" maxlength="300" placeholder="不超过300字" ></textarea> </fieldset> <button>提交</button> </form> </body></html>
点击预览
