第七章 表格的应用
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 | 文件域 | |
| 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元素:用于不同类型的输出,可以在浏览器中显示计算结果或者脚本输出