4.12文件选择框按钮
<form> 选择你的头像<input type="file" accept="application/pdf"> </form>
Type属性，file。
设置属性，选择文件类型，accept，如img/gif，全部img类型则输入img/*
程序application/
.xlsx，.docx。直接给定一个文件的后缀
上传文件需要指定表单的属性enctype
<form enctype="multipart/form-data">
4.13下拉列表
下拉列表的好处：
节省页面的空间，是页面更加简洁
方便输入
规范输入
<form action="result2.html" method="get"> 你的省份 <select name="province"> <option value="36">江西</option> <option value="41">河南</option> <option value="33">浙江</option> <option value="32">江苏</option> </select> <input type="submit" value="提交"/> </form>
<select>标签定义一个下拉列表
<optin>标签定义了下拉列表的一个选项
<select>标签的name属性定义了提交的参数名
<option>标签的内容定义了该选项显示的文本，value属性定义了选择该选项时传递的参数值
<option>标签selected属性，改变下拉菜单的默认选项
选择浙江提交
http://localhost:63342/HTML/学习/第4章/result2.html?province=33
<select name="color" multiple> <option value="red">红色</option> <option value="blue">蓝色</option> <option value="green">绿色</option> <option value="yellow">黄色</option> <option value="black">黑色</option> </select>
<select>标签的multiple 定义为多选的下拉菜单
http://localhost:63342/HTML/学习/第4章/result2.html?province=36&color=red&color=green
<select>标签的size属性定义了下拉列表框显示的选项个数，当小于实际选项个数时，会自动增加一个滚动条
ctrl+alt+l快速格式排版的快捷键
选择你想要的汽车品牌： <select> <optgroup label="国产车"> <option value="红旗">红旗</option> <option value="byd">比亚迪</option> <option value="奇瑞">奇瑞</option> </optgroup> <optgroup label="德系车"> <option value="benz">奔驰</option> <option value="bmw">宝马</option> <option value="大众">大众</option> </optgroup> <optgroup label="日系车" disabled> <option value="丰田">丰田</option> <option value="本田">本田</option> <option value="三菱">三菱</option> </optgroup> </select>
<optgroup>分组属性，label属性定义显示的文字，disabled设置分组不能用
4.14文本区域
<textarer>标签方便用户输入多文本的信息
rows定义行数
cols定义列数
标签属性readonly设置为只读属性
标签属性disabled设置为禁用，禁用属性比只读作用要大，还禁用表单发送
name规定文本区域的名字
相比于<input type="text"/>，textarer可以在查看中改变大小，当文字超出文本框会出现滚动条，可以换行
<textarea rows="10" cols="30"></textarea>
4.15带边框的表单
<fieldest>标签
当信息过多时可以给表单中的相关元素进行分组
<form> <fieldset> <legend style="color:blue">个人信息:</legend> 姓名: <input type="text" name="name"> <br/> 生日: <input type="text"> </fieldset> <fieldset> <legend>联系方式</legend> 邮箱: <input type="text"> <br/> 电话：<input type="text"> </fieldset> <br/> <fieldset><!--换行的区分，自动占用一行--> <inputtype="submit"value="提交"/> </fieldset> </form>
创建边框
<legend>定义边框的标题
4.16隐藏域
<form action="result2.html" method="get"> <input type="hidden" name="StuNo" value="150701"> 原密码：<input type="password" name="old"> <br/> 新密码：<input type="password" name="new"> <br/> <input type="submit" value="修改密码"/> </form>
Type属性hidden
作用将需要内容发送到服务器时，但不需要用户编辑和查看，可以使用隐藏域
4.17表单总结
查看http头部
F12打开调试窗口，切换到网络页（Network）
头部提供了四种数据
respones header
request header
form data
form表单的框架，内容的日期
5table
5.1表格
Table
表格列的标题thead
tr建立行，th，头部
表格主体tbody
tr td主体部分内容
表格尾部tfoot
tr td
colspan跨列
rowspan 跨行
