HTML表單處理用戶輸入

1.HTML表單用於收集用戶輸入。經過<form> </form>標籤訂義

2.<input> 元素是最重要的文本元素。

2.1.text定義常規文本輸入,password定義密碼字段

<form >
User name:<br>
<input type="text" name="userid">
<br>
User password:<br>
<input type="password" name="psw">
</form>

2.2.radio定義單選按鈕輸入,checkbox 定義複選框

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

<form >
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form

2.3.submit定義提交按鈕（提交表單）

<form action="/demo/demo_form.asp" method="GET">
<input type="submit" value="Submit">
</form> 

action 屬性定義在提交表單時執行的動做。指定了某個服務器腳原本處理被提交表單
method 屬性規定在提交表單時所用的 HTTP 方法（GET 或 POST）
GET（默認方法）：適用於沒有敏感信息。表單數據較少（表單數據在頁面地址欄中是可見的）

2.4.<input type="number"> 用於應該包含數字值的輸入字段。

<form>
Quantity:
<input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

2.5.<input type="date"> 用於應該包含日期的輸入字段。(month,week,time)

<form>
Birthday:
<input type="date" name="bday">
</form>

2.6.<input type="color"> 用於應該包含顏色的輸入字段。

2.7.<input type="range"> 用於應該包含必定範圍內的值的輸入字段。

<form>
<input type="range" name="points" min="0" max="10">
</form>

2.8.<input type="email"> 用於應該包含電子郵件地址的輸入字段。
2.9.<input type="search"> 用於搜索字段（搜索字段的表現相似常規文本字段）。

 

3.<select> 元素下拉列表

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

 

4.<button> 元素定義可點擊的按鈕

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

 

5.Input 屬性value 屬性規定輸入字段的初始值readonly 屬性規定輸入字段爲只讀（不能修改）disabled 屬性規定輸入字段是禁用的size 屬性規定輸入字段的尺寸（以字符計）