第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

慕少3449830 · 更新于 2020-07-13

新增表單

之前的教程中已經(jīng)簡單的介紹過了表單，早期的網(wǎng)頁中為了實現(xiàn)復雜的交互效果，通常需要使用 div+css 模擬復雜的表單類型實現(xiàn)類似日期、滑塊條、顏色選擇等效果。HTML5 標準中考慮到這種情況，增加了不少的復雜表單效果。本章主要介紹 HTML5 新增的幾種增強的表單類型。

1. email

此類型的表單跟普通 text 類型的表單類型表現(xiàn)方式一致，只是在輸入完成之后如果不符合 email 類型瀏覽器會有提示，且不允許提交，定義方式如下：

<input type=email>

以下實例使用 email 類型的表單實現(xiàn)了一個簡單的注冊功能：

實例演示
預覽 復制
復制成功！
<script>
function beforeSend(){
	if(document.getElementById("password").value != document.getElementById("password1").value) return alert("請輸入正確的密碼");
}
</script>
<form method="post" action="/redister.html" onsubmit='beforeSend()'>
	<p><label for="loginName">登錄名：</label><input name='loginName' type='text' pattern=".{3,20}">(3~20個字符)</p>
	<p><label for="password">登錄密碼：</label><input id='password' name='password' type='password' pattern=".{6,20}">(至少6位)</p>
	<p><label for="password1">重復密碼：</label><input id='password1' name='password1' type='password' pattern=".{6,20}">(至少6位)</p>
	<p><label for="email">郵箱：</label><input name='email' type='email'>(請輸入正確的郵箱地址)</p>
	<input type='reset' value='重置'><button type=submit>注冊</button>
</form>
運行案例 點擊 "運行案例" 可查看在線運行效果

2. url

url 類型的表單視覺展現(xiàn)跟 text 類型的一致，只是在輸入完成之后如果不符合 URL 類型瀏覽器會有提示，且不允許提交，語法如下：

<input type='url'>

以下示例展示了 url 表單的實際使用場景：

實例演示
預覽 復制
復制成功！
<form>
<label>姓名：</label><input type=text name='name'  pattern=".{3,20}"><!--pattern屬性用于約束輸入值-->
<label>電話：</label><input type=tel name='phone' ><!--使用tel類型表單-->
<label>住址：</label><input type=text name='address'  pattern=".{5,50}">
<label>個人主頁：</label><input type=url name='url'><!--使用url類型表單-->
<input type='reset' value='重置'>&nbsp;&nbsp;&nbsp; <button type=submit>提交</button>
</form>
運行案例 點擊 "運行案例" 可查看在線運行效果

3. number

number 類型的表單也跟 text 表現(xiàn)形式一致，但是瀏覽器會強制不能輸入非數(shù)字類型的字符，表單最后側(cè)默認會有上下兩個按鈕，語法如下：

實例演示
預覽 復制
復制成功！
<input type=number>
運行案例 點擊 "運行案例" 可查看在線運行效果

4. tel

tel 類型要求輸入一個電話號碼，但實際上它并沒有特殊的驗證，與 text 類型沒什么區(qū)別:

實例演示
預覽 復制
復制成功！
<input type=tel>
運行案例 點擊 "運行案例" 可查看在線運行效果

5. range

此類型將顯示一個可拖動的滑塊條，并可通過設定 max/min/step 值限定拖動范圍。拖動時會反饋給 value 一個值。

實例演示
預覽 復制
復制成功！
<input type=range min=20 max=100 step=2 >
運行案例 點擊 "運行案例" 可查看在線運行效果

在實際項目中可以根據(jù)動態(tài)獲取滑塊的 value 值，來實現(xiàn)一定的效果。以下展示了一個使用 range 表單實現(xiàn)了一個動態(tài)縮放圖片的功能：

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
<html>
<head>
	<title>使用滑動條縮放圖片</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;"/><!--定義滑動條-->
</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(){//通過監(jiān)聽鼠標事件動態(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);//設置圖片的縮放度
				};
			};
 
		};
	</script>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

6. color

此類型表單，可讓用戶通過顏色選擇器選擇一個顏色值，并反饋到 value 中，可以設置默認值，語法如下：

實例演示
預覽 復制
復制成功！
<input type=color>
運行案例 點擊 "運行案例" 可查看在線運行效果

實際項目中，一般用來作為為畫筆或者繪圖選擇顏色，以下示例展示了一個簡單的顏色選擇器表單：

實例演示
預覽 復制
復制成功！
<!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. 時間日期系列

這個類型的表單包含幾種類型，用來實現(xiàn)繁瑣的日歷控件，效果各有不同，語法如下：

<input type=date ><!-- 日期 -->
<input type=time ><!-- 時間 -->
<input type=datetime ><!-- 日期+時間  （已經(jīng)廢棄）-->
<input type=datetime-local ><!-- 日期+時間 -->
<input type=month ><!-- 月份 -->
<input type=week ><!-- 星期 -->

可以運行下面代碼，試試效果：

實例演示
預覽 復制
復制成功！
<p>日期：<input type=date ></p> <!-- 日期 -->
<p>時間：<input type=time ></p>  <!-- 時間 -->
<p>日期+時間(已經(jīng)廢棄):<input type=datetime ></p> <!-- 日期+時間  （已經(jīng)廢棄）-->
<p>日期+時間:<input type=datetime-local ></p> <!-- 日期+時間 -->
<p>月份:<input type=month ></p> <!-- 月份 -->
<p>星期:<input type=week ></p> <!-- 星期 -->
運行案例 點擊 "運行案例" 可查看在線運行效果

此類型表示輸入的將是一個搜索關鍵字，通過 results=s 或者 x-webkit-speech 可顯示一個搜索小圖標。語法如下：

實例演示
預覽 復制
復制成功！
<input type=search results=s >
運行案例 點擊 "運行案例" 可查看在線運行效果

這個表單在實際項目中適用場景較少，所以沒有示例可以參考。

9. 小結(jié)

回顧本章介紹了幾種實時交互效果較強的表單控件及用法，彌補了早期 HTML 中的交互缺失的情況。