web前端学习技术之对HTML5 智能表单的理解

tml5新增input的form属性，用于指向特定form表单的id，实现input无需放在form标签之中，即可通过表单进行提交。

…

</FORM>

type新增属性：

email、URL、date、time、month、week、number、range、color

input元素的新增属性：

Autocomplete：自动完成功能.记录用户之前输入的内容，并在下次输入时自动提示完成输入。

>>> 属性值： on/off

>>> 可以在form表单上使用，对整张表单的所有控件进行自动完成的开关

也可以在input上使用，对特定输入框进行修改。

>>> 绝大部分浏览器，默认开启。

Autofocus：自动获得焦点. autofocus="autofocus",只能设置input元素自动获得焦点。

Form：所属表单。通过form表单的id，确定此input输入哪张表单。

Required：必填.required="required" 设置input必填，否则阻止提交。

Pattern：使用正则表达式验证input的模式.

数字类型

跟数字强相关的类型，其中number、range在移动端开发时，会弹出数字键盘，而range是一个范围滑动块。

日期和时间类型

web表单常见的字段就是日期和时间，html5以此来收集这类信息

其他类型：email、url、color、search

其中一些类型在不同的设备上都会有不同的显示。

placeholder 占位符文本，以前我们用js来模拟，获得焦点的时候，文本消失，失去焦点并且内容为空时，文本重现，现在html5自带了这一项功能。

html结构：

如果想要修改placeholder中的文本样式，那么我们只要给浏览器设置一些样式即可，css结构：

::-webkit-input-placeholder{

color:red;

font-size:14px;

}

::-moz-placeholder{

color:red;

font-size:14px;

}

autofocus 自动聚焦 ,autofocus属性可以让表单在加载完成时，会有一个表单域被默认聚焦或者选中，但是尽量不要在一个页面上在多个表单域上使用autofocus,在一些低版本浏览器上会默认聚焦最后一个含有autofocus的表单域，在大多数浏览器中会聚焦第一个含有autofocus的表单域，这会造成跨浏览器的混乱。还有我们通常用空格键来滚动页面，如果页面上有autofocus的表单域会阻止这一浏览器的默认行为。

autocomplete 自动完成，很多浏览器默认提供自动完成功能，帮助用户输入上次提交过的内容，autocomplete有两个必备的条件才能够工作，一是一定要有form元素，二个是表单域上必须要有name属性和name属性值。但是，有些时候我们为了保护隐私，需要避免自动完成这项功能，我们开启和关闭这项功能，只需给它赋值on或者off ,如果不赋值，默认就是on,表示功能开启。

html5 中，在增加了大量的表单元素与属性的同时，也增加了大量在提交时对表单与表单内新增元素进行内容有效性验证的功能，接下来我们来说1下自动验证。

在html5中，通过对元素使用属性的方法，可以实现在表单提交时履行自动验证的功能，在履行代码后，将在表单提交时自动验证输入的内容是不是为数字，如果验证通不过，将显示毛病信息文字。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>表单验证示例</title>
</head>
<body>
    <form action="#" method="post">
            <input type="text" name="text" required pattern="^\w.*$">
            <input type="submit" value="提交">
    </form>
</body>
</html>

接下来我们来看1下在html5 中追加的关于对元素内输入内容进行限制的属性的指定。

1.required属性

html5 中新增的required属性可以利用在大多数输入元素上（除隐藏元素，图片元素按钮上）。在提交时，如果元素中内容为空白。则不允许提交，同时在阅读器中显示信息提示文字，提示用户这个元素中必须输入内容，效果如图

2.pattern属性之条件到的新增的input元素，比如email，number，URL等，要求输入内容符合1定的格式，对input元素使用pattern属性，并且将属性值设置为某个格式的正则表达式，在提交时会检查其内容是不是符合给定格式。当输入的内容不符合给定格式时，则不允许提交，同时在阅读器中显示信息提示文字，提交输入的内容必须符合给定格式，代码以下，要求输入内容为1个数字与3个大写字母：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>表单验证示例</title>
</head>
<body>
    <form action="#" method="post">
            请输入指定内容:<input pattern="[0⑼][A-Z]{3}" name="part" placeholder="输入:1个数字3个大写字母">
            <input type="submit" value="提交">
    </form>
</body>
</html>

履行效果以下：

3.min属性与max属性

min与max这两个属性是日期类型或数值类型的input元素的专用属性，他们限制了在input元素中输入的数值与日期的范围。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>表单验证示例</title>
</head>
<body>
    <form action="#" method="post">
            请输入数值:<input type="number" name="point" min="0" max="100" />
            <input type="submit" value="提交">
    </form>
</body>
</html>

履行效果以下：

4.step属性

step属性控制input元素中的值增加过减少时的步骤。例如当你想让用户输入的值在0与100之间，但必须是5的倍数时，你可以指定step为5，代码以下：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>表单验证示例</title>
</head>
<body>
    <form action="#" method="get">
      <input type="number" name="point" step="5" />
      <input type="submit" />
    </form>
</body>
</html>

效果以下：

原文：http://www.wfuyu.com/htmlcss/27520.html

这里我们创建一个填写个人基本信息的表单，使用了表单元素有<input>输入框、<datalist>选项列表、<textarea>文本框，通用的表单输入类型有text、password、file、radio、checkbox、email、url、number、Date pickers。并为表单及表单元素设定了相应的属性。代码如下：

在线咨询

上一篇：html基础（一）
下一篇：CSS 是如何影响浏览器元素在文档中的排列？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

web前端学习技术之对HTML5 智能表单的理解

您的项目需求