天天看點
傳回

4.HTML5 Web表單

1.Button

 <button type="button"><b>送出</b></button><br />

 <button type="submit"><img src="images/wjc.gif" alt="crazyit.org"/> </button><br />

2.清單

下面是簡單下拉菜單：<br />
	<select id="skills" name="skills">
		<option value="java">Java語言</option>
		<option value="c">C語言</option>
		<option value="ruby">Ruby語言</option>
	</select><br /><br /><br />
	下面是允許多選的清單框：<br />
	<select id="books" name="books" multiple="multiple" size="4">
		<option value="java">Java講義</option>
		<option value="android">Android講義</option>
		<option value="ee">輕量級Java EE企業應用實戰</option>
	</select><br />
	下面是允許多選的清單框：<br />
	<select id="leegang" name="leegang"  multiple="multiple" size="6">
		<optgroup label="Java體系圖書">
			<option value="java" label="aaaaaaaa">Java講義</option>
			<option value="android">Android講義</option>
			<option value="ee">輕量級Java EE企業應用實戰</option>
		</optgroup>
		<optgroup label="其他圖書">
			<option value="struts">Struts 2.1權威指南</option>
			<option value="ror">RoR靈活開發最佳實踐</option>
		</optgroup>
	</select><br />
	<button type="submit"><b>送出</b></button><br />

3.HTML5為表單控件新增的屬性

3.1 form屬性

物品描述：<textarea name="desc" form="addForm"></textarea>

3.2 formaction屬性

不同的按鈕送出到不同的action

<form method="post">
	使用者名：<input type="text" name="name"/><br/>
	密碼：<input type="password" name="name"/><br/>
	<input type="submit" value="注冊" formaction="regist"/>
	<input type="submit" value="修改" formaction="login"/>
</form>

3.3 formmethod屬性

動态的讓按鈕設定表單以post或get方式送出。

<form method="post" action="pro">
	使用者名：<input type="text" name="name"/><br/>
	密碼：<input type="password" name="name"/><br/>
	<input type="submit" value="GET送出" formmethod="get"/>
	<input type="submit" value="POST送出" formmethod="post"/>
</form>

3.4 formenctype屬性

讓按鈕動态的改變表單的額enctype屬性。

3.5 formtarget屬性

動态的改變表單的target屬性。

3.6 autofocus屬性

3.7 placeholder屬性

<form method="post">
	使用者名：<input type="text" name="name" placeholder="請輸入使用者名"/><br/>
	密碼：<input type="password" name="name" placeholder="請輸入密碼"/><br/>
	<input type="submit" value="注冊" formaction="regist"/>
	<input type="submit" value="修改" formaction="login"/>
</form>

3.8 list屬性

<form method="post" action="buy">
	請輸入圖書：<input type="text" name="name" list="books"/><br/>
	<input type="submit" value="購買"/>
</form>
<datalist id="books">
	<option value="java">瘋狂Java講義</option>
	<option value="ee">輕量級Java EE企業應用實戰</option>
	<option value="android">瘋狂Android講義</option>
</datalist>

3.9 autocomplete屬性

<form method="post" action="buy">
	請輸入圖書：<input type="text" name="name" list="books" autocomplete="off"/><br/>
	<input type="submit" value="購買"/>
</form>
<datalist id="books">
	<option value="瘋狂Java講義">瘋狂Java講義</option>
	<option value="輕量級Java EE企業應用實戰">輕量級Java EE企業應用實戰</option>
	<option value="瘋狂Android講義">瘋狂Android講義</option>
</datalist>

4. 功能豐富的input元素

<form action="do">
	type="color"的文本框:<br/><input name="color" type="color"/><p>
	type="date"的文本框:<br/><input name="date" type="date"/><p>
	type="time"的文本框:<br/><input name="time" type="time"/><p>
	type="datetime"的文本框:<br/><input name="datetime" type="datetime"/><p>
	type="datetime-local"的文本框:<br/><input name="datetime-local" type="datetime-local"/><p>
	type="month"的文本框:<br/><input name="month" type="month"/><p>
	type="time"的文本框:<br/><input name="time" type="time"/><p>
	type="week"的文本框:<br/><input name="week" type="week"/><p>
	type="email"的文本框:<br/><input name="email" type="email" multiple/><p>
	type="tel"的文本框:<br/><input name="tel" type="tel"/><p>
	type="url"的文本框:<br/><input name="url" type="url"/><p>
	type="number"的文本框:<br/><input name="number" type="number"/><p>
	type="range"的文本框:<br/><input name="range" type="range" min="0" max="100" step="5"/><p>
	type="search"的文本框:<br/><input name="search" type="search"/><p>
	<input value="送出" type="submit"/>
</form>

5.HTML5增強的檔案上傳域

5.1 FileList對象和File對象

<body>
浏覽圖檔：<input id="images" type="file" multiple accept="image/*"/>
<input type="button" value="顯示檔案" οnclick="showDetails();"/>
<script type="text/javascript">
var showDetails = function()
{
	var imageEle = document.getElementById("images");
	// 擷取檔案上傳域内輸入的多個檔案
	var fileList = imageEle.files;
	// 周遊每個檔案
	for(var i = 0 ; i < fileList.length ; i ++)
	{
		var file = fileList[i];
		div = document.createElement("div");
		// 依次讀取每個檔案的檔案名、檔案類型、檔案大小
		div.innerHTML = "第" + (i + 1) + "個檔案的檔案名是：" + file.name
			+ "，該檔案類型是：" + file.type
			+ "，該檔案大小為：" + file.size;
		// 把div元素添加到頁面中。
		document.body.appendChild(div);
	}
}
</script>
</body>

5.2 使用FileReader讀取檔案内容

FileReader提供的如下方法:

  • readAsText(file,encoding)
  • readAsBinaryString(file)
  • readAsDataURL(file)
  • abort()
  • onloadstart()
  • onprogress
  • onload
  • onerror 
<body>
	浏覽檔案：
	<input id="file1" type="file"/><br/>
	<div id="result"></div>
	<input type="button" value="讀取文本檔案" οnclick="readText();"/><br/>
	<input type="button" value="讀取二進制檔案" οnclick="readBinary();"/><br/>
	<input type="button" value="以DataURL方式讀取" οnclick="readURL();"/><br/>
	<script type="text/javascript">
	var reader = null;
	// 如果浏覽器支援FileReader對象
	if(FileReader)
	{
		reader = new FileReader();
	}
	// 如果浏覽器不支援FileReader對象，彈出提示資訊
	else
	{
		alert("浏覽器暫不支援FileReader");
	}
	var readText = function()
	{
		// 通過正規表達式驗證該檔案是否為文本檔案，
		// 如果使用者選擇的第一個檔案是文本檔案
		if(/text\/\w+/.test(document.getElementById("file1").files[0].type))
		{
			// 以文本檔案的方式讀取使用者選擇的第一個檔案
			reader.readAsText(document.getElementById("file1").files[0] , "gbk");
			// 當reader讀取資料完成時将會激發該函數
			reader.onload = function()
			{
				document.getElementById("result").innerHTML = reader.result;
			};
		}
		else
		{
			alert("你選擇的檔案不是文本檔案！");
		}
	}
	var readBinary = function()
	{
		// 以二進制流的方式讀取使用者選擇的第一個檔案
		reader.readAsBinaryString(document.getElementById("file1").files[0]);
		// 當reader讀取資料完成時将會激發該函數
		reader.onload = function()
		{
			document.getElementById("result").innerHTML = reader.result;
		};
	}
	var readURL = function()
	{
		// 以DataURL的方式讀取使用者選擇的第一個檔案
		reader.readAsDataURL(document.getElementById("file1").files[0]);
		// 當reader讀取資料完成時将會激發該函數
		reader.onload = function()
		{
			document.getElementById("result").innerHTML = reader.result;
		};
	}
	</script>
</body>
           
<body>
浏覽檔案：<input id="file1" type="file"/><br/>
上傳進度：<progress id="pro" value="0"></progress>
<div id="result"></div>
<input type="button" value="讀取二進制檔案" οnclick="readBinary();"/><br/>
<script type="text/javascript">
	var reader = null;
	// 如果浏覽器支援FileReader對象
	if(FileReader)
	{
		reader = new FileReader();
	}
	// 如果浏覽器不支援FileReader對象，彈出提示資訊
	else
	{
		alert("浏覽器暫不支援FileReader");
	}
	var readBinary = function()
	{
		// 以二進制流的方式讀取使用者選擇的第一個檔案
		reader.readAsBinaryString(document.getElementById("file1").files[0]);
		var pro = document.getElementById("pro");
		pro.max = document.getElementById("file1").files[0].size;
		// 當reader讀取資料的過程中會不斷激發該函數。
		reader.onprogress = function(evt)
		{
			pro.value = evt.loaded;
		};
	}
</script>

6.HTML5 用戶端校驗

6.1 通過屬性進行校驗

<form action="add">
	圖書名：<input name="name" type="text" required/><br/>
	圖書ISBN：<input name="isbn" type="text" required pattern="\d{3}-\d-\d{3}-\d{5}"/><br/>
	圖書價格：<input name="price" type="number"  min="20" max="150" step="5"/><br/>
	<input type="submit" value="送出"/>
</form>

6.2 通過checkValidity進行校驗

<body>
	<form action="add">
		生日：<input id="birth" name="birth" type="date"/><br/>
		郵件位址：<input id="email" name="email" type="email"/><br/>
		<input type="submit" value="送出" οnclick="return check();"/>
	</form>
	<script type="text/javascript">
		var check = function()
		{
			return commonCheck("birth" , "生日" , "字段必須是有效的日期！")
				&& commonCheck("email" , "郵件位址" , "字段必須符合電子郵件的格式！");
		}
		var commonCheck = function(field , fieldName , tip)
		{
			var targetEle = document.getElementById(field);
			// 如果該字段的值為空
			if (targetEle.value.trim() == "")
			{
				alert(fieldName + "字段必須填寫！");
				return false;
			}
			// 調用checkValidity()方法執行輸入校驗
			else if(!targetEle.checkValidity())
			{
				alert(fieldName + tip);
				return false;
			}
			return true;
		}
	</script>
</body>

6.3自定義錯誤提示

<body>
	<form action="add">
		生日：<input id="birth" name="birth" type="date"/><br/>
		郵件位址：<input id="email" name="email" type="email"/><br/>
		<input type="submit" value="送出" οnclick="return check();"/>
	</form>
	<script type="text/javascript">
		var check = function()
		{
			return commonCheck("birth" , "生日" , "字段必須是有效的日期！")
				&& commonCheck("email" , "郵件位址" , "字段必須符合電子郵件的格式！");
		}
		var commonCheck = function(field , fieldName , tip)
		{
			var targetEle = document.getElementById(field);
			// 如果該字段的值為空
			if (targetEle.value.trim() == "")
			{
				alert(fieldName + "字段必須填寫！");
				return false;
			}
			// 調用checkValidity()方法執行輸入校驗
			else if(!targetEle.checkValidity())
			{
				alert(fieldName + tip);
				return false;
			}
			return true;
		}
	</script>
</body>

6.4 關閉校驗

<div>
	<form novalidate>
		<fieldset>
			<legend>Contact Details</legend>
			<label for="name">Name <em>*</em></label>
			<input id="name" placeholder="Jane Smith" autofocus required><br>
			<label for="telephone">Telephone</label>
			<input id="telephone" placeholder="xxx-xxxx" pattern="[0-9]{3}-{0-9}{3}"><br>
			<label for="email">Email <em>*</em></label>
			<input id="email" type="email" required><br> 
		</fieldset>
		<p><input type="submit" value="Submit Application"></p>
	</form>
</div>

7.綜合

<div>
	<input id="email" type="email" required><br> 
	<input id="url" type="url" required><br> 
	<input id="search" type="search" required><br> 
	<input id="tel" type="tel" required><br> 
	<input id="number" type="number" min="0" max="10"><br> 
	<input id="range" type="range" min="1" max="3" step="1"><br> 
	<input id="date" type="date" required><br> 
	<input id="datetime" type="datetime" required><br>
	<input id="datetimelocal" type="datetimelocal" required><br>
	<input id="month" type="month" required><br> 
	<input id="week" type="week" required><br> 
	<input id="time" type="time" required><br> 
	<input id="color" type="color" required><br> 
</div>


<div>
	  <fieldset>
		<legend>What's Your Favorite Animal?</legend>
		<datalist id="animalChoices">
			<span class="Label">Pick an option:</span>
			  <select id="favoriteAnimalPreset">
				<option label="Alpaca" value="alpaca">
				<option label="Zebra" value="zebra">
				<option label="Pigeon" value="pigeon">
				<option label="Crab" value="crab">
			  </select>
			<span class="Label">Or type it in:</span>
		</datalist>
		<input list="animalChoices" id="favoriteAnimal">
	  </fieldset>
</div>

<div>
	<h1>Progress Bars</h1>
	<progress max=100 value=50>50%</progress><br>
	<progress>Task in progress...</progress>

	<h1>Meters</h1>
	<meter min="5" max="70" value="28">28 pounds</meter><br>
	<meter min="5" max="100" high="70" value="79">79 pounds</meter><br>
	<meter max="50000" value="14000"></meter>
</div>


<div>
	<script>
	function startEdit() {
	  var element = document.getElementById("editableElement");
	  element.contentEditable = true;
	} 
	function stopEdit() {
	  var element = document.getElementById("editableElement");
	  element.contentEditable = false; 
	}
	</script>
	<div id="editableElement">You can edit this text, if you'd like.</div>
	<div>
	  <button οnclick="startEdit()">Start Editing</button>
	  <button οnclick="stopEdit()">Stop Editing</button>
	</div>
</div>

<div>
	<script>
	function startHTML() {
	  var editor = document.getElementById("pageEditor");
	  editor.contentWindow.document.designMode = "on";
	}

	function stopHTML() {
	  var editor = document.getElementById("pageEditor");
	  editor.contentWindow.document.designMode = "off"; 
	  var htmlDisplay = document.getElementById("editedHTML");
	  htmlDisplay.textContent =   editor.contentWindow.document.body.innerHTML;
	}
	</script>
	
	
	<iframe id="pageEditor" src="http://www.baidu.com"></iframe>
	<div>
	  <button οnclick="startHTML()">Start Editing HTML.</button>
	  <button οnclick="stopHTML()">Stop Editing HTML.</button>
	</div>
	<div id="editedHTML"></div>
</div>
html5
上一篇: 曲苑雜壇--資料庫更新探秘
下一篇: JavaScript實作對三種基本排序算法的計時比較

繼續閱讀