HTML5學習筆記4

10.表單元素
表單元素用於獲取用戶的輸入數據
form 表示HTML表單
屬性：
    action 表示表單提交的頁面
    method 表示表單提交的請求方式：有POST和GET兩種，默認GET（POST採用表單提交，GET採用超連接提交）
    enctype 表示瀏覽器對發生給服務器的數據所採用的編碼格式（須要將文件上傳的時候才設置），有三種
       application/x-www-form-urlencoded 默認編碼，不能將文件上傳到服務器
       multipart/form-data 用於將文件上傳到服務器
       text/plain 未規範編碼，不建議使用，不一樣瀏覽器理解不一樣
    name 設置表達名稱，以便程序調用
    target 設置提交表單的目標位置：_blank,_parent,_self,_top
    autocomplete 設置瀏覽器記住用戶輸入的數據，實現自動完成表達，默認爲on自動完成
    novalidate 設置是否執行客戶端數據的有效性檢查

input 表示用來收集用戶輸入數據的控件
屬性：
    autofocus 將光標聚焦在某個input元素上，讓用戶直接輸入
    disabled 禁用input元素
    autocomplete 單獨設置input元素的自動完成功能
    type input元素的類型，見下面介紹
    name 定義input元素的名稱，以便直接接收到相應的值
    value 默認出現的值
    form 讓表單外的元素和指定的表單掛鉤提交（要設置id）

label 表示表單元素的說明標籤 能夠設置css樣式，提升用戶體驗
fieldset 表示一組表單元素能夠將一些表單元素組織在一塊兒，造成一個總體
legend 表示fieldset元素的說明性標籤 給分組加上一個標題
button 表示可用來提交或重置的表單按鈕
    type屬性有如下三個值
       submit 提交表單 內部屬性能夠覆蓋form的一些屬性
       reset  重置，初期化
       button 通常性按鈕，配合javascript使用
textarea 表示能夠輸入多行文本的控件
select 表示用來提供一組固定的選項
datalist 定義一組提供給用戶的建議值
option 表示提供一個選項
optgroup 表示一組相關的option元素
output 表示計算結果

<form action="" oninput="res.value = num1.valueAsNumber * num2.valueAsNumber">
	<input type="number" id="num1">*<input type="number" id="num2">=
	<output for="num1 num2" name="res">
	<button>提交</button>
</form>

 

input的type屬性值：
button     定義可點擊的按鈕（大多與 JavaScript 使用來啓動腳本）
checkbox     定義複選框。
file     定義輸入字段和 "瀏覽..." 按鈕，供文件上傳
hidden     定義隱藏輸入字段
image     定義圖像做爲提交按鈕
password     定義密碼字段。字段中的字符會被遮蔽。
radio     定義單選按鈕。
reset     定義重置按鈕。重置按鈕會將全部表單字段重置爲初始值。
search     定義用於搜索的文本字段。
text     默認。定義單行輸入字段，用戶可在其中輸入文本。默認是 20 個字符。
html5新增屬性：
color     定義拾色器。
date     定義日期字段（帶有 calendar 控件）
datetime     定義日期字段（帶有 calendar 和 time 控件）
datetime-local     定義日期字段（帶有 calendar 和 time 控件）
month     定義日期字段的月（帶有 calendar 控件）
week     定義日期字段的周（帶有 calendar 控件）
time     定義日期字段的時、分、秒（帶有 time 控件）
email     定義用於 e-mail 地址的文本字段
number     定義帶有 spinner 控件的數字字段
range     定義帶有 slider 控件的數字字段。
submit     定義提交按鈕。提交按鈕向服務器發送數據。
tel     定義用於電話號碼的文本字段。
url     定義用於 URL 的文本字段。

輸入驗證：

HTML5對驗證比較簡陋，主要仍是靠javascript和JQuery去作

<form>
	<input type="text" required> 
	<input type="number" min="10" max="100"> 
	<input type="text" placeholder="請輸入區號+座機" pattern="^[\d]{2,4}\-[\d]{6,8}$"> 
	<button>tijiao</button>
</form>