图片按钮
<input type="image" src="login1.jpg"alt="登录">（1）作用和submit按钮是一样的。
（2）需要设置src属性的值，如果src对应得路径没有找到图片，并且有没有设置alt属性，按钮显示默认值“提交”如果设置了alt属性则显示alt的值（类似img标签）。
4.10 <button>标签 （1）内容可以是任何资源（eg:图片,段落,视频....) (2)当button标签放置在form内部,作用和submit一样. 4.11文本选择框选择你的头像<inputtype="file"accept="image/*">
选择你的头像<inputtype="file"accept="image/jpeg">
简历<inputtype="file"accept="application=”pdf">
简历<inputtype="file"accept="application=”.doc”">
Accept属性指定可选择类型
上传文件需要指定对应表单的属性
<formenctype="multipart/form-data">
下拉列表
使用下拉列表的好处:
(1) 节省页面空间.使得页面更加简洁
(2) 方便输入
你来自哪里: <selectname="province"> <optionvalue="33">浙江</option> <optionvalue="41">河南</option> <optionvalue="32">江苏</option> <optionvalue="36">江西</option> </select> <inputtype="submit"value="提交"> </form>
<select>标签定义了一个下拉列表
<option>标签定义一个选项
<select>标签的neme属性定义了提交的参数名
<option>标签的内容定义了改选项显示的文本,value属性定义该选项时传递的参数值
比方选择” 江苏”并提交
提交的参数如下,
多选可通过设置multiple属性来实现,Ctrl+单机选多个
<form action="result.html"method="get"> 你来自: <select name="colocr"multiple> <option value="red">红色</option> <option value="blue">蓝色</option> <option value="green">绿色</option> <option value="yellow">黄色</option> <option value="blac">黑色</option> </select>
传递的参数为
<select>标签的size属性定义下拉列表框显示的选项个数,当小于实际选项个数时,会自动增加一个滚动条.
格式化的快捷键:Ctrl+alt+L
<select> 你打算购买小汽车的品牌 <optgrouplabel="国产"> <optionvalue="红旗">红旗</option> <optionvalue="byd">比亚迪</option> <optionvalue="奇瑞">奇瑞</option> </optgroup> <optgrouplabel="德系"> <optionvalue="benc">奔驰</option> <optionvalue="bwm">宝马</option> </optgroup> <optgrouplabel="日系"disabled> <optionvalue="丰田">丰田</option> <optionvalue="本田">本田</option> <optionvalue="本田">本田</option> </optgroup> <inputtype="submit"value="提交"> </select>
<optgroup>的<label>属性定义分组显示文字,disabled设置该分组不能用
Textarea:标签主要是为了方便用户输入较多文字信息,rows属性指区域的行数close属性指定编辑区域的烈数
<inputtype="submit"value="提交">
当信息较多时,可以考虑按照信息内容分组,达到表达清晰的目的.
Fieldset标签提供经信息分组的一种方式.分组后每组信息默认有个边框.
同时可以使用<lengend>标签为每组指定一个标题
<form action="result.html"method="get"> <fieldset> <legend>个人信息</legend> 姓名:<inputtype="text"name="name"> <br> 性别:... <br> 年龄... </fieldset> <fieldset> <legend>学习专业</legend> 专业... </fieldset> <fieldset> <legend>地方</legend> 学校... <br> 工作单位... </fieldset> <br>
隐藏域
需要向服务器传递参数,且该参数无需要用户输入,甚至不要用户看到,可以使用隐藏域来实现,
<form action="result.html"method="get"> <input type="hidden"name="stuNo"value="201711103"> <br> 原密码:<inputtype="password"name="old"> <br> 新密码:<inputtype="password"name="old"> <br> <input type="submit"value="修改密码">
表单总结
查看http头部
F12打开调试窗口,切换到网络<notwork>
头部提供了四种数据
(1)general
(2)response
(1) request
(2)formDATA
(3) table
表格的组成部分:标题,表头,主题,表尾
<table>定义一个表格
<caption>定义表格的标题
<thead>定义表头的部分
<tbody>定义表格主题(数据)部分
<tfoot>定义表尾,一般显示汇总信息等
<tr>定义一行
<th><td>定义一个数据项(单元格),<th>一般用于表头,有加粗样式.<td>一般用于表头部分,没有加粗样式
<td>的rowspan和colspan分别定义单元格跨行的行数,跨列的烈数
