一. 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属性完成这个功能。

写法:disableddisabled="disabled"

<form action="#">
    <input type="text">
    <input type="button" value="我是被禁用的按钮" disabled>
</form>


十. readonly属性

让一个表单只读

只能用于允许用户输入的表单元素。使用readonly后,则这个表单元素就成为只读而无法输入了。

注意:disabled和readonly都是让这个元素处于只能看到不能更改的状态,但是他们还是有很大的区别的。

  1. 作用范围: disabled可以用在任何的表单元素中。readonly只能用于允许用户输入的表单元素。
  2. 对元素的影响:disabled属性阻止对元素的一切操作,例如获取焦点,点击事件等等。 readonly属性只是将元素设置为只读,其他操作正常。
  3. 表单提交:disabled属性可以让表单元素的值无法被提交。readonly属性则不影响提交问题。
Copyright © 李振超 2018 all right reserved,powered by Gitbook
该文件最后修订时间: 2018-10-18 03:21:02

results matching ""

    No results matching ""