`
liu_87663663
  • 浏览: 34468 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Html5中form表单元素和属性总结

 
阅读更多

 

1.      新增表单元素

1)         emailemail类型的输入框,在提交表单时,会验证输入的email是否为合法的email格式,多数浏览器还不能对email做出完美的判断,仅能判断是否有@符号,以及@符号前后是否有字符

2)         urlurl类型的输入框,在提交表单时,会验证输入的url是否为合法的url;多数浏览器校验时会判断输入值是否以http://开头

3)         number:只能输入数字类型的输入框,

属性

描述

max

number

规定允许的最大值

min

number

规定允许的最小值

step

number

规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)

value

number

规定默认值

 

4)         range:相当于可限定最大最小值的number输入框

5)         datepickers(date,month,week,time,datetime,datetime-local):日期时间选择器

6)         search:搜索框,显示为普通文本,具有清除功能

7)         color:点击可调用出系统颜色选取窗口

8)         datalist:规定输入域的选项列表,格式如下:

Webpage: <input type="url" list="url_list" name="link" />

<datalist id="url_list">

<option label="3" value="http://www.360.cn" />

<option label="b" value="http://www.baidu.com" />

<option label="q" value="http://www.qq.com" />

</datalist>

在需要引用datalist的输入域中增加list=”xxx”,其中xxxdataListid

9)         keygen

10)     output

2.      新增form属性

autocomplete:相当于ie里边的自动完成功能,而不是百度等搜索引擎的联想提示功能

novalidate:指定表单是否验证

3.      新增input元素属性

1)         placeholder:占位符属性(类似于hint),在输入区域为空或者不处于焦点时显示,以前只能用javascript实现

<input type="numbers" name="numbers"  placeholder="请输入有效的数字" />

[原创]Html5中form表单元素和属性总结

2)         autofocus:页面加载完毕后,输入域自动获取焦点,适用于所有input输入

<input type="text" name="user_name"  />

3)         form:规定属于域所属于的一个或者多个表单(form),属于多个form用空格分隔

<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />

4)         表单重写属性

formaction:重写表单的action属性

formenctype:重写表单的enctype属性

formmethod:重写表单的method属性

formnovalidate:重写表单的novalidate属性

formtarget:重写表单的target属性

<form action="demo_form.asp" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" />
<br />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
<br />
<input type="submit" formnovalidate="true" value="Submit without validation" />
<br />
</form>

重写这些属性,对于创建不同的提交按钮特别有用

5)         Heightwidth属性:用于input类型为image的输入框,显示图片的宽度、高度

<input type="image" src="img_submit.gif" width="99" height="99" />

 

6)         List属性:使用该属性可以使输入域显示datalist中定义的选项列表,适用于textsearchurltelephoneemaildatepickersnumberrangecolor

示例前面已经有了

7)         Minmaxstep属性:为数字(numberrange)、日期类型(datepickers)的输入域设定限制

Min:规定输入域所允许的最小值

Max:规定输入域所允许的最大值

Step:为输入域规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)

8)         Multiple属性:这个不是html5的新属性,但是其功能有所扩展,适用于emailfile这两种输入域。用于email时多个email之间用逗号分隔,用于file时一次可选择多个文件

 

9)         Novalidate:适用于formtext, search, url, telephone, email, password, date pickers, range以及 colorinput输入域,用于form时代表form提交时不做验证,用于input输入域时代表提交form时对该输入域不做验证

 

10)     Pattern:自定义正则表达式来验证表单输入项,适用于text, search, url, telephone, email 以及password

<input type="text" name="zip" id="zip" placeholder="5 digits" pattern="\d{5}" title="The zip code should consist of five numbers only">

         如上所示:将只能输入5位数字的邮编

11)     Required:标明该输入项为必填项,适用于text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file

 

分享到:
评论

相关推荐

    HTML5中form表单的新增属性.ppt

    HTML5中form表单的新增属性.ppt

    HTML5&CSS3网页制作:Input元素的其他属性.pptx

    Input元素的其他属性 ...HTML5中的form属性,可以把表单内的子元素写在页面中的任一位置,只需为这个元素指定form属性并设置属性值为该表单的id即可。 语法格式 控件类型" form="值" /&gt; 示例 list属性 户口所在地" /&gt; ...

    详解HTML5表单新增属性

    在H5中可以把form放到页面的任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了 &lt;form id=testform&gt; &lt;input type=text&gt; &lt;/form&gt; &lt;textarea...

    HTML5基础知识-HTML5表单.pptx

    HTML5基础知识端基础前WebHTML5表单1表单元素2表单标记访问控制3HTML5新的input类型文本域textField 密码域Password field 单选按钮radioButton 复选框 checkBox下拉列表selcet多行文本框textArea按钮button1表单...

    PHP用正则匹配form表单中所有元素的类型和属性值实例代码

    最近工作中遇到一个需求,需要在正则匹配页面中,所有可能存在的 form 表单的元素,可能有 input,action,select,textarea等等所有可能的元素,本文给出一个代码示例。感兴趣的朋友们可以参考学习。 实例代码如下 ...

    HTML5 表单元素

    注意:不是所有的浏览器都支持HTML5 新的表单元素,但是你可以在使用它们,即使浏览器不支持表单属性,仍然可以显示为常规的表单元素。 HTML5 元素 元素规定输入域的选项列表。 属性规定 form 或 input 域应该拥有...

    html属性参考大全

    表单(Form) 基本语法 文字和密码 复选和单选 图象坐标 隐藏表单的元素 列表框 文本区域 表格(Table) 基本语法 跨多行、多列的表元 尺寸设置 文字的对齐/布局 在页面中的对齐/布局 标题 表格进阶...

    html form表单input使用disabled后提交不能获取表单值的解决方法

    form表单输入框input设置disable属性提交后,得不到该输入框的值,解决该类问题可以参考下面两个方法: 方法一: 使用readonly带替代disabled,即把 disabled="disabled" 修改为 readonly="readonly" 二者区别: ...

    Form-Submission-Attributes-Polyfill:简单的polyfill处理旧版浏览器中的html5表单提交属性

    简单的polyfill处理旧版浏览器中的html5表单提交属性 函数必须应用于表单,即$('form')。formSubmissionAttributes(),否则它将输出警告并取消对该元素的执行。 该脚本将从表单内部或通过form =“”属性指向...

    html中关于form与表单提交操作的资料集合

    form元素的DOM接口是HTMLFormElement,继承自HTMLElement,因而它与其他的HTML元素拥有相同的默认属性,不过它自身还有几个独有的属性和方法: 属性值 说明 accept-charset 服务器能够处理的字符集,多个字符...

    关于html的表单元素详解(一)

    form 元素定义 HTML 表单。 &lt;form&gt; form elements &lt;/form&gt; Action 属性 action 属性定义在提交表单时执行的动作。 向服务器提交表单的通常做法是使用提交按钮。  通常,表单会被提交到 web 服务器上...

    formelements:向管理表单和产品属性添加 HTML5 输入类型和一些所见即所得的功能

    向管理表单和产品属性添加 HTML5 输入类型和一些所见即所得的功能 介绍 表单元素当前添加了对以下: color email number url 此外还有两种复杂类型, mediaurl和widget 。 这些功能类似于 CMS 页面上的“插入...

    HTML5新表单元素_动力节点Java学院整理

    注意:不是所有的浏览器都支持HTML5 新的表单元素,但是你可以在使用它们,即使浏览器不支持表单属性,仍然可以显示为常规的表单元素。 HTML5 &lt;datalist&gt; 元素 &lt;datalist&gt; 元素规定输入域的选项列表。 &lt;datalist&gt; ...

    Form-Preview:使用表单预览预览表单

    几个演示:特征预览表单输入在预览元素中输出之前处理输入在元素或元素的属性中填写输入文献资料 jQuery预览功能$(element).preview(options) -是Form Preview jQuery插件的核心。 这是此函数的语法: $ ( '#...

    HTML5实现表单自动验证功能实例代码

    在HTML5 中,在增加了大量的表单元素与属性的同时,也增加了大量在提交时对表单与表单内新增元素进行内容有效性验证的功能,接下来我们来讲一下自动验证。 在Html5中,通过对元素使用属性的方法,可以实现在表单提交...

    bouncer:轻量级表单验证脚本,可增强本地HTML5表单验证元素和属性

    Bouncer.js 轻量级表单验证脚本,可增强本地HTML5表单验证元素和属性。 | | | | | | | | 特征: 字段在模糊时验证(当用户移出它们时),该数据显示是认知负荷的最佳时间。 整个表单在提交时经过验证。 带有错误的...

    利用JS如何获取form表单数据

    前言 ...2. 表单元素必须要有name属性,name属性是向后端提交的字段数据。 3.html代码 下拉框 &lt;select name=sel id=sel class=query&gt; &lt;option value =sel-1&gt;sel-1 &lt;option value =sel-2

    HTML5&CSS3网页制作:output元素.pptx

    output 元素 output 元素 01 output 元素 &lt;output&gt; 标记定义不同类型的输出(比如脚本的输出)执行计算然后在 &lt;output&gt; 标记中显示结果 描述 语法格式 属性值"&gt; 说明 属性 值 描述 for element_id 定义输出域相关的...

    html表单制作及多种实例

    html表单制作及实例HTML表单是一种允许用户输入数据的网页元素。表单数据可以通过各种方式发送到服务器进行处理。下面是一个简单的HTML表单的例子:具体见附件 这个表单有两个文本输入字段(名和姓),一个提交按钮...

    HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法

    html5之前,表单内的从属元素需要放入标签中,现在可以为标签指定form标签即可 点评:该功能解决了我们实际中遇到的一些问题,比如iframe模拟异步图片上传时,就必须将图片写到form外。 formaction formmethod ...

Global site tag (gtag.js) - Google Analytics