表单2.0之Input标签新增类型详解

更新时间：2016年9月20日 18:58 点击：1691

表单2.0包括了一些我们在1.0中常用的一些类型升级为了字段，如邮箱，手机号之类了，这里面我们来看表单2.0之Input标签新增类型包括啊些吧。

HTML5的新特性扩展了 input 标签的类型，使得表单组件更丰富。

下述示例代码使用了 HTML5 提供的表单 2.0 中的 input 类型：

代码如下	复制代码
<form> Email:<input type="email"><br> 搜索:<input type="search"><br> URL地址:<input type="url"><br> 电话号码:<input type="tel"><br> 数字类型:<input type="number" min="18" max="50" step="2"><br> 范围类型:<input type="range" min="0" max="10" step="2" value="10"><br> 颜色类型:<input type="color"><br> 日期类型:<input type="date"><br> <input type="submit"> </form>

email类型

email 类型是专门用于输入 email 地址的文本框。

如果输入内容不是 email 地址，则不允许提交，并提示错误信息。效果如下图所示：

根据上图效果，总结 email 类型的规则是：提交表单时，检查 email 类型的文本框中是否包含 @ 符号。

值得注意的是： email 类型的文本框并不能检查 email 地址是否真实存在。

<input type="email" />
```

### url类型

`url` 类型是专门用于输入 `url` 地址的文本框。

如果输入内容不是 `url` 地址，则不允许提交，并提示错误信息。效果如下图所示：

![](/ccbbf1f65dd0935c.png)

根据上图效果，总结 `url` 类型的规则是：提交表单时，检查 `url` 类型的文本框中是否包含 `http://` 符号。

```html
<input type="url" />
search类型

search 类型是专门用于输入搜索关键词的文本框。

在移动设备中，当 search 类型的元素获取焦点时，键盘的“前往”会改为“搜索”字样。效果如下图所示：

iPhone设备：

Android设备：

值得注意的是：在PC端浏览器 search 类型与 text 类型外观相同。

tel类型

tel 类型是专门用于输入电话号码的文本框。

在移动设备中，当 tel 类型的元素获取焦点时，键盘使用数字面板。效果如下图所示：

iPhone设备：

Android设备：

值得注意的是：该元素没有特殊的校验规则，不强制输入数字。

number类型

number 类型是专门用于输入数字的文本框。

如果输入内容不是数字，则不允许提交，并提示错误信息。效果如下图所示：

根据上图效果，总结 number 类型的规则是：提交表单时，检查 number 类型的文本框中是否为数字。

属性名称类型描述
min Number 允许输入的最小数值。
max Number 允许输入的最大数值。
step Number 设置增加或减少的间隔。（步长）

date类型

date 类型是专门用于输入日期，提供日期选择控件。

当用户单击向下箭头按钮时浏览器页面中显示日历。效果如下图所示：

<input type="date" />
range类型

range 类型是专门用于输入一定范围内数字值。

range 类型在HTML页面显示为滑动条。效果如下图所示：

属性名称类型描述
min Number 允许输入的最小数值。
max Number 允许输入的最大数值。
step Number 设置增加或减少的间隔。（步长）
value Number 设置滑动条的当前值。

<input type="range" min="0" max="100" step="5" value="50" />
color类型

color 类型是专门用于选取颜色。

color 类型提供了一个颜色选取器。效果如下图所示：

显示效果：

颜色选取器：

color 类型的显示效果，当用户单击 color 类型弹出显示颜色选取器。
<input type="color" />

页面不缓存可以让我们有更新就立即更新出来用户不需要清除浏览器缓存或不停的按f5刷新了，这里整理了解一些关于页面不缓存的方法，具体的如下。

一，js,css,图片文件不缓存

style.css?v=<?php echo time(); ?>
style.css?v=2

css

a.js?v=Math.random();

二，html页面不缓存

HTTP1.1中启用Cache-Control 来控制页面的缓存与否，这里介绍几个常用的参数：

no-cache，浏览器和缓存服务器都不应该缓存页面信息；
public，浏览器和缓存服务器都可以缓存页面信息；
no-store，请求和响应的信息都不应该被存储在对方的磁盘系统中；
must-revalidate，对于客户机的每次请求，代理服务器必须想服务器验证缓存是否过时；
Last-Modified只页面的最后生成时间，GMT格式；

Expires过时期限值，GMT格式，指浏览器或缓存服务器在该时间点后必须从真正的服务器中获取新的页面信息；

方法一：在<head>标签里增加如下meta标签。

方法二：在java代码中增加如下代码。

response.setHeader("Cache-Control","no-cache");
response.setHeader("Pragma","no-cache");
response.setDateHeader("Expires",0);

方法三：asp教程做法

Response.Buffer = True
Response.ExpiresAbsolute = Now() - 1
Response.Expires = 0
Response.CacheControl = "no-cache"
Response.AddHeader "Pragma", "No-Cache"

方法四：php教程做法

<?php
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . 'GMT');
header('Cache-Control: no-cache, must-revalidate');
header('Pragma: no-cache');
?>

页面缓存缓存是通过告诉浏览器我要做什么而进行了，我们下面来看一篇关于浏览器页面缓存的浅析，文章虽然很短但讲到是精华哦。

一个页面上的资源，可以简单分为两种：

url 可变，比如这个页面上的 css 文件，这次可能是 app.fe5a24f8ae.css，下次可能是 app.613e5f58f1.css
url 不可能变，比如这个页面的 url
针对它们，我们的缓存方式可以不同。

比如第一种，我们可以这样设置响应头：

Cache-Control max-age=31536000, must-revalidate

表示这个资源一年内都有效，过期的话才要到服务器上验证。

那么，我们如何保证资源修改后能及时更新到用户端？修改 url 即可。

而针对第二种，因为 url 无法改变，我们就需要另外的方式。

比如：

Cache-Control no-cache

no-cache 不是表示不能缓存，而是说每次浏览器都要跟服务器做个确认 – 通过 ETag 或 Last-Modified，这样就会多出一个请求。

对于 HTML 文档谨慎设定过期时间

大部分情况下，对于其他图片、CSS、JavaScript 等资源的请求都来自一个单一的 HTML 文档。对于这类页面通常应该设定比较短的过期时间，或者干脆不设定。因为如果这类页面被缓存，那么页面中包含的资源的文件名等等信息都会一并被缓存，导致对它的更新难以确保立即对用户生效。

引用静态资源时，不要使用 Query String

Query String 就是例如?key=val的字符串，如

设定缓存的方法

对于 Apache 服务器，可以通过 mod_expires 模块来设定ExpiresHTTP 头或Cache-ControlHTTP 头的max-age指令。编辑相应目录下的 .htaccess 文件，或直接对 Apache 的配置文件（根据服务器系统版本不同，可能为httpd.conf或apache2.conf等）作出修改。

分文件类别设定

使用ExpiresByType可以按照文件的 MIME Type 设定某一类文件的过期日期。例如：

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/css                "access plus 1 week"
    ExpiresByType application/javascript "access plus 2 weeks"
    ExpiresByType image/x-icon            "access plus 6 months"
    ExpiresByType image/gif               "access plus 6 months"
    ExpiresByType image/png               "access plus 6 months"
    ExpiresByType image/jpeg              "access plus 6 months"
    ExpiresByType video/x-flv             "access plus 6 months"
    ExpiresByType application/pdf         "access plus 6 months"
</IfModule>
其中access plus 1 week表示将缓存过期设置为访问时间（即当前时间）之后的一周。如果将access替换为modification，则缓存过期会被设定为文件修改时间之后的一周。可以使用的时间单位包括：

years
months
weeks
days
hours
minutes
seconds
不同的时间也可以进行组合，例如：

ExpiresByType text/html "access plus 1 month 15 days 2 hours"
ExpiresByType image/gif "modification plus 5 hours 3 minutes"
根据文件扩展名进行设置

如果希望根据扩展名来指定缓存规则，可以使用FilesMatch配合正则表达式。为了简洁，我这里只规定了ExpiresDefault。它的优先级很低，只会在对应文件没有任何其他规则能够匹配（包括上层目录下的缓存规则）时生效。

<IfModule mod_expires.c>
    <FilesMatch "\.(css|js)$">
        ExpiresActive on
        ExpiresDefault "access plus 1 week"
    </FilesMatch>
</IfModule>
对某些文件设定

同理，也可以对某些文件启用特定的缓存策略。注意，文件名中的点(.)是需要转义的。

<IfModule mod_expires.c>
    <FilesMatch "^(example\.css|example\.js)$">
        ExpiresActive on
        ExpiresDefault "access plus 1 week"
    </FilesMatch>
</IfModule>

对某一文件夹下的所有文件设定

对于静态文件，一个比较方便的做法是将它们全部放到一个目录下，并对该目录下的所有文件设定。但是，此处需要注意防止其他规则将ExpiresDefault覆盖掉。

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 10 years"
</IfModule>

meta标签在html中的作用是什么呢，我们许多的朋友可能都有碰到过，特别是做前面开发的对于meta标签不是非常的了解，我们下面一起来了解一下html中meta标签吧。

meta标签是HTML语言head区的一个辅助性标签，它位于HTML文档头部的head标记和title标记之间，它提供用户不可见的信息。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他web服务。

申明文档使用的字符编码

或者

该 meta 标签定义了 HTML 页面所使用的字符集为 utf-8 ，就是万国码。它可以在同一页面显示中文简体、繁体及其它语言（如日文，韩文）等。当然，你也可以使用gb2312（简体中文），big5（繁体中文）等等其他字符集。

而目前我们一般推荐使用第一种写法，也是HTML5使用的写法。

声明使用的浏览器及版本

当指定的content值为IE=edge,chrome=1时，优先使用 IE 最新版本和 Chrome。假定客户端安装了Google Chrome Frame，则在IE中使用chrome的渲染引擎来渲染页面，否则，将会使用客户端IE最高的标准模式对页面进行渲染。

还有以下几种设置方式：

SEO优化相关

页面重定向和刷新：content内的数字代表时间（秒），既多少时间后刷新。如果加url,则会重定向到指定网页。

Expires网页过期时间

设定网页的到期时间，一旦过期则必须到服务器上重新调用，需要注意的是必须使用GMT时间格式，或直接设为0(不缓存)。

Pragma禁止本地缓存

设定网页不保存在缓存中，每次访问都刷新页面。这样设定，访问者将无法脱机浏览。

viewport移动设备屏幕可视区域

由于移动设备屏幕宽度不同于传统 web，因此我们需要改变 viewport 值。
大部分4.7-5寸设备的viewport宽设为360px；5.5寸设备设为400px；iphone6设为375px；ipone6 plus设为414px。

width – viewport 的宽度（范围从 200 到 10,000，默认为 980 像素）
height – viewport 的高度（范围从 223 到 10,000 ）
initial-scale – 初始的缩放比例（范围从 > 0 到 10）
minimum-scale – 允许用户缩放到的最小比例
maximum-scale – 允许用户缩放到的最大比例
user-scalable – 用户是否可以手动缩放 (no，yes)
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

强制让文档与设备的宽度保持 1:1 ；

文档最大的宽度比列是1.0（ initial-scale 初始刻度值和 maximum-scale 最大刻度值）；
user-scalable 定义用户是否可以手动缩放（ no 为不缩放），使页面固定设备上面的大小；
注意：实际测试中发现，有些安卓系统自带的浏览器并不支持这一条规则，能够对页面进行放大，一旦放大响应的 box 也随之放大，导致页面出现错乱问题，解决方法：定义页面的最小宽度。

body {
min-width: 320px;
}

注意，很多人使用initial-scale=1到非响应式网站上，这会让网站以100%宽度渲染，用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1，则用户将不能放大/缩小网页来看到全部的内容。

对于移动设备上的meta还有以下一些设置。

WebApp全屏模式：伪装app，离线应用。

隐藏状态栏/设置状态栏颜色：只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent

添加到主屏后的标题

忽略数字自动识别为电话号码/忽略识别邮箱

[!--infotagslink--]

上一篇: 网页自动调用国内双核浏览器的极速模式的实现方法

下一篇: forever进行node服务器的不间断运行的例子

php中浮点型(float)和整型(integer)数据类型详解
文章分析了关于php中浮点型(float)和整型(integer)数据类型的用法区别以及在那种情况下会出现数据长度不够。取值只能为True或者False，当其他类型转化为boolean类...2016-11-25
Javascript类型转换的规则实例解析
这篇文章主要介绍了Javascript类型转换的规则实例解析，涉及到javascript类型转换相关知识，对本文感兴趣的朋友一起学习吧...2016-02-27
c# 数据类型占用的字节数介绍
本篇文章主要是对c#中数据类型占用的字节数进行了详细的介绍。需要的朋友可以过来参考下，希望对大家有所帮助...2020-06-25
JS中artdialog弹出框控件之提交表单思路详解
artDialog是一个基于javascript编写的对话框组件，它拥有精致的界面与友好的接口。本文给大家介绍JS中artdialog弹出框控件之提交表单思路详解，对本文感兴趣的朋友一起学习吧...2016-04-19
使用JQuery实现Ctrl+Enter提交表单的方法
有时候我们为了省事就操作键盘组合键去代替使用鼠标，我们今天就使用JQuery实现Ctrl+Enter提交表单。我们发帖时，在内容输入框中输入完内容后，可以点击“提交”按钮来发表内容。可是，如果你够“懒”，你可以不用动鼠标，只需按...2015-10-23
Jquery 获取指定标签的对象及属性的设置与移除
1、先讲讲JQuery的概念，JQuery首先是由一个 America 的叫什么 John Resig的人创建的，后来又很多的JS高手也加入了这个团队。其实 JQuery是一个JavaScript的类库，这个类库集合了很多功能方法，利用类库你可以用简单的一些代...2014-05-31
深入理解PHP变量的值类型和引用类型
在PHP中，大部分变量类型，如字符串，整型，浮点，数组等都是值类型的，而类和对象是引用类型，在使用的时候，需要注意这一点。看到网友在讨论PHP的&符号，要彻底理解它的用法，就有必要讨论一下变量的两种形式。PHP的变量在内存中是这样...2015-10-23
JS创建Tag标签的方法详解
这篇文章主要介绍了JS创建Tag标签的方法,结合具体实例形式分析了javascript动态操作页面HTML元素实现tag标签功能的步骤与相关操作技巧,需要的朋友可以参考下...2017-06-15
基于JavaScript实现表单密码的隐藏和显示出来
为了网站的安全性，很多朋友都把密码设的比较复杂，但是如何密码不能明显示，不知道输的是对是错，为了安全起见可以把密码显示的，那么基于js代码如何实现的呢？下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示，需要的朋友参考下...2016-03-03
JQuery.Ajax()的data参数类型实例详解
假如现在有这样一个表单，是添加元素用的。<form id='addForm' action='UserAdd.action' type='post'> <label for='uname'>用户名</label>：<input type='text' name='uname' id='uname'><br>...2015-11-24
Javascript中的数据类型之旅
虽然Javascript是弱类型语言，但是，它也有自己的几种数据类型，分别是：Number、String、Boolean、Object、Udefined、Null。其中，Object属于复杂数据类型，Object 由无序的键值对组成。其余几种都属于简单数据类型。注意：变量...2015-10-21
BootStrap栅格系统、表单样式与按钮样式源码解析
这篇文章主要为大家详细解析了BootStrap栅格系统、表单样式与按钮样式源码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-01-23
C#泛型类型知识讲解
这篇文章主要介绍了C#泛型类型知识，文中代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-06-25
java中String类型变量的赋值问题介绍
下面小编就为大家带来一篇java中String类型变量的赋值问题介绍。小编觉得挺不错的。现在分享给大家，给大家一个参考。...2016-03-28
vue:el-input输入时限制输入的类型操作
这篇文章主要介绍了vue:el-input输入时限制输入的类型操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-05
JavaScript实现数据类型的相互转换
这篇文章主要为大家详细介绍了JavaScript实现数据类型的相互转换，感兴趣的朋友可以参考一下...2016-03-09
C#的四种基本数据类型
本文主要介绍了C#的四种基本数据类型的相关知识，具有很好的参考价值。下面跟着小编一起来看下吧...2020-06-25
基于PostgreSQL和mysql数据类型对比兼容
这篇文章主要介绍了基于PostgreSQL和mysql数据类型对比兼容，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-12-25
C# 如何设置label（标签）控件的背景颜色为透明
这篇文章主要介绍了C# 如何设置label（标签）控件的背景颜色为透明，帮助大家更好的理解和使用c#，感兴趣的朋友可以了解下...2020-12-08
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
这篇文章主要介绍了matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel()),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-02-23

表单2.0之Input标签新增类型详解

相关文章

阁下可能感兴趣的内容

推荐阅读