2021/3/10–前端第4天–表单控件

划分区域：caption 表格标题 表头thead 主体部分tbody

设置标题：h1-h6 或者caption标签（部分浏览器每个表格只能一个）

form标签：功能新标签、不是结构性标签

属性：name、action（数据提交地址、method（数据提交方式、target（页面打开方式
表单中的控件：textarea文本域（属性（rows、cols、label定义标注：for属性规定label绑定哪个表单控件）
select下拉列表 input输入框 buttun 按钮

textarea；
select：（multiple设置多选、size项数、option：selected、optgroup选项组：label）；

<!-- 表单 --><form action=""><label for="email">邮箱</label><!-- 下拉框 --><!-- multiple多选 --><!-- size显示（1-7）部分更多 --><!-- option内容是文本、不允许嵌套其他标签 --><!-- <select name="" id="email" size="10" multiple> --><select name="" id="email" size="1"><optgroup label="非弹出选项"><option value="">123@qq.com</option><option value="">455@qq.com</option><option value="">1234@qq.com</option></optgroup><!-- 分组 --><!-- optgroup分组  label标注组名 --><optgroup label="弹出选项"><!-- 嵌套a标签跳转不了，借助js /用列表--><option value="">支付宝</option><option value="">邮箱</option><option value="">百度</option><option value="">微博</option><option value="">网易云</option></optgroup></select></form>

input标签（单标签：text：pattern、password等：

<form action=""><label for="username">用户名</label><!-- 1单行文本框 --><!-- pattern  --><input type="text" id="username" pattern="[0-9]{2,5}"><!-- 2密码框 --><!-- input：password + tab --><input type="password" name="" id=""><!-- 3单选框 --><label for="">性别</label><label for="man">男</label><input type="radio" name="sex" value="男" id="man"><label for="woman">女</label><input type="radio" name="sex" value="女" id="woman"><hr>  <!-- 4多选框 --><label for="">兴趣爱好</label><label for="basketball">篮球</label><input type="checkbox" name="intrest" value="篮球" id="basketball"><label for="football">足球</label><input type="checkbox" name="intrest" value="足球" id="football"><label for="pingpang">乒乓球</label><input type="checkbox" name="intrest" value="乒乓球" id="pingpang"><hr><!-- 5图片 --><!-- 点击触发提交 --><input type="image" src="../../pic/test.jpg" alt="" width="60" height="100"><hr><!-- 6文件 --><input type="file" name="" id=""><!-- 7隐藏文本 --><input type="hidden" name="color" value="red"><hr><!-- 9重置 --><input type="reset" value="重置"><!-- 10按钮提交 --><input type="submit" value="提交"></form>

button标签：

<form action=""><!-- 文本框 --><input type="text" name="username" value="hello"><input type="text"><!-- 按钮有三种类型 button\submit\reset--><button>按钮</button><!-- 提交按钮 --><button type="submit">提交</button><!-- 重置按钮 --><button type="reset">重置</button><!-- 与input比较 --><!-- 设置内容  button标签内设置，input在value中 --><button><a href="www.baidu.com">baidu</a></button><!-- input标签里面不能渲染其他东西了，button可以有a标签等其他内容 --><input type="button" value="<a href = 'www.baidu.com'></a>"></form>

P27

P28