0719

表格

表格標籤：
table 表格
thead 表格頭
tbody 表格主體
tr 表格行
th 元素定義表頭
td 元素定義表格單元

表格樣式重置：

table{border-collapse:collapse;} 
/*單元格間隙合併*/
th,td{padding:0;}
/*重置單元格預設填充*/

colspan 屬性規定單元格可橫跨的列數。

<td colspan="2"></td>

rowspan 屬性規定單元格可橫跨的行數。

<td rowspan="2"></td>

表單

form 表單

<input type="…… " name="" value="" />

input value 屬性

value 屬性為 input 元素設定值。
對於不同的輸入型別，value 屬性的用法也不同：
type=”button”, “reset”, “submit” - 定義按鈕上的顯示的文字
type=”text”, “password”, “hidden” - 定義輸入欄位的初始值
type=”checkbox”, “radio”, “image” - 定義與輸入相關聯的值
註釋：<input type="checkbox"> 和 <input type="radio">

<input value="value">

input name 屬性

name 屬性規定 input 元素的名稱。
name 屬性用於對提交到伺服器後的表單資料進行標識，或者在客戶端通過 JavaScript 引用表單資料。
註釋：只有設定了 name 屬性的表單元素才能在提交表單時傳遞它們的值。

<form action="form_action.asp" method="get">
  <p>Name: <input
 
 type="text" name="fullname" /></p>
  <p>Email: <input type="text" name="email" /></p>
  <input type="submit" value="Submit" />
</form>

input type 屬性值

button 定義可點選的按鈕（大多與 JavaScript 使用來啟動指令碼）
checkbox 定義複選框。
color 定義拾色器。
date 定義日期欄位（帶有 calendar 控制元件）
datetime 定義日期欄位（帶有 calendar 和 time 控制元件）
datetime-local 定義日期欄位（帶有 calendar 和 time 控制元件）
month 定義日期欄位的月（帶有 calendar 控制元件）
week 定義日期欄位的周（帶有 calendar 控制元件）
time 定義日期欄位的時、分、秒（帶有 time 控制元件）
email 定義用於 e-mail 地址的文字欄位
file 定義輸入欄位和 “瀏覽…” 按鈕，供檔案上傳
hidden 定義隱藏輸入欄位
image 定義影象作為提交按鈕
number 定義帶有 spinner 控制元件的數字欄位
password 定義密碼欄位。欄位中的字元會被遮蔽。
radio 定義單選按鈕。
range 定義帶有 slider 控制元件的數字欄位。
reset 定義重置按鈕。重置按鈕會將所有表單欄位重置為初始值。
search 定義用於搜尋的文字欄位。
submit 定義提交按鈕。提交按鈕向伺服器傳送資料。
tel 定義用於電話號碼的文字欄位。
text 預設。定義單行輸入欄位，使用者可在其中輸入文字。預設是 20 個字元。
url 定義用於 URL 的文字欄位。

label 標籤為 input 元素定義標註

<input type="checkbox" name="" id="a"/>
<label for="a">……</label>

checked 在頁面載入時預設選定的 input 元素。

<input type="checkbox" name="" checked/>

disabled 屬性規定應該禁用 input 元素。

<input type="checkbox" name="" disabled/>

select/option 下拉選框

<select>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

select 標籤屬性
autofocus 規定在頁面載入後文本區域自動獲得焦點。

<select autofocus>
   <option value="volvo">Volvo</option>
   <option value="saab">Saab</option>
   <option value="opel">Opel</option>
   <option value="audi">Audi</option>
</select> 

disabled 規定禁用該下拉列表。

<select disabled="disabled">
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

form 規定文字區域所屬的一個或多個表單。

<form action="demo_form.asp" id="carform">
   Firstname:<input type="text" name="fname">
   <input type="submit">
</form>

<select name="carlist" form="carform">
   <option value="volvo">Volvo</option>
   <option value="saab">Saab</option>
   <option value="opel">Opel</option>
   <option value="audi">Audi</option>
</select> 

multiple 規定可選擇多個選項。
在不同作業系統中，選擇多個選項的差異：
對於 windows：按住 Ctrl 按鈕來選擇多個選項
對於 Mac：按住 command 按鈕來選擇多個選項

<select multiple="multiple" size="4">
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

name 規定下拉列表的名稱。
name 屬性規定 select 元素的名稱。
name 屬性用於對提交到伺服器後的表單資料進行標識，或者在客戶端通過 JavaScript 引用表單資料

<select name="carlist">
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

size 規定下拉列表中可見選項的數目。

<select size="2">
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

option標籤屬性
disabled 規定此選項應在首次載入時被禁用。

<select>
  <option>Volvo</option>
  <option>Saab</option>
  <option disabled="disabled">Opel</option>
  <option>Audi</option>
</select>

label 定義當使用 optgroup 時所使用的標註。
label 屬性規定更短版本的選項。
下拉列表中會顯示出所規定的更短版本。

<select>
  <option label="Volvo">Volvo (Latin for "I roll")</option>
  <option label="Saab">Saab (Swedish Aeroplane AB)</option>
</select>

selected 規定選項（在首次顯示在列表中時）表現為選中狀態。

<select>
  <option>Volvo</option>
  <option selected="selected">Saab</option>
  <option>Mercedes</option>
  <option>Audi</option>
</select>

value 定義送往伺服器的選項值。

<select>
  <option value="volvo">Volvo XC90</option>
  <option value="saab">Saab 95</option>
  <option value="mercedes">Mercedes SLK</option>
  <option value="audi">Audi TT</option>
</select>

textarea 文字域
textarea的屬性值
autofocus 規定在頁面載入後文本區域自動獲得焦點。
cols 規定文字區內的可見寬度。
disabled 規定禁用該文字區。
form 規定文字區域所屬的一個或多個表單。
maxlength 規定文字區域的最大字元數。
name 規定文字區的名稱。
placeholder 規定描述文字區域預期值的簡短提示。
readonly 規定文字區為只讀。
required 規定文字區域是必填的。
rows 規定文字區內的可見行數。
wrap 規定當在表單中提交時，文字區域中的文字如何換行。
http://www.w3school.com.cn/tags/tag_textarea.asp

outline 輪廓線；
A標籤輪廓線去除方法：
1、<a href="#" onfocus="this.blur();">……</a>
2、<a href="#" hidefocus>……</a>

outline-color
color_name 規定顏色值為顏色名稱的輪廓顏色（比如 red）。
hex_number 規定顏色值為十六進位制值的輪廓顏色（比如 #ff0000）。
rgb_number 規定顏色值為 rgb 程式碼的輪廓顏色（比如 rgb(255,0,0)）。
invert 預設。執行顏色反轉（逆向的顏色）。可使輪廓在不同的背景顏色中都是可見。
inherit 規定應該從父元素繼承輪廓顏色的設定。

outline-style
none 預設。定義無輪廓。
dotted 定義點狀的輪廓。
dashed 定義虛線輪廓。
solid 定義實線輪廓。
double 定義雙線輪廓。雙線的寬度等同於 outline-width 的值。
groove 定義 3D 凹槽輪廓。此效果取決於 outline-color 值。
ridge 定義 3D 凸槽輪廓。此效果取決於 outline-color 值。
inset 定義 3D 凹邊輪廓。此效果取決於 outline-color 值。
outset 定義 3D 凸邊輪廓。此效果取決於 outline-color 值。
inherit 規定應該從父元素繼承輪廓樣式的設定。

outline-width
thin 規定細輪廓。
medium 預設。規定中等的輪廓。
thick 規定粗的輪廓。
length 允許您規定輪廓粗細的值。
inherit 規定應該從父元素繼承輪廓寬度的設定。

inherit 規定應該從父元素繼承 outline 屬性的設定。