html5中表格的各种属性以及应用详细介绍

第七章 表格的应用

1   认识表格

1、 表格的构成：表单控件、提示信息、表单域

2、 创建表单：<form>  </form>中的所有内容都会被提交给服务器

<form  action=”url地址”  method=”提交方式”  name=”表单名称”>

各种表单控件

</form>

 

2   表单属性

1、 action属性：用于指定接收并处理表单数据的服务器程序的url地址

（可以说绝对路径或相对路径，还可以是e-mail）

2、 method属性：用于设置表单的提交方式

1)      get：一个传输步骤中发送所有的表单数据

2)      post：按分段的方法将数据发送到服务器

3、 name：用于指定表单的名称，以区分一个页面的多个表单

4、 autocomplete属性：用于指定表单是否自动完成功能。即显示一个历史记录的下拉表单

on：有自动完成功能           off：无自动完成功能

5、 novalidate属性：指在提交表单时取消对表单的有效检查

ture：取消检查          false：开启检查（默认）

 

3  input元素及属性

1、 type属性

属性	属性值	描述
type	text	单行文本输入框
	password	密码输入框
	radio	单选按钮
	checkbox	多选按钮
	button	普通按钮
	submit	提交按钮
	reset	重置按钮
	image	图片形式的提交按钮
	hidden	隐藏域
	file	文件域
	email	E-mail地址输入框
	url	URL地址输入框
	number	数值的输入框
	range	一定范围内数字值的输入框
	Date  pickers (data,month,week,time,datetime,datetime-local) 取括号内属性值	日期和时间内的输入框
	search	搜索域
	color	颜色输入类型
	tel	电话号码输入类型

属性	属性值	描述
name	自定义	控件名称
value	自定义	input控件中的默认值
size	正整数	input在页面中显示的宽度
readonly	readonly	该控件内容为只读（不可编辑）
disabled	disabled	第一场加载页面禁用该控件
checked	checked	定义选择控件默认被选中的项
maxslength	正整数	控件允许输入的最多字符数
autocomplete	on/of	是否自动完成表格字段内容
autofocus	ture/false/ autofocus	页面加载后是否自动获取焦点
form	form元素的id	设定字段隶属哪一个表格
list	datalist元素的id	字段的候选数据值列表
multiple	ture/false/ multiple	输入框是否可以输入多个值
max、min和step	数值	允许输入的最大值、最小值、间隔
pattern	字符串	输入内容是否与定义的正则表达式匹配
placeholder	字符串	为input类型的输入框提供一种提示
required	required	规定输入框填写的内容不能为空

 

2、input的其他属性

 

 

4  其他内容表单元素

1、 textarea元素：创建多行文本输入框

<textarea  cols=”每行中的字符数”  rows=”显示的行数”>

           文本内容

</textarea>

可选属性：name（控件名称）、readonly（只读）、disabled（第一次加载禁止该控件，显示为灰色）

2、 select元素：下拉选择菜单

<select >

           <option>选项1</option>

<option>选项1</option>

<option>选项1</option>

………

</select>

标记名	常用属性	描述
<select>	size	下拉菜单可见选项数
	multiple	multiple=” multiple”可以多选
<option>	selected	selected=” selected”默认选中项

<optgroup>……</optgroup>在select下，option上具有分组效果

 

<select>

<optgroup>

         <option>选项1</option>

<option>选项1</option>

</optgroup>

</select>

3、 detalist属性：用于定义输入框的选项列表，列表通过datalist内的option元素创建。与前面的list匹配。

4、 keygen元素：用于表单额秘钥生成器，能够使用户验证更加安全、可靠

5、 output元素：用于不同类型的输出，可以在浏览器中显示计算结果或者脚本输出