【HTML5+css3】学习笔记之表单元素

七、表单元素

表单元素总汇：form   表示html表单inputtextareaselectoptionoptgroup表示一组相关的option元素button  表示用来提交或重置的表单按钮（或一般按钮）  默认提交datalist 定义一组提供给用户的建议值fieldset 表示一组表单元素legend 表示fieldset元素的说明性标签label 表单元素的说明标签output 表示计算结果<form>定义表单属性action   要提交的页面method   请求方式：post和get  默认get    一般post是用表单提交的，get是用超链接提交的enctype   表示浏览器对发送给服务器的数据所采取的编码格式。有三种：                            application/x-www-form-urlencoded（默认编码，不能将文件上传到服务器）、                            mutipart/form-data（用于上传文件到服务器）                            text/plain （未规范的编码，不建议使用，不同浏览器理解不同）name  设置表单的名称，以便程序调用target  设置提交时的目标位置：_blank、_parent、_selt、_topautocomplete 设置浏览器记住输入的数据，实现自动完成表单。默认为on自动完成，如果不需要自动完成设为off。novalidate  设置是否执行客户端数据有效性检查。input元素属性autofocus   让光标聚集在某个input元素上，让用户直接输入disabled  禁用autocomplete   自动完成form  让表单外的元素和指定的表单挂钩type  namevalue   默认值label元素  给表单的某一个空间添加一个说明<label for="mima">密码：</label><input  id="mima" name="password"></input><label>电子邮件：    <input name="email" form="myform"></input>填id</label>

对表单进行编组 属性： name form 与表单挂钩 disabled 禁用分组内的表单 分组说明标签 账号、密码

<button>元素属性type                submit  默认                reset  重置                button  普通按钮

form 指定按钮关联的表单
formaction 覆盖form元素的action属性
formenctype 覆盖from元素的enctype属性
formmethod 覆盖form元素的method属性
formtarget 覆盖form元素的target属性
formnovalidate 覆盖form元素的novalidate属性

元素的type属性
text
password
search 搜索框，在某些浏览器键入内容会出现叉标记取消
submit、reset、button
number、range 只能输入数值的框；只能输入在一个数值范围的框
checkbox、radio 复选框，用户勾选框，单选框，
image、color 生成一个图片按钮，颜色代码按钮
email、tel、url 生成一个检测电子邮件、号码、网址的文本框
date、month、time、week、datetime、datetime-local 获取日期和时间
hidden
file

type为text的额外属性
list：指定为文本框提供建议值的datalist元素，其值为datalist元素的id值。
maxlength 设置文本框的最大字符长度
pattern 用于输入验证的正则表达式
placeholder 输入字符的提示
readonly 文本框处于只读状态
disabled
size 文本框的宽度
value 文本框的初始值
required 表明用户必须输入一个值，否则无法通过输入验证

<input type="text" list="abc"><datalist  id="abc">    <option value="1">苹果</option>    <option value="2">橘子</option>    <option value="3" label="香蕉"></option>    <option value="桃子"></option></datalist>

type为password基本与上面一样

type为number、range
属性
list
min 可接受的最小值
max 可接受的最大值
readonly
required
step 上下调节至的步长
value 初始值

type为date系列 很多浏览器还不支持 建议使用jQuery插件
type：date
type：month
type：time
type：datetime
type：datetime-local

同样可以设置以上属性

type为color 实现文本框获取颜色的功能

type为radio和checkbox
属性
name
value
checked
required

type为submit、reset、button
如果是submit时，有与button元素一样的额外属性

type为image是

图片提交按钮
有与button元素一样的额外属性

type为email、tel、url时
tel很多浏览器不支持

type为hidden

type为file
属性
accept 指定接受的MIME类型
required

其他元素

select元素
optgroup 对select元素进行编组
option select元素中的项
textarea 生成多行文本框
output 表示计算结果

select元素
属性
name
disabled
form
size 设置下拉列表的高度 可以放几个
multiple 是否可以多选
autofocus 获取焦点
required

option属性
selected

textarea元素
属性：
name
form
readonly
disabled
maxlength
autofocus
placeholder 提示信息
rows 设置行数
cols 设置列数
wrap 设置提交时是否插入换行符，有soft和hard两种
required

output元素

x

输入验证：   还是要借助jquery等前端验证requiredminmax使用正则表达式<form>    <input type="text"  placeholder="请输入区号+座机"  pattern="^[\d]{2-4}\-[\d]{6-8}$"></input>    <button>提交</button></form>禁止表单验证： <form action=""  novalidate >