定義

定義了一個區域，可以和使用者互動的區域，也可以用來向web伺服器提交資訊，一般用來做登陸註冊搜尋的功能。

form表單的屬性：

• action ：一個處理這個form資訊的程式所在的URL 規定向何處傳送表單 （接受資料的地址）
• method ：提交表單的方式

1. post: 表單資料會包含在表單體內然後傳送給伺服器. 這種只是相對get方式安全一些，但是其實一點也不安全！更安全的別想著靠個屬性值就能實現了。
2. get: 表單資料會附加在 action 屬性的URI中，並以 ‘?’ 作為分隔符, 然後這樣得到的 URI 再發送給伺服器. 當這樣做（資料暴露在URI裡面）。

• target：指示在提交表單之後，在哪裡顯示收到的回覆 _self預設 _blank在新視窗開啟
• name: 這個form的名字。HTML5中，一個文件中的多個form當中，name必須唯一而不僅
  僅是一個空字串。

表單元素/互動（input）控制元件：

為基於Web的表單建立互動式控制元件，以便接受來自使用者的資料。大部分用input標籤來定義表單元素！決定表單元素的型別的取決於type屬性！

文字框：

<input type='' name='' value='' placeholder=''>

• type 表單控制元件的型別
• name 與表單資料一起提交的控制元件的名稱。
• value 控制元件的初始值。該屬性是可選的，除非type屬性的值為radio或checkbox。
• placeholder 向用戶提示可以在控制元件中輸入的內容。佔位符文字不得包含回車符或換行符。

密碼框：

<input type='password' name='password' value='' placeholder=''>

password：其值被遮蔽的單行文字欄位

radio 單選按鈕：

<form>
    <input type='radio' name='sex' value='' id='man'><label for='man'></l
    abel>
    <input type='radio' name='sex' value=''>
    <input type='radio' name='sex' value=''>
</form>
 

radio：一個單選按鈕，允許從多個選項中選擇一個值。 要注意name值必須要相同的

label 關聯 （重要）

通常關聯一個控制元件，或者是將控制元件放置在label元素內，或者是用作其屬性。

for屬性值，對應input的id值

checkbox 多選按鈕

checkbox：允許選擇/取消選擇單個值的複選框。
可能屬性 
checked 預設選中一專案 
disabled 禁用某項

提交按鈕

submit：提交表單的按鈕

重置按鈕

reset：一個按鈕，將表格的內容重置為預設值。

上傳按鈕

file：讓使用者選擇檔案的控制元件。真正檔案上傳效果沒那麼簡單

<input type="file" >

隱藏

hidden：未顯示但其值已提交給伺服器的控制元件。（不想使用者看到的暗中資料互動）

圖片控制元件

<input type='image' src='' name='' width='' height='' border='' >

image：一個圖形提交按鈕。您必須使用src屬性來定義影象的來源，並使用alt屬性來定義替代文字。您可以使用高度和寬度屬性以畫素為單位定義影象的大小。（然而現現在基本也不使用）

非input控制元件

textareas 文字域

<textarea name="textarea"rows="10" cols="50">Write something here</textarea>

表示一個多行純文字編輯控制。

• rows屬性定義 高度
• cols屬性定義 寬度
• resize 調整尺寸樣式屬性 none/vertical/horizontal

select下拉選框

可選樣式： 
size 預設顯示幾行

datalist

加id名

input內的list屬性=“id名”，聯絡起來，提示選擇作用

option 下拉選項

用於定義在 <select>  元素中包含的項。 
可選樣式 
disabled 禁用某項 
selected 規定在select裡面預設展示項 
Value 1
Value 2 
Value 3 

fieldset 給表單分組

通常用來對錶單中的控制元素進行分組,要寫在form元素裡面。

legend

代表一個用於表示它的父元素 <fieldset> 的內容的標題。

表單偽類：

:focus

表示獲得焦點的元素（如表單輸入）。

1. input:enabled{width:;height:;}（粗略記憶）
   /*選擇能被操作的input 可以輸入可以被使用者操作的input元素*/
   

2. input:disabled{width:;height:;}（粗略記憶）
   /*選擇不能被操作的input*/

   <input type='text' disabled='disabled' />

    

3. input:checked + p{background:red;}（重點記憶）
   /*選擇可以被選中的input 需要注意的是針對radio 和 checkbox */

   <input type='checkbox' />

    

opacity（css3） 透明度

1、opacity 屬性設定元素的不透明級別 
A 標準不透明度： opacity:0~1; 
從 0（完全透明） 
到 1（完全不透明） 
opacity寫法 取值0­1 相容問題 ie8以下不識別
相容ie8以下 ：使用IE 濾鏡（相容IE下不支援opacity的版本）： 
filter:alpha(opacity=0~100);
從 0（完全透明） 
到 100（完全不透明）
2、opacity與rgba的區別 完全不一樣的概念 希望不要混淆 
rgba是透明顏色，頂多控制一個元素的背景顏色，父透子不透 
opacity是控制整個元素的透明程度，父透子也透