频道导航

HTML5增加与改良的input元素

2019-02-11 HTML5 前端之家

前端之家收集整理的这篇文章主要介绍了HTML5增加与改良的input元素，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

h5中form表单中input新增的属性值

在HTML5中增加了许多新的标签和功能属性，今天我们来看一个Form表单在HTML5中新的使用方法。那么在HTML5中新加入的这个功能与之前咱们使用的功能区别在哪里呢？在下面咱们有几个场景来看，你就明白啦~假如咱们需要把页面中不同的表单元素提交，而这些表单元素又分布在HTML中的各个位置，那么Form就只能包含所有的Form标签了。

HTML5的方法：

复制代码

这里的form属性=表单的ID，这样一来，这些元素到底归那个表单就一目了然了，这个for属性，你可以理解为label中的for属性，只不过在HTML5中的这种情况下，他就属于fome1的元素了。现在再看代码，干净利索多了，项目文件也不大，易于维护。

在过去我们制作此种类型输入框，会用到不少JS验证，如今，有了HTML5写这种效果已经没有那么麻烦了，下面我来给大家介绍两种HTML5的input的新增加的类型应用。

1、URL类型：

复制代码

设置此类型后，从外观上来看与普通的元素差不多，可是如果你将此类型放到表单中之后，当点击提交按钮，如果此输入框中输入的不是一个URL地址，将无法提交。运行效果如下图：

2、Email类型：

如果我们讲上面的URL类型的代码中的type修改为email，那么在表单提交的时候，会自动验证此输入框中的内容是否为email格式，如果不是，则无法提交。运行效果如下图：

今天介绍一下input在HTML5中新增加的时间类型的应用，与昨天的练习一样，如果在以下这几种输入框中输入的格式不正确，也是无法提交的

1、Date类型：

复制代码

如果在之前，我们使用js+css+dom才能实现日历选择日期的效果，在HTML5中，我们只需要设置input为date类型即可，提交表单的时候也不需要我们验证数据了，它已经帮我们实现了。运行效果如下图：

2、Time类型：

复制代码

此类型是一个专门用来输入时间的文本框，在提交的时候检查是否输入了有效的时间。运行效果如下图：

404ff4db15bcb72067213.png" alt="">
3、DateTime类型：

复制代码

datetime类型的input元素是专门用来输入UTC日期和实践的文本框，在提交的时候，对日期和时间进行有效的检查。运行效果如下图：

4、DateTime-Local类型：

复制代码

此类型与datatime类型差不多，只不过是用来输入本地的日期和时间。运行效果如下图：

404fb5b4397c.png" alt="">
5、Month类型：

复制代码

month是一种专门输入月份的文本框，在日历中，你只能选择某一个月，不能选择某一天。运行效果如下图：

6、Week类型：

复制代码

week是专门用来输入周（星期）的文本框，W后面所跟的数字表示此周是当年的第几个星期。在日历中只能选择一周，同样不能选择某一天。运行效果如下图：

1、number类型：

复制代码

此输入框是一种专门用来输入数字的文本框，并且在提交的时候会验证内容是否为数字，它具有四个属性，分别是：min、max、step和value。min：此输入框的最小值max：此输入框的最大值step：当点击上下箭头数值一次跳几个value：表示此输入框的默认值<div class="blockrun cl">
<div class="blockrunbar cl">

2、range类型：

复制代码

此输入框是一种只允许输入某一段范围内数值的文本框，它同样也具有四个属性，分别是：min、max、step和value，默认的取值范围为0-100。min：此输入框的最小值max：此输入框的最大值step：当点击上下箭头数值一次跳几个value：表示此输入框的默认值

<img src="/res/2019/02-11/20/e5878d13971ec13fe33964398c45f4ba.png" alt="">

<hr class="l">
3、search类型：
<div class="blockcode">
<div id="code_RBX">

复制代码

search类型的input元素是一种专门用来输入搜索关键词的文本框，search类型与text类型仅在外观上有区别，外观可以使用CSS来定义。
<div class="blockcode">
<div id="code_Ih6">

input[type="search"]{-webkit-appearance:textfield;}

<hr class="l">
4、tel类型：
<div class="blockcode">
<div id="code_RJw">

复制代码

tel元素被设计用来输入电话号码的专用文本框，他没有特殊的验证规则，不强制输入数字，因为很多电话通常带有其它的字符，比如：010-88696811，但是开发者可以pattern属性来制定输入的内容，一般为正则表达式。<div class="blockrun cl">
<div class="blockrunbar cl">

5、color类型：

复制代码

color类型的input元素用来取色，它提供了一个颜色的取色器。

6、output标签：
<div class="blockcode">
<div id="code_XXp">

复制代码

range类型的input元素用来定义不同类型的输出，比如计算结果或者脚本的输出，output元素必须属于某个表单。换句话说，必须将它书写在表单内部，或者对他添加form指向属性。在这个例子中，元素绑定到了一个range元素上，当拖动range元素的滑动杆的时候，值就会显示出来。目前大部分浏览器对其支持的还不是十分理想！

<img src="/res/2019/02-11/20/9a3006f4c118e43bc48fb6901e105c27.png" alt="">

自动验证 required pattern="d{3}" min="3" max="16" required step="10" min="0" max="100" type="number"/

1、required 属性：

required" name="w3cfuns.com" required type="text"/>

复制代码

required 属性可以用用在大多数的输入元素上（除了隐藏元素、图片元素按钮上等）。required 属性表示此输入框是必填项，当提交的时候，如果此输入框为空，那么将提示用户输入后提交。立即运行：[html]

[/html]<hr class="l">
2、pattern属性：
<div class="blockcode">
<div id="code_Irm">

required pattern="d{3}" type="text"/>

复制代码

pattern属性的值一般为正则表达式，当用户输入的内容符合一定的格式，那么才能提交，否则将提示用户不符合要求，如上所示必须输入3位数字。立即运行：[html]

[/html]<hr class="l">
3、min属性和max属性：
<div class="blockcode">
<div id="code_r33">

required min="3" max="16" type="number"/>

复制代码

min和max这两个属性是数值类型或日起类型的input元素的专有属性，他限制了input元素中输入的数值和日期范围。属性值为数字。立即运行：[html]

[/html]<hr class="l">
4、step属性：
<div class="blockcode">
<div id="code_l77">

required step="10" min="0" max="100" type="number"/>

复制代码

step属性控制input元素的值增加或减少的步幅，例如你想让用户输入得值在0-100之间，但是必须是10的倍数时，则如上代码所示，点击下方运行看效果。立即运行：[html]

[/html]
<div class="blockrun cl">
<div class="cnblogs_code">




    Meta 
    Title


    
    
        
        
         
        
    
        
        
        
        
    
         
        
        
<span style="color: #008000;"&gt;<!--</span><span style="color: #008000;"&gt;time类型</span><span style="color: #008000;"&gt;--></span>
    <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;input </span><span style="color: #ff0000;"&gt;type</span><span style="color: #0000ff;"&gt;="time"</span><span style="color: #ff0000;"&gt; name</span><span style="color: #0000ff;"&gt;="time"</span><span style="color: #ff0000;"&gt; value</span><span style="color: #0000ff;"&gt;="10:00"</span><span style="color: #0000ff;"&gt;></span>
    <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;br</span><span style="color: #0000ff;"&gt;/></span>
    <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;br</span><span style="color: #0000ff;"&gt;/></span>
<span style="color: #008000;"&gt;<!--</span><span style="color: #008000;"&gt;datetime类型</span><span style="color: #008000;"&gt;--></span>
    <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;input </span><span style="color: #ff0000;"&gt;type</span><span style="color: #0000ff;"&gt;="datetime"</span><span style="color: #ff0000;"&gt; name</span><span style="color: #0000ff;"&gt;="datetime"</span><span style="color: #ff0000;"&gt; value</span><span style="color: #0000ff;"&gt;=""</span><span style="color: #0000ff;"&gt;></span>
    <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;br</span><span style="color: #0000ff;"&gt;/></span>
    <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;br</span><span style="color: #0000ff;"&gt;/></span>
<span style="color: #008000;"&gt;<!--</span><span style="color: #008000;"&gt;datetime-local类型</span><span style="color: #008000;"&gt;--></span>
    <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;input </span><span style="color: #ff0000;"&gt;type</span><span style="color: #0000ff;"&gt;="datetime-local"</span><span style="color: #ff0000;"&gt; name</span><span style="color: #0000ff;"&gt;="datetime-local"</span> <span style="color: #0000ff;"&gt;></span>
    <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;br</span><span style="color: #0000ff;"&gt;/></span>
    <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;br</span><span style="color: #0000ff;"&gt;/></span>
<span style="color: #008000;"&gt;<!--</span><span style="color: #008000;"&gt;month类型</span><span style="color: #008000;"&gt;--></span>
    <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;input </span><span style="color: #ff0000;"&gt;type</span><span style="color: #0000ff;"&gt;="month"</span><span style="color: #ff0000;"&gt; name</span><span style="color: #0000ff;"&gt;="month"</span><span style="color: #ff0000;"&gt; value</span><span style="color: #0000ff;"&gt;="2016-08-26"</span><span style="color: #0000ff;"&gt;></span>
    <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;br</span><span style="color: #0000ff;"&gt;/></span>
    <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;br</span><span style="color: #0000ff;"&gt;/></span>
<span style="color: #008000;"&gt;<!--</span><span style="color: #008000;"&gt;week类型</span><span style="color: #008000;"&gt;--></span>
    <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;input </span><span style="color: #ff0000;"&gt;type</span><span style="color: #0000ff;"&gt;="week"</span><span style="color: #ff0000;"&gt; name</span><span style="color: #0000ff;"&gt;="week"</span><span style="color: #0000ff;"&gt;></span>
    <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;br</span><span style="color: #0000ff;"&gt;/></span>
    <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;br</span><span style="color: #0000ff;"&gt;/></span>
<span style="color: #008000;"&gt;<!--</span><span style="color: #008000;"&gt;number类型</span><span style="color: #008000;"&gt;--></span>
    <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;input </span><span style="color: #ff0000;"&gt;type</span><span style="color: #0000ff;"&gt;="number"</span><span style="color: #ff0000;"&gt; name</span><span style="color: #0000ff;"&gt;="number"</span><span style="color: #ff0000;"&gt; value</span><span style="color: #0000ff;"&gt;="15"</span><span style="color: #ff0000;"&gt; max</span><span style="color: #0000ff;"&gt;="100"</span><span style="color: #ff0000;"&gt; step</span><span style="color: #0000ff;"&gt;="5"</span><span style="color: #ff0000;"&gt; min</span><span style="color: #0000ff;"&gt;="10"</span><span style="color: #0000ff;"&gt;></span>
<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;form</span><span style="color: #0000ff;"&gt;></span>
<span style="color: #008000;"&gt;<!--</span><span style="color: #008000;"&gt;计算器</span><span style="color: #008000;"&gt;--></span>
<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;script</span><span style="color: #0000ff;"&gt;></span>
    <span style="background-color: #f5f5f5; color: #0000ff;"&gt;function</span><span style="background-color: #f5f5f5; color: #000000;"&gt; sum() {
        </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;var</span><span style="background-color: #f5f5f5; color: #000000;"&gt; n1</span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt;document.getElementById(</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;nu1</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;).valueAsNumber;
        </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;var</span><span style="background-color: #f5f5f5; color: #000000;"&gt;  n2</span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt;document.getElementById(</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;nu2</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;).valueAsNumber;
        document.getElementById(</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;result</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;).valueAsNumber</span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt;n1</span><span style="background-color: #f5f5f5; color: #000000;"&gt;+</span><span style="background-color: #f5f5f5; color: #000000;"&gt;n2;
    }
</span><span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;script</span><span style="color: #0000ff;"&gt;></span>
<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;br</span><span style="color: #0000ff;"&gt;/></span>
<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;form</span><span style="color: #0000ff;"&gt;></span>
    <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;input </span><span style="color: #ff0000;"&gt;type</span><span style="color: #0000ff;"&gt;="number"</span><span style="color: #ff0000;"&gt; id</span><span style="color: #0000ff;"&gt;="nu1"</span><span style="color: #0000ff;"&gt;></span><span style="color: #000000;"&gt;+
    </span><span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;input </span><span style="color: #ff0000;"&gt;type</span><span style="color: #0000ff;"&gt;="number"</span><span style="color: #ff0000;"&gt; id</span><span style="color: #0000ff;"&gt;="nu2"</span><span style="color: #0000ff;"&gt;></span><span style="color: #000000;"&gt;=
    </span><span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;input </span><span style="color: #ff0000;"&gt;type</span><span style="color: #0000ff;"&gt;="number"</span><span style="color: #ff0000;"&gt; id</span><span style="color: #0000ff;"&gt;="result"</span><span style="color: #ff0000;"&gt; readonly</span><span style="color: #0000ff;"&gt;></span>
    <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;input </span><span style="color: #ff0000;"&gt;type</span><span style="color: #0000ff;"&gt;="button"</span><span style="color: #ff0000;"&gt; value</span><span style="color: #0000ff;"&gt;="计算"</span><span style="color: #ff0000;"&gt; onclick</span><span style="color: #0000ff;"&gt;="sum()"</span><span style="color: #0000ff;"&gt;></span>
<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;form</span><span style="color: #0000ff;"&gt;></span>
<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;br</span><span style="color: #0000ff;"&gt;/></span>
<span style="color: #008000;"&gt;<!--</span><span style="color: #008000;"&gt;range类型</span><span style="color: #008000;"&gt;--></span>
<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;input </span><span style="color: #ff0000;"&gt;name</span><span style="color: #0000ff;"&gt;="range"</span><span style="color: #ff0000;"&gt; type</span><span style="color: #0000ff;"&gt;="range"</span><span style="color: #ff0000;"&gt; value</span><span style="color: #0000ff;"&gt;="20"</span><span style="color: #ff0000;"&gt; min</span><span style="color: #0000ff;"&gt;="0"</span><span style="color: #ff0000;"&gt; max</span><span style="color: #0000ff;"&gt;="100"</span><span style="color: #ff0000;"&gt; step</span><span style="color: #0000ff;"&gt;="2"</span><span style="color: #0000ff;"&gt;></span>
<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;br</span><span style="color: #0000ff;"&gt;/></span>
<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;br</span><span style="color: #0000ff;"&gt;/></span>
<span style="color: #008000;"&gt;<!--</span><span style="color: #008000;"&gt;search类型</span><span style="color: #008000;"&gt;--></span>
<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;input </span><span style="color: #ff0000;"&gt;type</span><span style="color: #0000ff;"&gt;="search"</span><span style="color: #0000ff;"&gt;></span>
<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;br</span><span style="color: #0000ff;"&gt;/></span>
<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;br</span><span style="color: #0000ff;"&gt;/></span>
<span style="color: #008000;"&gt;<!--</span><span style="color: #008000;"&gt;tel类型</span><span style="color: #008000;"&gt;--></span>
<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;input </span><span style="color: #ff0000;"&gt;type</span><span style="color: #0000ff;"&gt;="tel"</span><span style="color: #0000ff;"&gt;></span>
<span style="color: #008000;"&gt;<!--</span><span style="color: #008000;"&gt;color类型</span><span style="color: #008000;"&gt;--></span>
<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;input </span><span style="color: #ff0000;"&gt;type</span><span style="color: #0000ff;"&gt;="color"</span><span style="color: #ff0000;"&gt; onchange</span><span style="color: #0000ff;"&gt;="document.body.style.backgroundColor=document.getElementById('currentColor').textContent=this.value;"</span><span style="color: #0000ff;"&gt;></span>
<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;span </span><span style="color: #ff0000;"&gt;id</span><span style="color: #0000ff;"&gt;="currentColor"</span><span style="color: #0000ff;"&gt;></</span><span style="color: #800000;"&gt;span</span><span style="color: #0000ff;"&gt;></span>
<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;br</span><span style="color: #0000ff;"&gt;/></span>
<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;br</span><span style="color: #0000ff;"&gt;/></span>
<span style="color: #008000;"&gt;<!--</span><span style="color: #008000;"&gt;output元素追加</span><span style="color: #008000;"&gt;--></span>
<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;script</span><span style="color: #0000ff;"&gt;></span>
    <span style="background-color: #f5f5f5; color: #0000ff;"&gt;function</span><span style="background-color: #f5f5f5; color: #000000;"&gt; value_change() {
        </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;var</span><span style="background-color: #f5f5f5; color: #000000;"&gt; number</span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt;document.getElementById(</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;range</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;).value;
        document.getElementById(</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;output</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;).value</span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt;number;
    }
</span><span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;script</span><span style="color: #0000ff;"&gt;></span>
<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;form </span><span style="color: #ff0000;"&gt;id</span><span style="color: #0000ff;"&gt;="testform"</span><span style="color: #0000ff;"&gt;></span>
    <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;input </span><span style="color: #ff0000;"&gt;type</span><span style="color: #0000ff;"&gt;="range"</span><span style="color: #ff0000;"&gt; id</span><span style="color: #0000ff;"&gt;="range"</span><span style="color: #ff0000;"&gt; min</span><span style="color: #0000ff;"&gt;="0"</span><span style="color: #ff0000;"&gt; max</span><span style="color: #0000ff;"&gt;="100"</span><span style="color: #ff0000;"&gt; step</span><span style="color: #0000ff;"&gt;="5"</span><span style="color: #ff0000;"&gt; value</span><span style="color: #0000ff;"&gt;="10"</span><span style="color: #ff0000;"&gt; onchange</span><span style="color: #0000ff;"&gt;="value_change()"</span> <span style="color: #0000ff;"&gt;></span>
    <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;output </span><span style="color: #ff0000;"&gt;id</span><span style="color: #0000ff;"&gt;="output"</span><span style="color: #0000ff;"&gt;></span>10<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;output</span><span style="color: #0000ff;"&gt;></span>
<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;form</span><span style="color: #0000ff;"&gt;></span>
<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;br</span><span style="color: #0000ff;"&gt;/></span>
<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;br</span><span style="color: #0000ff;"&gt;/></span>
<span style="color: #008000;"&gt;<!--</span><span style="color: #008000;"&gt;表单验证</span><span style="color: #008000;"&gt;--></span>
<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;script</span><span style="color: #0000ff;"&gt;></span>
    <span style="background-color: #f5f5f5; color: #0000ff;"&gt;function</span><span style="background-color: #f5f5f5; color: #000000;"&gt; check() {
        </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;var</span><span style="background-color: #f5f5f5; color: #000000;"&gt; email</span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt;document.getElementById(</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;email</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;);
        </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;if</span><span style="background-color: #f5f5f5; color: #000000;"&gt;(email.value</span><span style="background-color: #f5f5f5; color: #000000;"&gt;==</span><span style="background-color: #f5f5f5; color: #000000;"&gt;""</span><span style="background-color: #f5f5f5; color: #000000;"&gt;){
            alert(</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;请输入email</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;);
        }</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;else</span> <span style="background-color: #f5f5f5; color: #0000ff;"&gt;if</span><span style="background-color: #f5f5f5; color: #000000;"&gt;(</span><span style="background-color: #f5f5f5; color: #000000;"&gt;!</span><span style="background-color: #f5f5f5; color: #000000;"&gt;email.checkValidity()){
            alert(</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;请输入正确的Email地址！</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;)
            </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;return</span> <span style="background-color: #f5f5f5; color: #0000ff;"&gt;false</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;
        }
    }
</span><span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;script</span><span style="color: #0000ff;"&gt;></span>
<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;form </span><span style="color: #ff0000;"&gt;id</span><span style="color: #0000ff;"&gt;="teatform"</span><span style="color: #ff0000;"&gt; onsubmit</span><span style="color: #0000ff;"&gt;="check()"</span><span style="color: #ff0000;"&gt; novalidate</span><span style="color: #0000ff;"&gt;="true"</span><span style="color: #0000ff;"&gt;></span>
    <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;label </span><span style="color: #ff0000;"&gt;for</span><span style="color: #0000ff;"&gt;="email"</span><span style="color: #0000ff;"&gt;></span>Email<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;label</span><span style="color: #0000ff;"&gt;></span>
    <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;input </span><span style="color: #ff0000;"&gt;name</span><span style="color: #0000ff;"&gt;="email"</span><span style="color: #ff0000;"&gt; type</span><span style="color: #0000ff;"&gt;="email"</span><span style="color: #ff0000;"&gt; id</span><span style="color: #0000ff;"&gt;="email"</span><span style="color: #0000ff;"&gt;></span>
    <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;input </span><span style="color: #ff0000;"&gt;type</span><span style="color: #0000ff;"&gt;="submit"</span><span style="color: #0000ff;"&gt;></span>
<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;form</span><span style="color: #0000ff;"&gt;></span>
<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;br</span><span style="color: #0000ff;"&gt;/></span>
<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;br</span><span style="color: #0000ff;"&gt;/></span>
<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;br</span><span style="color: #0000ff;"&gt;/></span>
<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;form</span><span style="color: #0000ff;"&gt;></span>
    <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;fieldset</span><span style="color: #0000ff;"&gt;></span>
        <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;legend</span><span style="color: #0000ff;"&gt;></span>健康信息<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;legend</span><span style="color: #0000ff;"&gt;></span><span style="color: #000000;"&gt;
        身高：</span><span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;input </span><span style="color: #ff0000;"&gt;type</span><span style="color: #0000ff;"&gt;="text"</span> <span style="color: #0000ff;"&gt;/></span><span style="color: #000000;"&gt;
        体重：</span><span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;input </span><span style="color: #ff0000;"&gt;type</span><span style="color: #0000ff;"&gt;="text"</span> <span style="color: #0000ff;"&gt;/></span>
    <span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;fieldset</span><span style="color: #0000ff;"&gt;></span>
<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;form</span><span style="color: #0000ff;"&gt;></span>
<span style="color: #0000ff;"></<span style="color: #800000;">body<span style="color: #0000ff;">>

<span style="color: #0000ff;"></<span style="color: #800000;">html<span style="color: #0000ff;">>