從零開始HTML(三 2016/9/20)

1.HTML表單

HTML 表單用於蒐集不一樣類型的用戶輸入。<form> 元素，HTML 表單用於收集用戶輸入。<form> 元素

①<input> 元素，<input> 元素是最重要的表單元素。<input> 元素有不少形態，根據不一樣的 type 屬性。

 

	描述
text	定義常規文本輸入。
radio	定義單選按鈕輸入（選擇多個選擇之一）
submit	定義提交按鈕（提交表單）

 

<input type="text"> 定義用於文本輸入的單行輸入字段：

<form>
 First name:<br>
<input type="text" name="firstname">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form> 

<input type="radio"> 定義單選按鈕。單選按鈕容許用戶在有限數量的選項中選擇其中之一：

<form>
<input type="radio" name="sex" value="male" checked>Male   checked表示默認這個選項
<br>
<input type="radio" name="sex" value="female">Female
</form> 

<input type="submit"> 定義用於向表單處理程序（form-handler）提交表單的按鈕。表單處理程序一般是包含用來處理輸入數據的腳本的服務器頁面。表單處理程序在表單的 action 屬性中指定：

First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form> 

 

② Action 屬性

action 屬性定義在提交表單時執行的動做，向服務器提交表單的一般作法是使用提交按鈕。一般，表單會被提交到 web 服務器上的網頁。

定義了由action_page.php來處理表單。

<form action="action_page.php">

③ Method 屬性

method 屬性規定在提交表單時所用的 HTTP 方法（GET 或 POST）：

<form action="action_page.php" method="GET">
或者
<form action="action_page.php" method="POST">

使用get:

若是表單提交是被動的（好比搜索引擎查詢），而且沒有敏感信息。

當您使用 GET 時，表單數據在頁面地址欄中是可見的,GET 最適合少許數據的提交。瀏覽器會設定容量限制。

使用post:

若是表單正在更新數據，或者包含敏感信息（例如密碼）。

POST 的安全性更加，由於在頁面地址欄中被提交的數據是不可見的。

 

④ Name 屬性

若是要正確地被提交，每一個輸入字段必須設置一個 name 屬性。

下面例子只有lase name字段被提交

<form action="action_page.php">
First name:<br>
<input type="text" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form> 

⑤ 用 <fieldset> 組合表單數據

<fieldset> 元素組合表單中的相關數據

<legend> 元素爲 <fieldset> 元素定義標題。

<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form> 

2.表單元素

① <select> 元素（下拉列表），<select> 元素定義下拉列表，<option> 元素定義待選擇的選項。列表一般會把首個選項顯示爲被選選項。

可以經過添加 selected 屬性來定義預約義選項。

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

② <textarea> 元素，<textarea> 元素定義多行輸入字段（文本域）：

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

③<button> 元素，<button> 元素定義可點擊的按鈕：

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

④ HTML5 <datalist> 元素，

<datalist> 元素爲 <input> 元素規定預約義選項列表。

用戶會在他們輸入數據時看到預約義選項的下拉列表。

<input> 元素的 list 屬性必須引用 <datalist> 元素的 id 屬性。

經過 <datalist> 設置預約義值的 <input> 元素：

<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist> 
</form>

 

3.輸入類型

① 輸入類型:text

<input type="text"> 定義供文本輸入的單行輸入字段：

<form>
 First name:<br>
<input type="text" name="firstname">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

 

②輸入類型：password，<input type="password"> 定義密碼字段：

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

 

③輸入類型：submit ，<input type="submit"> 定義提交表單數據至表單處理程序的按鈕。表單處理程序（form-handler）一般是包含處理輸入數據的腳本的服務器頁面。

在表單的 action 屬性中規定表單處理程序（form-handler）：

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form> 

還有複選框checkbox,按鍵button等類型。

 

4.輸入屬性

value定義了輸入屬性，詳細見：http://www.w3school.com.cn/html/html_form_attributes.asp

 

到這兒HTML應該就所有結束了，接下來該看看CSS了~