HTML5表单

2017-12-14  本文已影响0人  梨啊梨

<input type=>

text:在表单中输入字母、数字等内容,默认宽度为20字符

radio:单选按钮

checkbox:复选按钮

<select><option>:下拉菜单,两个配合一起使用

password:密码

submit:提交按钮

button:普通按钮

image:图像按钮

hidden:定义隐藏的输入字段

reset:重置按钮,设置单击,清楚表单中的所有数据

file:定义输入字段和浏览按钮,用于上传文件


email类型的应用

专门用于输入email地址的文本输入框,在提交表单的时候,会自动验证email输入框的值。

url类型的应用

同样,如果输入错误的网址,按提交按钮会有提示

number类型的应用

range类型应用

用于输入包含一定范围内数字值得文本框,在网页中显示为滑动条。

不支持range类型的浏览器,则会将其显示为普通的纯文本输入框



日期类型的应用

1. date类型

用于选取年月日

date

2. month类型

用于选取年、月,不能选日

month

3. week类型

用于选取年和 第几周

<input type=“week”>

week

4. time类型

选取时间,具体到小时和分钟

<input type="time">

time

5. datetime:选取时间、年月日、时间为UTC时间(国际时间)

6. datetime-local:选取时间、年月日、时间为本地时间


search类型的应用

用于输入搜索关键词的文本框,他不是普通的搜索框,而是任意网页中的任意一个搜索框

tel类型的应用

用于输入电话号码的文本框

<input type="tel">

color类型的应用

用于设置颜色的文本框

<input type="color">


新增的input属性

1. autocomplete属性

可以帮助用户在input类型的输入框中实现自动完成内容功能,(历史记录?)

某些浏览器中要打开,浏览器本身的这个功能

他有3个值:on off 空值   默认on

off状态 on状态

2. autofocus属性

在页面加载时,某表单控件自动获取焦点,这么控件是<input>标签,一个页面只能有一个autofocus属性

3.form属性

有了这个属性,可以把表单内的从属元素写在页面中的任意一个位置,然后需要为这个元素指定form属性,并设置属性值为该表单的id,这样规定了,该表单元素属于id表单。form属性适用于所有input输入类型。

他可以从属于多个表单

<input type="text" form="form1 form2 form3" />

4. 新增的表单重写属性

他们只能适用于submit和image输入类型

formaction:重写表单的action属性

formenctype:重写表单的enctype属性

formmethod:重写表单的method属性

formnovalidate:重写表单的novalidate属性

formtarget:重写表单的target属性

5. 新增的width和height属性

规定用于image类型的input标签的图像高度和宽度,只能用于image类型的<image>标签

<input type="image" width="50" height="50" />

6. 新增的list属性

list属性适用于:text search url telephone email date pickers number range color

list属性的值是需要绑定元素的id值

7. min max step属性

适用于date、pickers、number和range标签

8. multiple属性

在file类型中,只支持上传单个文件,multiple支持上传多个文件

9. pattern属性

用于验证input类型输入框中用户输入的内容,是否与自定义的正则表达式相匹配。

适用于以下类型的<input>标签: text、search、url、telephone、email和password

<input type="text" pattern="[0-9]{6}" //必须输入6位数的数字

10. placeholder属性

属性为input标签的提示功能。

适用于text、search、url、telephone、email和password

11. required属性

规定输入框填写的内容不能为空


新增的form元素

1. datalist元素

用于输入框提供一个可选的列表,该列表由datalist中的option元素创建,他也可以自行输入其他内容。

一般都需要使用输入框的list属性来引用datalist元素的id。

每一个option元素必须要有value属性。

2. keygen元素

3. output元素

用于浏览器中显示计算结果或脚本输出


新增的form属性

1. autocomplete属性

用于规定form表单中所有元素都拥有自动完成功能

2. novalidate属性

用于在提交表单时取消整个表单的验证,关闭对表单内所有元素的有效性检车。布尔值

如果只取消表单中少部分内容的验证,用formnovalidate属性就行,布尔值

上一篇 下一篇

猜你喜欢

热点阅读