HTML列表标签

普通按钮
input type="button"value="效验">

（1） 点击按钮，没有任何反应。

（2）Value属性：value对应的值按键上显示的文字

图片按钮

<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分别定义单元格跨行的行数,跨列的烈数