(所有的浏览器都支持input标签)
根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等。
属性·type
type="email" 邮箱地址类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<ul>
<input type="email">
<!--type属性值为email,当点击提交submit后,浏览器会自行检测是否符合邮箱格式-->
</ul>
<input type="submit" value="提交">
</form>
</body>
</html>
type="url" 网址类型 ***://***.***
<body>
<form action="">
<ul>
<input type="url">
<!--type属性值为url,当点击提交submit后,浏览器会自行检测是否符合网址格式-->
</ul>
<input type="submit" value="提交">
</form>
</body>
type="date" 日期类型(可以出小日历的)
<body>
<form action="">
<ul>
<input type="date">
<!--type属性值为date,是可以出小日历的那种嘞-->
</ul>
<input type="submit" value="提交">
</form>
</body>
type="time" 时间类型(有上下箭头可以对时/分进行调整)
<body>
<form action="">
<ul>
<input type="time">
<!--type属性值为time,上下箭头可以调整时间-->
</ul>
<input type="submit" value="提交">
</form>
</body>
type="number" 数字类型(只可输入数字,其他字符无法输入)
<body>
<form action="">
<ul>
<input type="number">
<!--type属性值为number,只可以输入数字、减号(负号)、小数点-->
</ul>
<input type="submit" value="提交">
</form>
</body>
type="color" 颜色类型(会有颜色选择器提供颜色选择)
<body>
<form action="">
<ul>
<input type="color">
<!--type属性值为color,浏览器会提供颜色选择器来做颜色选择-->
</ul>
<input type="submit" value="提交">
</form>
</body>
其他属性
required="required" 输入不能为空
<body>
<form action="">
<ul>
<input type="email" required="required">
<!--提交后会提示必填项-->
</ul>
<input type="submit" value="提交">
</form>
</body>
placeholder="等待填补" 占位符/提示文本
<body>
<form action="">
<ul>
<input type="email" placeholder="等待输入">
<!--会在文本框中有提示,当输入后则消失-->
</ul>
<input type="submit" value="提交">
</form>
</body>
autofocus="autofocus" 光标自动定位
<body>
<form action="">
<ul>
<input type="email" autofocus="autofocus" >
<!--光标定位-->
</ul>
<input type="submit" value="提交">
</form>
</body>
autocomplete="on"/autocomplete="off" 是否显示历史键入值
需要配合name属性使用
例如:有一个type为email的input标签,这个标签的name值是"email"
第一次输入的值为666@aaa.com;
第二次输入时会提示上一次的666@aaa.com;
如果我们有两个input的name值都是"email",那么这两个输入框中曾输入的文本内容都会作为历史键入值在这个input文本框上显示出来
例如:一个type为text的input标签、一个type为email的input标签,但是这两个不同类型的input标签的name属性值都是"email",所以这两个input曾经的键入值都会在name="email"的input文本框'们'中的任意一个被聚焦后显示出来。
那么,如果所有表单元素都不想使用autocomplete功能呢?见下面的方法:
直接给form表单加上自动填充的属性,设置属性值为off就ok咯
<form autocomplete="off">
<!--直接给form表单上加autocomplete="off"就可以关掉整个表单的自动填充了-->
<input type="text" name="wd">
<input type="email" name="email">
</form>