HTML5編程之旅 第4站 Forms
涉及到Web開發的，確定要涉及到HTML表單，本節將帶你走入HTML5表單的世界。
css
1、HTML5 Forms概述html
熟悉HTML表單的開發人士，能夠很容易的適應HTML5 Forms的新增功能。html5
XFomrs是一個以XML爲核心、功能強大卻略顯複雜的標準，其充分利用了XML Schema，制定了針對驗證和格式化的精確準則，但在未安裝插件的狀況下，主瀏覽器均不支持XForms。瀏覽器
HTML5表單注重對現有HTML表單的改進，目的在於包含更多控件類型，同時着力解決Web開發人員今天面對的實際難題，但要時刻關注表單的跨瀏覽器實現。app
HTML5表單主要關注功能動做和語義，而非外觀和顯示效果。ide
HTML5表單控件主要分爲兩大類：新的輸入型控件、新的函數和特性。函數
HTML5中引入的新的輸入型控件類型主要包括：tel(電話號碼)、email(電子郵件地址文本框)、url(網頁的url)、search(用於搜索引擎，好比在站點頂部顯示的搜索框)、range(特定值範圍的數值選擇器，如滑動條)。使用方式與之前的HTML表單相似，設置其type類型爲上述類型便可，如：<input type="email">、<input type="range" min="10" max="30">等。ui
2、使用HTML5 Fomrs APIthis
一、新表單特性和函數搜索引擎
placeholder：向用戶顯示描述性說明或提示信息，如：<input name="name" placeholder="請輸入姓名" required>。
autocomplete：用來保護敏感用戶數據，避免本地瀏覽器進行存儲 ，主要有 on（字段值無需保護）、off（字段值須要保護）、unspecified三種行爲。如：<input type="text" name="creditcard" autocomplete="off">
autofocus：指定某個表單元素得到輸入焦點
list和datalist：組合使用這兩個特性能夠爲輸入型控件構造一張選值列表，使用方法以下：（1）建立id值惟一的datalist元素，能夠在文檔任意位置插入；（2）添加若干option元素，如：
<datalist id="contactList"> <option value="2@xx.com" label="Racer"> <option value="3@xx.com" label="Perter"> </datalist>
（3）將input的list特性值設置爲datalist的id值
<input type="email" id="contacts" list="contactList">
min和max：主要用於range元素
step：指定輸入值遞增或遞減的粒度。
valueAsNumber函數：完成控件值類型在文本與數值間的相互轉換
required：指定表單元素爲必填
二、表單驗證
valueMissing
目的：確保表單控件中的值已填寫
用法：設置控件的required爲true
typeMismatch
目的：保證控件值與預期類型相匹配
用法：指定 表單控件的type特性值
patterMismatch
目的：根據控件設置的格式規則驗證輸入是否爲有效格式
用法：指定控件的pattern特性，並賦予適當的匹配規則
tooLong
目的：避免值包含過多字符
用法：設定控件的maxLength特性
rangeUnderFlow
目的：限制數值型控件的最小值
用法：設置控件的min特性，並賦值
rangeOverflow
目的：限制數值型控件的最大值
用法：設置控件的max特性，並賦值
stepMismatch
目的：確保輸入值符合min、max及step設置
用法：設置控件的step特性，並賦值
customError
目的：處理代碼及計算產生的錯誤
用法：調用setCustomValidity((message)將控件置於customError狀態
注意：還能夠經過表單控件來訪問ValidityState對象，如var check = documenet.myForm.myInput.validity；而後調用check.valid。
三、驗證反饋
在HTML5中，若是開發人員想把錯誤消息反饋給用戶，可使用invalid事件。
function invalidHandler(evt){
var validity = evt.srcElement.valididy;
if(validity.valueMissing){
//提示用戶必填項中沒有填值
}
//檢測其餘約束條件
//若是不但願瀏覽器提供默認的驗證反饋，能夠取消事件
evt.preventDefault();
}
//註冊 invalid事件的監聽器__halt_compiler
myField.addEventListener("invalid",invalidHandler,false)
還能夠經過設置noValidate特性來關閉驗證。
3、HTML5 Forms示例應用
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Forms例子</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href = "html5.css">
<style type="text/css">
label {
text-align: right;
width: 90px;
float: left;
}
input {
margin-top: 0px;
padding-top: 0px;
}
fieldset {
margin-top: 5px;
}
#confidenceDisplay {
vertical-align: top;
}
</style>
<script>
function setConfidence(newVal) {
document.getElementById("confidenceDisplay").innerHTML = newVal + '%';
}
function invalidHandler(evt) {
// find the label for this form control
var label = evt.srcElement.parentElement.getElementsByTagName("label")[0];
// set the label's text color to red
label.style.color = 'red';
// stop the event from propagating higher
evt.stopPropagation();
// stop the browser's default handling of the validation error
evt.preventDefault();
}
function loadDemo() {
// register an event handler on the form to
// handle all invalid control notifications
document.register.addEventListener("invalid", invalidHandler, true);
}
window.addEventListener("load", loadDemo, false);
</script>
</head>
<body>
<div id="container">
<header>
<h1>HTML5 Forms例子</h1>
<h3 align="center"></h3>
<h2> </h2>
<h4></h4>
</header>
<nav>
<h2>連接</h2>
<a href="#" title="Home">主頁</a>
<a href="signup.html" title="Are you crazy enough?">註冊</a>
<a href="#" title="Learn more about the T216">關於</a>
</nav>
<section>
<article>
<h2>註冊</h2>
<form name="register">
<p><label for="runnername">姓名:</label>
<input id="runnername"name="runnername" type="text"
placeholder="請填寫姓名" required></p>
<p><label for="phone">電話:</label>
<input id="phone" name="phone" type="tel"
placeholder="(xxx) xxx-xxx"></p>
<p><label for="emailaddress">E-mail:</label>
<input id="emailaddress" name="emailaddress" type="email"
placeholder="請正確填寫"></p>
<p><label for="dob">日期:</label>
<input id="dob" name="dob" type="date"
placeholder="MM/DD/YYYY"></p>
<fieldset>
<legend>大小: </legend>
<p><input id="small" type="radio" name="tshirt" value="small">
<label for="small">小</label></p>
<p><input id="medium" type="radio" name="tshirt" value="medium">
<label for="medium">中</label></p>
<p><input id="large" type="radio" name="tshirt" value="large">
<label for="large">大</label></p>
<p><label for="style">樣式:</label>
<input id="style" name="style" type="text" list="stylelist" title="Years of participation"></p>
<datalist id="stylelist">
<option value="白" label="第一年">
<option value="灰" label="第二至四年">
<option value="深藍" label="V五年以上">
</datalist>
</fieldset>
<fieldset>
<legend>預期:</legend>
<p>
<label for="confidence">可信度:</label>
<input id="confidence" name="level" type="range"
onchange="setConfidence(this.value)"
min="0" max="100" step="5" value="0">
<span id="confidenceDisplay">0%</span></p>
<p><label for="notes">備註:</label>
<textarea id="notes" name="notes" maxLength="140"></textarea></p>
</fieldset>
<p><input type="submit" name="register" value="註冊"></p>
</form>
</article>
</section>
<aside>
<h2>發起者</h2>
<p align="center">***俱樂部</p>
<p align="center"><img src="happy-trails-rc.gif" alt="Happy Trails Running Club" width="149" height="207"></p>
</aside>
<footer>
<p>Powered by HTML5</p>
</footer>
</div>
</body>
</html>
- 1. HTML5編程之旅 第6站Web Storage
- 2. HTML5編程之旅 第3站 WebSockets
- 3. HTML5編程之旅 第2站 Communication
- 4. HTML5編程之旅 第5站Web Workers
- 5. HTML5編程之旅 第1站 Geolocation
- 6. 小程序之旅——第五站（登錄）
- 7. Spring之旅第七站：面向切面編程(AOP)
- 8. 編程之旅-Day14
- 9. 編程之旅-Day4
- 10. 編程之旅-Day27
- 更多相關文章...
- • Rust 併發編程 - RUST 教程
- • 第一個MyBatis程序 - MyBatis教程
- • Github 簡明教程
- • Java 8 Stream 教程
-
每一个你不满意的现在，都有一个你没有努力的曾经。