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

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

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>


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


去除input默认的加减号_input属性为number时,如何去掉+、-号?

input标签有type=number的时候,默认情况下有加减号的功能。那么,怎么去掉这个别扭的东西呢?首先想到的是用 type =”tel” 这样移动端同样会调出数字输入键盘, 而且也不存在加减按钮,如果只修改样式应该怎么做呢?

小程序/网页实现textarea高度随内容自动改变

textarea默认的高度不是对着内容变化,而是随着内容增多,出现了滚动条。目前的需求是实现一个能够输入的textarea,并且高度跟着内容变化。以及小程序的textarea高度随内容自动改变的实现

input输入限制只能为数字

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

关于input的一些问题解决方法分享

input是我们接受来自用户的数据常用标签,在前端开发中:移动端底部input被弹出的键盘遮挡。控制input显/隐密码。在input中输入emoji表情导致请求失败。input多行输入显示换行。输入框首尾清除空格-trim()、在input中监听键盘事件

css input checkbox复选框控件 样式美化的多种方案

checkbox复选框可能是网站中常用的HTML元素,但大多数人并不满意它的默认样式,这篇文章就讲讲如何实现input checkbox复选框控件 样式美化效果。::before和::after伪元素的用法

vue2表单验证组件_vee-validate的使用教程

vee-validate基于vue2的表单验证组件,这篇文章主要讲解它的安装,引用,基础使用,内置的校验规则,自定义校验规则。Validator是以$validator被组件自动注入到Vue实例的,同时也可以独立的进行调用

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

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