一. placeholder
属性
二. required
属性
表示这个表单元素必须输入,否则提交失败。
required
只写属性名可以不写属性值,如果写属性值就和属性名保持一致就可以了。和以前学习的checked
属性类似.
required="rquired"
<form action="#">
<input type="text" placeholder="请输入你的账号" required>
<input type="submit" value="提交">
</form>
三. autofocus
属性
表示这个表单元素自动获取焦点。当打开页面的时候,有
autofuc
的元素会自动获取用户的焦点。在整个页面中不要让多个元素获取焦点,否则有可能会出现混乱,不同的浏览器处理方式不一样,有的是先出现的获取,有的后出现的获取。
四. autocomplete
属性
很多浏览器默认提供自动完成功能以帮助用户输入。以往用户可以在浏览器设置中打开 或关闭这项功能,现在我们还能告知浏览器我们不想在某个表单或表单域上使用自动完 成功能。这不仅仅能保护敏感数据(例如银行账户),还可以让你确保用户用心填写表单, 手工输入一些值。
autocomplete属性有两个值:on和 off。
正常情况,高级浏览器都开启了自动完成功能:
把autocomplete的属性值改成off之后,则不会再有自动完成功能,只能挨个手动输入。
<form action="#">
<input type="text" autocomplete="off" name="user">
<input type="submit" value="提交">
</form>
注意:也可以把这个属性给
form
标签,则这个form
下的所有input
都不会再有自动完成功能!
五. list
属性和datalist
标签
list
属性以及对应的datalist
元素可以让用户在输入框中开始输入值的时候,显示 一组备选值。
<form action="#">
输入你喜欢的编程语言:<input type="text" name="lang" list="data">
<datalist id="data">
<option value="java">java大法好</option>
<option value="javaScript">javaScript更牛叉</option>
<option value="c">c比较难</option>
<option value="c#">微软的贼船不要上</option>
<option value="c++">比c还难</option>
</datalist>
</form>
六. form
属性
HTML5
出来之前,我们的表单元素都必须在<form>
标签下。现在,有了
form
属性,即使把表单元素写在了<form>
标签外面,也可以成为这个表单的一部分被提交。注意:form属性是那些表单元素
<input>
的属性,他的值是某一个<form>
的id
值在表单特别复杂的时候比较有用。
<!--这个input就属于id是form1的form-->
<input type="text" name="user" form="form1">
<form action="#" id="form1">
<input type="submit">
</form>
七. novalidate
属性
关闭表单的自动验证功能。比如我们添加了
required
属性,则如果没有输入则不准提交,如果再添加上novalidate
属性,则不再进行任何的验证。注意:
novalidate
是用在<form>
标签中多了解一点:给提交提交按钮添加属性
formnovalidate
和在<form>
中添加novalidate
属性是一样的效果。
八. pattern
属性
表单的默认验证功能比较弱,
pattern
属性接收一个字符串形式的正则表达式,来验证表单。
<form action="#">
<input type="tel" pattern="1[3578]\d{9}" placeholder="请输入11手机号码">
<input type="submit">
</form>
如果感觉自带的验证不通过的提示太low,可以自定义不同过时的提示信息。
只需要在响应的表单元素(input)中添加属性title,他的值就是自定义的提示信息
<form action="#">
<input type="tel" pattern="1[3578]\d{9}" placeholder="请输入11手机号码"
title="你神经病,你家的电话是这个格式啊">
<input type="submit">
</form>
九. disabled
属性
在某些情况下, 你可能不想让访问者使用表单中的某些部分。 例如, 你可能希望 在所有必填字段完成之前禁用提交按钮。
可以使用
disabled
属性完成这个功能。写法:
disabled
或disabled="disabled"
<form action="#">
<input type="text">
<input type="button" value="我是被禁用的按钮" disabled>
</form>
十. readonly
属性
让一个表单只读
只能用于允许用户输入的表单元素。使用
readonly
后,则这个表单元素就成为只读而无法输入了。注意:
disabled和readonly
都是让这个元素处于只能看到不能更改的状态,但是他们还是有很大的区别的。
- 作用范围:
disabled
可以用在任何的表单元素中。readonly
只能用于允许用户输入的表单元素。- 对元素的影响:
disabled
属性阻止对元素的一切操作,例如获取焦点,点击事件等等。readonly
属性只是将元素设置为只读,其他操作正常。- 表单提交:
disabled
属性可以让表单元素的值无法被提交。readonly
属性则不影响提交问题。