慕少3449830 ·新增表單
之前的教程中已經(jīng)簡(jiǎn)單的介紹過(guò)了表單，早期的網(wǎng)頁(yè)中為了實(shí)現(xiàn)復(fù)雜的交互效果，通常需要使用 div+css 模擬復(fù)雜的表單類(lèi)型實(shí)現(xiàn)類(lèi)似日期、滑塊條、顏色選擇等效果。HTML5 標(biāo)準(zhǔn)中考慮到這種情況，增加了不少的復(fù)雜表單效果。本章主要介紹 HTML5 新增的幾種增強(qiáng)的表單類(lèi)型。
1. email
此類(lèi)型的表單跟普通 text 類(lèi)型的表單類(lèi)型表現(xiàn)方式一致，只是在輸入完成之后如果不符合 email 類(lèi)型瀏覽器會(huì)有提示，且不允許提交，定義方式如下：
<input type=email>
以下實(shí)例使用 email 類(lèi)型的表單實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的注冊(cè)功能：
<script>
function beforeSend(){
if(document.getElementById("password").value != document.getElementById("password1").value) return alert("請(qǐng)輸入正確的密碼");
}
</script>
<form method="post" action="/redister.html" onsubmit='beforeSend()'>
<p><label for="loginName">登錄名：</label><input name='loginName' type='text' pattern=".{3,20}">(3~20個(gè)字符)</p>
<p><label for="password">登錄密碼：</label><input id='password' name='password' type='password' pattern=".{6,20}">(至少6位)</p>
<p><label for="password1">重復(fù)密碼：</label><input id='password1' name='password1' type='password' pattern=".{6,20}">(至少6位)</p>
<p><label for="email">郵箱：</label><input name='email' type='email'>(請(qǐng)輸入正確的郵箱地址)</p>
<input type='reset' value='重置'><button type=submit>注冊(cè)</button>
</form>
2. url
url 類(lèi)型的表單視覺(jué)展現(xiàn)跟 text 類(lèi)型的一致，只是在輸入完成之后如果不符合 URL 類(lèi)型瀏覽器會(huì)有提示，且不允許提交，語(yǔ)法如下：
<input type='url'>
以下示例展示了 url 表單的實(shí)際使用場(chǎng)景：
<form>
<label>姓名：</label><input type=text name='name' pattern=".{3,20}"><!--pattern屬性用于約束輸入值-->
<label>電話(huà)：</label><input type=tel name='phone' ><!--使用tel類(lèi)型表單-->
<label>住址：</label><input type=text name='address' pattern=".{5,50}">
<label>個(gè)人主頁(yè)：</label><input type=url name='url'><!--使用url類(lèi)型表單-->
<input type='reset' value='重置'> <button type=submit>提交</button>
</form>
3. number
number 類(lèi)型的表單也跟 text 表現(xiàn)形式一致，但是瀏覽器會(huì)強(qiáng)制不能輸入非數(shù)字類(lèi)型的字符，表單最后側(cè)默認(rèn)會(huì)有上下兩個(gè)按鈕，語(yǔ)法如下：
4. tel
tel 類(lèi)型要求輸入一個(gè)電話(huà)號(hào)碼，但實(shí)際上它并沒(méi)有特殊的驗(yàn)證，與 text 類(lèi)型沒(méi)什么區(qū)別:
5. range
此類(lèi)型將顯示一個(gè)可拖動(dòng)的滑塊條，并可通過(guò)設(shè)定 max/min/step 值限定拖動(dòng)范圍。拖動(dòng)時(shí)會(huì)反饋給 value 一個(gè)值。
<input type=range min=20 max=100 step=2 >
在實(shí)際項(xiàng)目中可以根據(jù)動(dòng)態(tài)獲取滑塊的 value 值，來(lái)實(shí)現(xiàn)一定的效果。以下展示了一個(gè)使用 range 表單實(shí)現(xiàn)了一個(gè)動(dòng)態(tài)縮放圖片的功能：
<!DOCTYPE html>
<html>
<head>
<title>使用滑動(dòng)條縮放圖片</title>
</head>
<body style="">
<canvas id="canvas" style="display: block;margin: 0 auto;border: 1px solid #aaa;background:black">
你的瀏覽器不支持canvas。
</canvas>
<input type="range" id="range" min="0.5" max="5.0" step="0.01" value="1.0" style="display: block;margin: 20px auto;width: 800px;"/><!--定義滑動(dòng)條-->
</body>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var slider = document.getElementById("range");
var image = new Image();
window.onload = function(){//瀏覽器加載完成之后觸發(fā)
canvas.width = 600;
canvas.height = 400;
image.src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"; //加載圖片
image.onload = function() {
slider.onmousemove = function(){//通過(guò)監(jiān)聽(tīng)鼠標(biāo)事件動(dòng)態(tài)獲取滑塊的value值
var scale = slider.value;
var width = canvas.width * scale;
var height = canvas.height * scale;
var dx = canvas.width/2 - width/2;
var dy = canvas.height/2 - height/2;
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(image, dx, dy, width, height);//設(shè)置圖片的縮放度
};
};
};
</script>
</html>
6. color
此類(lèi)型表單，可讓用戶(hù)通過(guò)顏色選擇器選擇一個(gè)顏色值，并反饋到 value 中，可以設(shè)置默認(rèn)值，語(yǔ)法如下：
實(shí)際項(xiàng)目中，一般用來(lái)作為為畫(huà)筆或者繪圖選擇顏色，以下示例展示了一個(gè)簡(jiǎn)單的顏色選擇器表單：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>顏色選擇器</title>
</head>
<body>
<form name="test" id="test" method="post" action="test.php">
選擇顏色:<input type="color" form="ant" name="color"/>
<input type="submit" value="提交">
</form>
</body>
</html>
7. 時(shí)間日期系列
這個(gè)類(lèi)型的表單包含幾種類(lèi)型，用來(lái)實(shí)現(xiàn)繁瑣的日歷控件，效果各有不同，語(yǔ)法如下：
<input type=date ><!-- 日期 -->
<input type=time ><!-- 時(shí)間 -->
<input type=datetime ><!-- 日期+時(shí)間 （已經(jīng)廢棄）-->
<input type=datetime-local ><!-- 日期+時(shí)間 -->
<input type=month ><!-- 月份 -->
<input type=week ><!-- 星期 -->
可以運(yùn)行下面代碼，試試效果：
<p>日期：<input type=date ></p> <!-- 日期 -->
<p>時(shí)間：<input type=time ></p> <!-- 時(shí)間 -->
<p>日期+時(shí)間(已經(jīng)廢棄):<input type=datetime ></p> <!-- 日期+時(shí)間 （已經(jīng)廢棄）-->
<p>日期+時(shí)間:<input type=datetime-local ></p> <!-- 日期+時(shí)間 -->
<p>月份:<input type=month ></p> <!-- 月份 -->
<p>星期:<input type=week ></p> <!-- 星期 -->
8. search
此類(lèi)型表示輸入的將是一個(gè)搜索關(guān)鍵字，通過(guò) results=s 或者 x-webkit-speech 可顯示一個(gè)搜索小圖標(biāo)。語(yǔ)法如下：
<input type=search results=s >
這個(gè)表單在實(shí)際項(xiàng)目中適用場(chǎng)景較少，所以沒(méi)有示例可以參考。
9. 小結(jié)
回顧本章介紹了幾種實(shí)時(shí)交互效果較強(qiáng)的表單控件及用法，彌補(bǔ)了早期 HTML 中的交互缺失的情況。
2025 imooc.com All Rights Reserved |