文章目录
- 一、HTML5 新增 input 表单
- 二、HTML5 新增 input 表单完整代码示例
一、HTML5 新增 input 表单
HTML5 新增 input 表单 :
- 邮箱输入表单 : 必须输入邮箱 , 如果输入格式错误 , 提交时会在对话框中报错 ;
<input type="email" />
- URL 输入表单 : 只能输入网址 , 格式错误会在对话框中报错 ;
<input type="url" />
- 日期输入表单 : 右侧的下拉菜单选择日期 ; 如果在手机中打开 , 会弹出手机中自带的日期选择对话框 ;
<input type="date" />
- 时间输入表单 : 右侧的下拉菜单选择时间 ;
<input type="time" />
- 月份输入表单 : 右侧的下拉菜单选择月份 ;
<input type="month" />
- 周日期输入表单 : 右侧的下拉菜单选择周数 ;
<input type="week" />
- 数字输入表单 : 无法输入非数字的内容 ;
<input type="number" />
- 手机号码输入表单 : 可以输入任意字符 , 没有校验 ;
<input type="tel" />
- 搜索框 : 点击右侧的 x 号 , 可以快速清除输入内容 ;
<input type="search" />
- 颜色选择表单 : 点击该表单 , 弹出调色盘 ;
<input type="color" />
在手机中打开该网页时 , 弹出的选择对话框会是手机中的原生对话框 ;
在手机中打开该网页时 , 会根据输入类型 , 弹出指定类型的键盘 ;
二、HTML5 新增 input 表单完整代码示例
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 新增 input 表单</title>
<style>
li {
list-style: none;
}
</style>
</head>
<body>
<form action="">
<li>邮箱 : <input type="email" /></li>
<li>网址 : <input type="url" /></li>
<li>日期 : <input type="date" /></li>
<li>时间 : <input type="time" /></li>
<li>月份 : <input type="month" /></li>
<li>周数 : <input type="week" /></li>
<li>数字 : <input type="number" /></li>
<li>手机 : <input type="tel" /></li>
<li>搜索 : <input type="search" /></li>
<li>颜色 : <input type="color" /></li>
<!-- 表单域的提交按钮 用于提交整个表单域 -->
<input type="submit" value="提交">
</form>
</body>
</html>
显示效果 :
