HTML之HTML5增强表单标签
程序员文章站
2022-05-28 09:04:05
...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
<!--
作者：offline
时间：2019-12-24
描述：HTML5中增强的表单标签
-->
<p>
邮箱：<input type="email" />
</p>
<p>
<!--数字-->
年龄：<input type="number" />
</p>
<p>
<!--滑动器-->
滑动器：<input type="range" />
</p>
<p>
<!--搜索-->
搜索：<input type="search" />
</p>
<p>
<!--日期-->
日期：<input type="date" />
</p>
<p>
<!--星期-->
星期：<input type="week" />
</p>
<p>
<!--月份-->
月份：<input type="month" />
</p>
<p>
<!--颜色-->
颜色：<input type="color" />
</p>
<p>
<input type="submit" value="提交" />
<input type="reset" value="清空" />
</p>
<hr />
<!--
作者：offline
时间：2019-12-24
描述：H5中表单增强的属性
placeholder：框中默认值
autofocus：自动获得焦点
max：数值的最大值
min：数值的最小值
minlength：最小长度
maxlength：最大长度
-->
<form>
<p>
账号：<input type="text"
placeholder="手机号/邮箱"
autofocus />
</p>
<p>
密码：<input type="password" max="200" min="100" />
</p>
<p>
密码：<input type="password" minlength="6" maxlength="16" />
</p>
<p>
<input type="submit" value="提交" />
<input type="reset" value="清空" />
</p>
</form>
</form>
</body>
</html>
效果展示
上一篇： CSS时钟案例
下一篇： 时间服务器、日志服务器以及sudo用法