（四）常用标签02

常用标签

表单

1.表单的作用：用于收集不同类型的用户输入，表单元素就是网页中提供用户进行输入或点击的小控件
2.表单的组成：表单域、提示信息、表单控件（或者叫表单元素）3个部分组成

表单域

1.表单域相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法 如果不定义表单域 表单中的数据就无法传送到后台服务器

提示信息

1.提示信息就是一个表单中通常用来提示用户进行填写和操作的说明性文字

表单控件

1.包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等

表单 form标签

1.from标签可以通过对应属性规定提交数据的方法和提交位置
2.属性action，指定接受并处理表单数据的服务器程序的url地址
3.属性method，用于设置表单数据的提交方式 post/get
4.属性name，自定义名称，规定表单的名称，提交给服务器时区分不同的表单

<form action='poler.php' method='post' name ='myForm'></form>

表单元素input标签

1.input标签是一个单标签，本身相当于一个特殊的文本
2.需要通过设置各种属性来实现功能
3.属性type(text,radio，password,)，type属性值的不同，决定了input 标签的形态不同
4.单行文本输入框：定义提供用户输入的单行文本的输入框，不能输入多行文字

<form action='' name='' method=''>
	<input type='text' value='这里是默认文字'>
</form>

5.密码框：type=‘password’ 密码框中的内容被做掩码处理

<form action='' name='' method=''>
	<input type='password'>
</form>

6.单选框 type=‘radio’ name属性设置选项互斥 checked属性设置默认选中项

<form action='' name='' method=''>
性别：
	<input type='radio' name='sex' checked='checked'> 男
	<input type='radio' name='sex'>女
</form>

7.复选框type=‘checkbox’ name属性定义分组 checked属性设置默认选中项

<form action='' name='' method=''>
爱好：
	<input type='checkbox' name='hobby'> 阅读
	<input type='checkbox' name='hobby'>运动
	<input type='checkbox' name='hobby' checked='checked'>旅游
</form>

8.普通按钮 type=‘button’ 没有特殊功能

<form>
	<input type='button' value='普通按钮'>
</form>

9.重置按钮 type=‘reset’ 将同一个中填写的表单内容清空，恢复成默认

<form>
	<input type='reset' value='重置按钮'>
</form>

10.提交按钮 type=‘submit’ 将填写数据提交到中指定的后台服务器，并重置清空form中的填写信息

<form>
	<input type='submit' value='提交按钮'>
</form>

11.图片按钮 type=‘image’ 默认与提交按钮的效果相同，使用的图片需要用src属性找到正确路径

<form>
	<input type='button' src='images/001.png'>
</form>

12.文件上传 type=‘file’ 利用multiple属性来实现多选

<form>
	<input type='file' value='点击上传' multiple='multiple'>
</form>

13.文本域 textarea标签 属性row设置最大行数 clos设置最大列数

<p>
	<textarea row='20' cols='30'></textarea>
</p>

14.下拉菜单 select option标签 属性selected设置默认选中项，可以使用标签对选项进行分组，设置lable属性设置组名

<select>
	<optgroup label='国内'>
		<option selected='selected'>北京</option>
		<option>上海</option>
		<option>广州</option>
		<option>深圳</option>
	</optgroup>
	<optgroup label='国外'>
		<option selected='selected'>纽约</option>
		<option>牛津</option>
		<option>东京</option>
		<option>伦敦</option>
	</optgroup>
</select>

15.label标签
作用：帮表单元素定义标记，如果将表单控件与提示内容使用label标签绑定后，当用户鼠标点击label内的提示内容时，浏览器会自动将焦点转到和标签相关的表单控件上

（1）首先设置被绑定的标签 id 属性 再将主动绑定的提示信息用lable标签包裹 设置for属性为被绑定元素的id值

<form>
	<input type='radio' name='sex' id='man'> <label for='man'>男</label>
	<input type='radio' name='sex' id='woman'> <label for='woman'>女</label>
</form>

（2）将要绑定的元素都放在label标签中

<form>
	 <label><input type='radio' name='sex'>男</label>
	<input type='radio' name='sex' id='woman'> <label for='woman'>女</label>
</form>

表格table

1.最起码有 table tr td 三个标签组成

 <table>
        <tr> 
        <td></td>
        <td></td>
        <td></td>
        </tr>
    </table>

2.table标签可以添加border边框属性 数字 像素
表格的单元格之间有默认空隙，会导致双线边框
解决办法1：设置style样式 boder-collapse:collapse 设置边框塌陷
解决办法2：设置cellspacing:0 给table一个背景色 再给td一个背景色

3.th表头 有加粗效果
4.单元格合并 左右合并colspan 上下合并rowspan

 <table border="1">
        <tr>
            <th colspan="8">******</th>
        </tr>
        <tr>
            <td>客户名称</td>
            <td></td>
            <td>订货日期</td>
            <td></td>
            <td>编号</td>
            <td colspan="3"></td>
        </tr>
        <tr>
            <td>产品名称</td>
            <td colspan="2"></td>
            <td>交货日期</td>
            <td colspan="4"></td>
        </tr>
        <tr>
            <td>订货数量</td>
            <td></td>
            <td>数量控多</td>
            <td>最多</td>
            <td></td>
            <td>最少</td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td>条形码</td>
            <td colspan="2"></td>
            <td>内容物</td>
            <td colspan="4"></td>
        </tr>
      </table>

5.表格分区
caption 表格标题
thead 表格头部 内部嵌套tr td
tbody 表格主体 内部嵌套tr td
tfoot 表格页脚 内部嵌套tr td
四个分区可以选择性的进行组合