例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>h5新表单特性</title>
</head>
<body>
<form action="#" method="GET" form="form1">
电话：<input type="tel" name="tel"/><br />
颜色：<input type="color" name="color"/><br />
邮箱：<input type="email" name="email" placeholder="请输入邮箱"/><br />
网址：<input type="url" name="url" placeholder="请输入网址" /><br />
年龄 ：<input type="number" name="age"
value="10" min="0" max="150" step="5"/><br />
温度：<input type="range" name="wd" min="-50" max="50" value="0"/><br />
出生年月日：<input type="date" name="brithday"/><br />
月，年：<input type="month" name="month"/><br />
周，年：<input type="week" name="week"/><br />
时间(小时，分钟)：<input type="time" name="time"/><br />
("UTC"时区)时间：<input type="datetime" name="datetime"/><br />
本地时间：<input type="datetime-local" name="time"/><br />
搜索域：<input type="search" name="search"/><br />
可以自己输入的下拉列表：<br />
<input type="url" list="url_list" name="link"/>
<datalist id="url_list">
<option label="河南" value="1"/>
<option label="河北"value="2"/>
<option label="山西" value="3"/>
<option label="山东 " value="4"/>
</datalist><br />
定义隐藏的输入字段：不会再页面中显示，但是提交时会一起提交
<input type="hidden" name="id" value="12345678"/>
<input type="image" src="img/addc.png" alt="自动提交" height="100" width="100"/>
<input type="submit" value="提交"/>
<input type="submit" value="提交"/>
</form>
<input type="url" name="asd" form="forml" required/>
acctofocus:自动聚焦
form：关联外部的输入框
height和width属性规定用于image类型的input标签的图像高度和宽度。
required：不能为空
placeholder:输入的提示
</body>
</html>表单作业练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="#" method="post">
<strong>站点名称</strong><br />
<input type="text" value="SchoolCMS" name="text"/><br />
<strong>站点logo</strong><small>（尺寸最大180x38像数，支持[jpg，png，gif]）</small><br />
<input type="file" value="选择网站"name="xz"><img src="img/home_logo.png" height="60px"width="100px"/><br />
<br />
<strong>默认时区</strong><small>（默认 亚洲、上海[标准时+8]）</small><br />
<select name="dq">
<option selected>亚洲/上海(标准时+8)</option>
<option>欧洲/安尔道（标准时+1）</option>
<option>亚洲杜拜（标准时+4）</option>
</select><br />
<strong>图片最大限制</strong><small>（单位B[上传图片还受到服务器空间PHP配置最大上传20M限制]）</small><br />
<input type="max" value="2048000" name="max"/><br />
<strong>文件最大限制</strong><small>（单位B[上传文件还受到服务器空间PHP配置最大上传20M限制]）</small><br />
<input type="max" value="51200000" name="max"/><br />
<strong>视频最大限制</strong><small>（单位B[上传视频还受到服务器空间PHP配置最大上传20M限制]）</small><br />
<input type="text" value="102400000" name="max"/><br />
<strong>页面最大宽度</strong><small>（页面最大宽度，单位px，0则100%）</small><br />
<input type="text" value="1200" name="text"/><br />
<strong>站点状态</strong><small>（可暂时将站点关闭，其他人无法访问，但不影响管理员访问后台）</small><br />
<input type="text" value="开启" name="text"/><br />
<strong>关闭原因</strong><small>（支持html，当网站处于关闭状态时，关闭原因将显示在前台）</small><br />
<input type="text" value="升级中..." name="text" style="height: 80px;width: 300px;"/><br />
<strong>是否开启注册</strong><small>（关闭注册后，前台站点将无法注册，可选择[短信，邮箱]）</small><br />
<input type="radio" value="短信x" name="text"/>短信x<input type="radio" value="邮箱x"name="text"/>邮箱x<br />
<br />
<strong>是否开启登录</strong><small>（关闭后，前台站点将无法登录）</small><br />
<select name="kq">
<option selected>开启</option>
<option>关闭</option>
<br /></select><br />
<strong>验证码有效时间</strong><small>（验证码过期时间，一般10分钟左右，单位[秒]）</small><br />
<input type="text " value="600" name="text"/><br />
<strong>获取验证码时间间隔</strong><small>（防止频繁获取验证码，一般在30~120秒之间，单位[秒]）</small><br />
<input type="text" value="30" name="text"/><br />
<strong>获取验证码-开启图片验证码</strong><small>（防止短信轰炸）</small><br />
<input type="text" value="开启" name="text"/><br />
<strong>LCP证书号</strong><small>（LCP域名备案号）</small><br />
<input type="text" value="LCP域名备案号" name="text"/><br />
<strong>底部代码</strong><small>（支持html，可用于添加流量统计代码）</small><br />
<input type="text" value="底部代码" name="text" style="height: 100px;width: 600px;"/><br />
<p colspan="6">
<input type="submit" name="text" value="保存" style="background-color: cornflowerblue;height: 20px;width: 600px;"/><br />
</p>
</form>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
