您的位置：首页 > Web前端 > HTML5

h5表单基本属性

2016-10-28 10:05 363 查看
页面，ie，火狐，Google对每个属性的支持不同，部分时间属性无法显示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="widtd=device-widtd,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
　　<link rel="stylesheet" href="h5.css" type="text/css">
<title>H5表单</title>
</head>
<body>
<h3 align="center">HTML5新表单</h3>
<form autocomplete="on" name="form" action="" method="get" >
<table>
<tr>
<td style="background-color:#CCC"><strong>说明</strong></td>
<td style="background-color:#CCC"><strong>控件效果</strong></td>
</tr>
<tr>
<td class="tdOne">颜色选择器</td>
<td><input type="color" name="favcolor" class="wid"/></td>
</tr>
<tr>
<td class="tdOne">时间日期</td>
<td><input type="datetime" class="wid"></td>
</tr>
<tr>
<td class="tdOne">日期</td>
<td><input type="date" name="time" class="wid"/></td>
</tr>
<tr>
<td class="tdOne">时间</td>
<td><input type="time" class="wid" name="time"></td>
</tr>
<tr>
<td class="tdOne">电子邮件</td>
<!--required属性用了验证type="email"邮箱格式是否正确，其余类型验证也用request -->
<td><input type="email" class="wid" name="email" placeholder="请输输入邮箱，如，1508396210@qq.com" required="true"></td>
</tr>
<tr>
<td class="tdOne">网址</td>
<td><input type="url" class="wid" name="url"></td>
</tr>
<tr>
<td class="tdOne">数字</td>
<td><input type="number" class="wid" name"number"></td>
</tr>
<tr>
<td class="tdOne">滑动条</td>
<td><input type="range" name="range" class="wid"></td>
</tr>
<tr>
<td class="tdOne">搜索文本框</td>
<td><input type="search" class="wid" name="search"></td>
</tr>
<tr>
<td class="tdOne">电话号码</td>
<td><input type="tel" class="wid" required="true"></td>
</tr>
<tr>
<td class="tdOne">文本输入提供备选</td>
<td><input type="text" name="text1" class="wid"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="提交"></td>
<td></td>
</tr>
</table>
</form>
</body>
</html>


css类用来控制前台布局

table{
border:1px solid #000;
border-collapse: collapse;
margin-top: 10px;
width: 100%;}
td{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
border: 1px solid #000;
text-align: center;
height:40px;
}
.tdOne{
font-size:14px;
width:30%;
}
.wid{
width:80%;
height:80%;
text-align:center;
}
input[type="submit"]{
width:100px;
height:80%;
background-color:#CCC;
}

效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航