写在前面
Hello大家好， 我是【麟-小白】，一位软件工程专业的学生，喜好计算机知识。希望大家能够一起学习进步呀！本人是一名在读大学生，专业水平有限，如发现错误或不足之处，请多多指正！谢谢大家！！！
如果小哥哥小姐姐们对我的文章感兴趣，请不要吝啬你们的小手，多多点赞加关注呀！❤❤❤ 爱你们！！！
目录
【往期回顾】
【其他系列】
1. 表单
1.1 基本结构
- 概念：一个包含交互的区域，用于收集用户提供的数据。
- 简单梳理：
- 在本小节，我们先记住表单的整体形式，稍后会对表单控件进行详细讲解。
示例代码：<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>表单_基本结构</title> </head> <body> <form action="https://www.baidu.com/s"> <input type="text" name="wd"> <button>去百度搜索</button> </form> <hr> <form action="https://search.jd.com/search" target="_blank" method="get"> <input type="text" name="keyword"> <button>去京东搜索</button> </form> <hr> <a href="https://search.jd.com/search?keyword=手机">搜索手机</a> </body> </html>
1.2 常用表单控件
① 文本输入框
<input type="text">
- 常用属性如下：
- name 属性：数据的名称。
- value 属性：输入框的默认输入值。
- maxlength 属性：输入框最大可输入长度。
② 密码输入框
<input type="password">
- 常用属性如下：
- name 属性：数据的名称。
- value 属性：输入框的默认输入值（一般不用，无意义）。
- maxlength 属性：输入框最大可输入长度。
③ 单选框<input type="radio" name="sex" value="female">女 <input type="radio" name="sex" value="male">男
- 常用属性如下：
- name 属性：数据的名称，注意：想要单选效果，多个 radio 的 name 属性值要保持一致。
- value 属性：提交的数据值。
- checked 属性：让该单选按钮默认选中。
④ 复选框<input type="checkbox" name="hobby" value="smoke">抽烟 <input type="checkbox" name="hobby" value="drink">喝酒 <input type="checkbox" name="hobby" value="perm">烫头
- 常用属性如下：：
- name 属性：数据的名称。
- value 属性：提交的数据值。
- checked 属性：让该复选框默认选中。
⑤ 隐藏域<input type="hidden" name="tag" value="100">
- 用户不可见的一个输入区域，作用是：
- 提交表单的时候，携带一些固定的数据。
- name 属性：指定数据的名称。
- value 属性：指定的是真正提交的数据。
⑥ 提交按钮
<input type="submit" value="点我提交表单"> <button>点我提交表单</button>
- 注意：
- button 标签 type 属性的默认值是 submit 。
- button 不要指定 name 属性
- input 标签编写的按钮，使用 value 属性指定按钮文字。
⑦ 重置按钮
<input type="reset" value="点我重置"> <button type="reset">点我重置</button>
- 注意点：
- button 不要指定 name 属性
- input 标签编写的按钮，使用 value 属性指定按钮文字。
⑧ 普通按钮<input type="button" value="普通按钮"> <button type="button">普通按钮</button>
- 注意点：
- 普通按钮的 type 值为 button ，若不写 type 值是 submit 会引起表单的提交。
⑨文本域<textarea name="msg" rows="22" cols="3">我是文本域</textarea>
- 常用属性如下：
- rows 属性：指定默认显示的行数，会影响文本域的高度。
- cols 属性：指定默认显示的列数，会影响文本域的宽度。
- 不能编写 type 属性，其他属性，与普通文本输入框一致。
⑩下拉框<select name="from"> <option value="黑">黑龙江</option> <option value="辽">辽宁</option> <option value="吉">吉林</option> <option value="粤" selected>广东</option> </select>
- 常用属性及注意事项：
- name 属性：指定数据的名称。
- option 标签设置 value 属性， 如果没有 value 属性，提交的数据是 option 中间的文字；如果设置了 value 属性，提交的数据就是 value 的值（建议设置 value 属性）
- option 标签设置了 selected 属性，表示默认选中。
演示代码：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>表单_常用控件</title> </head> <body> <form action="https://search.jd.com/search"> 账户： <input type="text" name="account" value="zhangxianglin" maxlength="16"> <br> 密码： <input type="password" name="psw" value="" maxlength="8"> <br> 性别： <input type="radio" name="gender" value="fale">男 <input type="radio" name="gender" value="female">女 <br> 爱好： <input type="checkbox" name="hobby" value="computer game">玩游戏 <input type="checkbox" name="hobby" value="shopping" checked>购物 <input type="checkbox" name="hobby" value="play football">踢足球 <input type="checkbox" name="hobby" value="watch">看电影 <br> 其他： <textarea name="other" rols="30" rows="10"></textarea> <br> 籍贯： <select name="place"> <option value="赣" selected>江西</option> <option value="湘">湖南</option> <option value="粤">广东</option> <option value="桂">广西</option> <option value="皖">安徽</option> </select> <input type="hidden" name="from" value="toutiao"> <br> <button type="submit">确认</button> <input type="submit" value="确认"> <button type="reset">重置</button> <input type="reset" value="重置"> <button type="button">普通按钮</button> <input type="button" value="普通按钮"> </form> </body> </html>
1.3 禁用表单控件
- 给表单控件的标签设置 disabled 既可禁用表单控件。
- input 、 textarea 、 button 、 select 、 option 都可以设置 disabled 属性
1.4 label 标签
- label 标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。两种与 label 关联方式如下：
- 让 label 标签的 for 属性的值等于表单控件的 id 。
- 把表单控件套在 label 标签的里面。
1.5 fieldset 与 legend 的使用（了解）
- fieldset 可以为表单控件分组、 legend 标签是分组的标题。
演示代码：
<fieldset> <legend>主要信息</legend> <label for="zhanghu">账户：</label> <input id="zhanghu" type="text" name="account" maxlength="10"><br> <label> 密码： <input id="mima" type="password" name="pwd" maxlength="6"> </label> <br> 性别： <input type="radio" name="gender" value="male" id="nan"> <label for="nan">男</label> <label> <input type="radio" name="gender" value="female" id="nv">女 </label> </fieldset>
1.6 表单总结
结语
本人会持续更新文章的哦！希望大家一键三连，你们的鼓励就是作者不断更新的动力
