一个完整的表单由 表单控件、提示信息和表单域 三个部分组成
表单域:容器
表单控件:
创建表单
| 基本语法 | 各种表单控件 #action可以是路径也可以是邮箱地址 #method有两种:get和post; get表示提交的数据只显示在浏览器的地址栏,保密性差,有数据量的限制;post保密性好,无限制数据量。 |
autocomplete属性:实现保存历史记录
| 表单有自动完成功能 | on |
| 表单无自动完成功能 | off |
| 文本框 | |
| 密码框 | |
| 提交按钮 | |
| 该属性表示该控件必须输入值, 否则无法成功提交表单 | required |
| 单行文本框 | type=“text” |
| 最大输入字符 | maxlegth=“6” |
| 文本框字符容量 | size=20 |
| 设置默认内容,可手动删除 设置默认文本,但不能删除 | value=“默认内容” placeholder=“文本” |
| 单选按钮 | type=“radio” name=“需一样” |
| 默认选中状态 | checked=checked |
| 复选框 | type=“checkbox” |
| 普通按钮 | type=“button” value=“普通按钮” |
| 提交按钮 | type=“submit” value=“提交按钮” |
| 重置按钮 | type=“reset” value=“重置按钮” |
| 点击按钮弹出对话框 | οnclick=“alert(“文本”)” |
| 图像域 | type=“image” src=“图片路径” width=“宽度” height=“高度” |
| 隐藏域 | type=“hidden” |
| 邮件、邮箱 | type=“email” |
| 提取url网址域名 | type=“url” 例:http://www.baidu.com |
| 颜色选择器 | type="color" |
| 数值域 | type="number" min="-10" max="10" step="2" 最小值:min 最大值:max 步长:step |
| 数值域滑动条 | type="range" min="-10" max="10" step="2" |
| 日期选择器 | type="date" date 日、月、年 month 月、年 week 周、年 time 时、分 datetime 时、分、日、月、年(UTC世界时间) datetime-local 时、分、日、月、年(本地时间) |
| 搜索框 | type="search" |
| 点击提示文本也可选中选项 | 1、标签: 2、 m |
| 占位符 | placeholder=“文本” ##设置默认文本,但不能删除 |
| 文件域(多行文本框) | rows属性设置文本区的可见行数,即文本域高度 cols属性设置文本区内的可见列数,即文本域宽度 wrap属性文本区的换行模式,属性可选:soft不换行、hard 换行 |
1.增强鼠标的可用性
2.自动将焦点转移到与该标注相关的表单元素上
| 语法 |
下拉列表 select
| 下拉列表 select | select 标签表示下拉列表 option 标记插入列表项,该标记不能独立使用,必须在select标记中使用,是一套组合标记 "name" 属性定义该控件的名称 "option" 标记中的value属性定义与选项相关联的值 |
| 例如 | |
| 列表项(和select组合使用) | |
| 规定下拉列表中可见的选项的数目 | |
| 可多选( 多选时按住CTRL即可多选 ) | |
| 分组标签 需包在select下 | |
| 数据列表 其中input中的list需要与datalist中的id绑定 | |
| 只读(在控件中添加该属性则不可修改) | readonly |
| 必填项 | required |
| 控件禁用 | disabled |
| 自动获取焦点 打开网页自动选中 | autofocus |