<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>input</title>
</head>
<body>
email:<input type="email" name="email"><br><br>
tel:<input type="tel" name="tel"><br><br>
number:<input type="number" name="number"><br><br>
url:<input type="url" name="url"><br><br>
date选择年月日:<input type="date" name="date"><br><br>
month选择年月:<input type="month" name="month"><br><br>
week选择周:<input type="week" name="week"><br><br>
time选择时间:<input type="time" name="time"><br><br>
datetime选择年月日时间:<input type="datetime" name="datetime"><br><br>
datetime-local选择本地年月日时间:<input type="datetime-local" name="datetime-local"><br><br>
range设置区间:<input type="range" name="range" min="1" max="10"><br><br>
search搜索,输入内容有x小按钮:<input type="search" name="search"><br><br>
color选择颜色:<input type="color" name="color"><br><br>
<!-- autocomplete属性,使form或input拥有自动完成功能,值为on/off -->
<form action="#" method="post" autocomplete="on">
<input type="text" name="text">
<input type="email" name="email" autocomplete="off">
<input type="submit">
</form><br>
<!-- autofocus属性,页面加载时自动获得焦点,适用于所有的input标签 -->
<form action="#" method="post">
<input type="text" name="text">
<input type="email" name="email" autofocus="autofocus">
<input type="submit">
</form><br>
<!-- multiple属性,规定输入域中可选择多个值,适用于email和file -->
<form action="#" method="post">
<!--file可上传多个文件-->
<input type="file" name="file" multiple="multiple">
<!--email中用;或,分隔多个email-->
<input type="email" name="email" multiple="multiple">
<input type="submit">
</form><br>
<!-- placeholder属性,输入框的提示性值,适用于text,search,url,tel,email,password -->
<form action="#" method="post">
<input type="text" name="text" placeholder="请输入您的名字">
<input type="submit">
</form><br>
<!-- required属性,在提交前做简单判断,适用于text,search,url,tel,email,password,date pickers,number,checkbox,radio,file -->
<form action="#" method="post">
<input type="text" name="text" required="required">
<input type="text" name="text" oninvalid="this.setCustomValidity('你要改的提示文本');" required>
<input type="submit">
</form>
</body>
</html>
新类型与属性,有些在手机端有效果,pc没有明显变化。大家在实际应用中多多测试练习。