h5表单基本属性

最新推荐文章于 2023-04-14 09:34:08 发布

悠槿璃

最新推荐文章于 2023-04-14 09:34:08 发布

阅读量523

点赞数

分类专栏： html/css

本文链接：https://blog.csdn.net/qq_27455063/article/details/52953756

版权

html/css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

页面，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;
	}

效果