HTML表單處理使用者輸入

標籤：click   max   點擊   密碼   cli   指令碼   anti   veh   class   

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 屬性規定輸入欄位的尺寸（以字元計）

 

HTML表單處理使用者輸入