Html5中input新增的表单元素和属性介绍。

时间: 2017-11-09阅读: 2005标签: 表单

input标签主要用于Web表单的创建交互,以便接受来自用户的数据。 我们通过更改type属性的值,来实现不同的输入类型。在以前的写法中表单元素必须放在form元素所包含的里面,而在html5中,我们可以把它们写在页面上的任何一个地方,只需要给该元素增加一个form属性,form属性的值为form表单的id。例如:

<form method="get" id="test">  
      <input type="text" name="name"/>  
      <input type="password" name="password"/>  
      <input type="submit" value="提交">  
 </form>  
<input type="text" name="confirm" form="test">


html5新增表单属性 

color:用于指定颜色的控件。

date:用于输入日期的控件(年,月,日,不包括时间)。 

datetime:基于 UTC 时区的日期时间输入控件(时,分,秒及几分)。

datetime-local:用于输入日期时间控件,不包含时区。 

email:用于编辑 e-mail 的字段。 合适的时候可以使用 :valid 和 :invalid CSS 伪类。

month:用于输入年月的控件,不带时区。

number: 用于输入浮点数的控件。

range:用于输入不精确值控件。如果未指定相应的属性,控件使用如下缺省值: min:0 max:100 value:min + (max-min)/2,或当 max 小于 min 时使用。

search:用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。

tel:用于输入电话号码的控件;换行会被自动从输入的值中移除A,但不会执行其他语法。可以使用属性,比如 pattern 和 maxlength 来约束控件输入的值。恰当的时候,可以应用 :valid 和 :invalid CSS 伪类。

time:用于输入不含时区的时间控件。

url:用于编辑URL的字段。换行会被自动从输入值中移队。可以使用如:pattern 和 maxlength 样的属性来约束输入的值。 恰当的时候使可以应用 :valid 和 :invalid CSS 伪类。

week:用于输入一个由星期-年组成的日期,日期不包括时区。

使用上述属性的时候,当在表单提交,和触发填写时候,支持html5的浏览器会提示类型是否正确,如果没有设置novalidate属性当输入不正确是无法提交的。不支持的将以默认属性"text"。


html5新增form 属性

autocomplete: 属性规定输入字段是否应该启用自动完成功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。<form autocomplete="on|off">

novalidate :属性规定当提交表单时不对其进行验证。如果使用该属性,则表单不会验证表单的输入。<form novalidate="novalidate">

 

input 属性

属性描述
acceptmime_type规定通过文件上传来提交的文件的类型。
align
  • left
  • right
  • top
  • middle
  • bottom
不赞成使用。规定图像输入的对齐方式。
alttext定义图像输入的替代文本。
autocomplete
  • on
  • off
规定是否使用输入字段的自动完成功能。
autofocusautofocus

规定输入字段在页面加载时是否获得焦点。

(不适用于 type="hidden")

checkedchecked规定此 input 元素首次加载时应当被选中。
disableddisabled当 input 元素加载时禁用此元素。
formformname规定输入字段所属的一个或多个表单。
formactionURL

覆盖表单的 action 属性。

(适用于 type="submit" 和 type="image")

formenctype见注释

覆盖表单的 enctype 属性。

(适用于 type="submit" 和 type="image")

formmethod
  • get
  • post

覆盖表单的 method 属性。

(适用于 type="submit" 和 type="image")

formnovalidateformnovalidate

覆盖表单的 novalidate 属性。

如果使用该属性,则提交表单时不进行验证。

formtarget
  • _blank
  • _self
  • _parent
  • _top
  • framename

覆盖表单的 target 属性。

(适用于 type="submit" 和 type="image")

height
  • pixels
  • %
定义 input 字段的高度。(适用于 type="image")
listdatalist-id引用包含输入字段的预定义选项的 datalist 。
max
  • number
  • date

规定输入字段的最大值。

请与 "min" 属性配合使用,来创建合法值的范围。

maxlengthnumber规定输入字段中的字符的最大长度。
min
  • number
  • date

规定输入字段的最小值。

请与 "max" 属性配合使用,来创建合法值的范围。

multiplemultiple如果使用该属性,则允许一个以上的值。
namefield_name定义 input 元素的名称。
patternregexp_pattern

规定输入字段的值的模式或格式。

例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。

placeholdertext规定帮助用户填写输入字段的提示。
readonlyreadonly规定输入字段为只读。
requiredrequired指示输入字段的值是必需的。
sizenumber_of_char定义输入字段的宽度。
srcURL定义以提交按钮形式显示的图像的 URL。
stepnumber规定输入字的的合法数字间隔。
type
  • button
  • checkbox
  • file
  • hidden
  • image
  • password
  • radio
  • reset
  • submit
  • text
规定 input 元素的类型。
valuevalue规定 input 元素的值。
width
  • pixels
  • %
定义 input 字段的宽度。(适用于 type="image")


在下面的案例中,我们对一些常用的属性做了解释:

<body>
	<!--
		placeholder:用于在文本框未输入时提示作用
		autofocus:用于控件自动获取焦点
	-->
	<input type="search" name="key" value="" results="s" placeholder="君乐宝" autofocus="true">
	<input type="button" name="" value="搜索"><br>
	<!--
		novalidate:在控件中加入了required、emial、url等验证后,如果想让这些验证失效,可以在表单中将novalidate设置为tyue
	-->
	<form action="upload.php" method="post" accept-charset="utf-8" id="form1" novalidate="true">
		<!--
			required:必填
			autocomplete:在网页的文本框中输入部分内容或者双节时,经常会看到在下面显示输入过的内容,
			这就是html5的新特性:自动完成,如果不想使用此功能,将其设置为off即可
		-->
		<input type="text" name="UserName" value="" required autocomplete="off"><br>
		<!--
			multiple:在选择文件时,默认只能单选,加上这个属性后,则可以使用鼠标选中多个文件进行上传
		-->
		<label>选择文件</label>
		<input type="file" name="upload" value="" multiple="multiple"><br>
		<!--
			list:这个属性要和datalist元素一起使用,指定此文本框的可选择项,另外其相较于select的优点在于还可以输入
		-->
		<label>区号:</label>
		<input type="text" name="age" value="" list="list1"><br>
		<datalist id="list1">
	        <option value="0312">保定</option>
	        <option value="0311">石家庄</option>
	        <option value="010">北京</option>
	        <option value="0313">唐山</option>
	    </datalist>
		<!--
			formaction:可以更改点击此按钮式提交到服务器的处理程序
			formmethod:可以更改向服务器提交数据的方式
		-->
		<input type="submit" name="subsave" value="提交">
		<input type="submit" name="subresset" value="更改" formaction="1.php" formmethod="get">
	</form>
</body>


 完结~~~~~~~~~~~~~


站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/70

在HTML中限制input 输入框只能输入纯数字

使用 onkeyup 事件,有 bug ,那就是在中文输入法状态下,输入汉字之后直接回车,会直接输入字母,使用 onchange 事件,在输入内容后,只有 input 丧失焦点时才会得到结果,并不能在输入时就做出响应,使用 oninput 事件,完美的解决了以上两种问题

表单提交type=submit和type=image的区别

type=image默认是sumbit,不用再添加onclick事件提交,否则会发生表单被提交两次的情况;在onclick事件中添加重置方法

JS使用textarea模拟post提交表单

textarea代表HTML表单多行输入域,textarea标签是成对出现的,以<textarea>开始,以</textarea>结束。cols -- 多行输入域的列数,rows -- 多行输入域的行数

vue表单校验

两个文件,一个写逻辑,一个写校验规则;特点:逻辑简单,代码量少,够用;不想看代码直接新建这两个文件复制代码,看最下面的使用方法;

input输入限制只能为数字

input输入限制只能为数字的2种方法,通过onkeypress事件和onkeyup事件,输不上任何非数字字符。加上正则匹配不能输入非数字字符就可以了

input,textarea限制字数,实时绑定

input,textarea限制字数,实时绑定的方式:1.在input 或 textarea中加属性 、 2.js判断,拓展: 实时绑定功能:二种输入标签的实时绑定方式 。 需求:框后面有显示字数

Validate表单验证插件之异步操作

使用ajax方式进行验证某个元素的值(只是验证元素的值,而不是ajax方式提交表单),默认会提交当前验证的值到请求的地址,如果要提交其它的值,可以使用data选项。

谷歌浏览器禁止表单自动填充

在项目开发期间发现谷歌浏览器有记住密码的功能,该功能有个问题就是一遇到input type=password就开始自动填充,同一个账户还好,就是bug了。找了一堆解决方案终于找到了办法,下面分享一下解决方案。

Js使用表单元素验证表单

最简单的HTML结构:网站最基础的就是注册,它是一个系统的交互基础;因为用户最后要去点击\\\"注册\\\"按钮,所以我们就在\\\"注册\\\"按钮上添加一个onclick事件属性,引用eg.regCheck()

AntDesign表单的理解与使用

虽然 react 没有内置的表单验证逻辑,但是我们可以使用 react 组件库 AntDesign 中的表单组件 Form 来实现这一需求。具体地, AntDesign 中的表单组件 Form 与表单域 Form.Item(用于包裹任意输入控制的容器)配合使用:

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广