html5學習筆記五--表單
阿新 • • 發佈：2019-01-06
html5表單是很強大的東西，裡面增加了例如Email，range等型別。
一，首先介紹的幾個輸入型別應用格式差不多，首先介紹下demo_form.php，在使用這些型別時首先把資料提交到伺服器，如果格式不對就會有錯誤反饋。
詳細介紹其中的search型別：
<!DOCTYPE html > <html> <body> <from action="demo_form.php" method="get"> 請輸入日期: <input type="date" name="date1" value="2014-10-23"/> <input type="submit" /> </body> </html>
value是指預設值。
二，input屬性
1，autocomplete
用於對輸入的內容實現自動完成，比如輸入b馬上提示beijing
autocomplete 屬性有三種 on ，off，空值
下面是一個例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <body> <h2>自動完成例項</h2> 輸入你最喜歡的城市<br/> <from autocomplete="on"> <input type="text" id="name1" list="citylist"> <datalist id="citylist" style="display:none;" <option value="Beijing">Beijing</option> <option value="c">c</option> <option value="tianjing">tianjing</option> </datalist> </form> </body> </html>
測試之後，只有在ie下可以實現，搜狗和360不能實現。
2，autofocus屬性
在一個頁面中，會把游標定位在需要輸入的表單上。
當然也可以把autofocus放在<!DOCTYPE html > <html > <head> <meta charset="utf-8" > <title>autofocus</title> </head> <body> <form> <p> <label for="textarea1"></label> <textarea name="textarea1" id="textarea1" cols="45" rows="5" autofocus="on">rules</textarea><br/> </p> <p> <input type="submit" value="同意" > <input type="submit" value="拒絕" > </p> </form> </body> </html>
<input type="submit" value="同意" autofocus=“on” >上form屬性可以讓<form></form>之外的元素一起隨著表單提交，只要id相同就可以。
<!DOCTYPE html >
<html >
<head>
<meta charset="utf-8" >
<title>autofocus</title>
</head>
<body>
<form>
<form action="" method="get" id="1">
請輸入國家：<input type="text" name="guojia" autofocus/>
<input type="submit" value="提交" >
</form>
請輸入地址:<input type="text" name="address" form="1"/>
</body>
</html>
4.