表格

<table>標籤常用屬性：cellspacing設定單元格之間的距離，cellpadding設定單元格內容到單元格邊的距離，border設定單元格邊框寬度。

注：以上屬性單位皆為px。

<td>標籤常用屬性：colspan設定單元格橫跨的列數，rowspan設定單元格縱跨的行數，通常也稱之為合併列與合併行。

<table border="2" cellspacing="20" cellpadding="20">
	<caption>表格標題</caption>
	<tbody>
	<tr>
		<th
 
>列1</th>
		<th>列2</th>
		<th>列3</th>
		<th>列4</th>
		<th>列5</th>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">元素1</td>
		<td>元素2</td>
		<td>元素3</td>
		<td>元素next</td>
	</tr>
	<tr>
		<
 
td>元素4</td>
		<td>元素5</td>
		<td>元素6</td>
	</tr>
	</tbody>
</table>

執行結果：

表單

一個簡單的表單結構，<form>標籤屬性：action(英譯：行動)——表單提交路徑。method(英譯：方法)——表單提交方式，通常有post和get兩種方式。

注：說到post和get兩種方式，其各自都有一些特點： get方式：表單資料通過URL中的?引數傳遞到伺服器，可以在位址列中看到提交的內容，資料長度有限制，因為URL地址長度有限（位址列長度限制一般為2000個字元）。 post

方式：表單資料是通過請求傳遞到服務端的（資料放於請求報文的請求體中），在介面上看不到，可以提交任何型別資料（包括檔案），由於介面看不見，瀏覽器也不會儲存，所以更安全一些

<form action="" method="post">
    使用者名稱：<input type="text">
    密碼：<input type="password">
    <input type="submit">
</form>

執行結果：

> html4中表單內input標籤

其中<label>標籤為input元素定義標註。label元素不會向用戶呈現任何特殊效果。不過在label元素內點選文字，就會觸發此控制元件。

注：<label>標籤屬性：for應當與相關元素的id屬性相同。

<label for="text">輸入框</label>
<input type="text" name="" id="text" />

<label for="password">密碼框</label>
<input type="password" name="" id="password" />

<label for="submit">提交</label>
<input type="submit" name="" id="submit" />

<label for="reset">重置</label>
<input type="reset" name="" id="reset" />

<label for="hidden">隱藏框</label>
<input type="hidden" name="" id="hidden" />

注：隱藏框，通常用作在表單記憶體儲使用者不需要知道的資料，如：id值或是限制上傳檔案大小（如下)等。

<input type="hidden" name="MAX_FILE_SIZE" value="30000" id="hidden" />

執行結果：

> html4中表單其他標籤

<textarea>標籤常用屬性：cols——設定每行中的字元數，rows——設定文字框行數，利用css樣式"resize:none"可以設定文字框禁止使用者拉伸操作。

<label for="textarea">文字框</label>
<textarea cols="30" rows="10" id="textarea"></textarea>

注：在js中，雖然用value和innerText都可以賦值，但是推薦用value賦值(如下)。

textareaElement.value = 'a';

執行結果： 複選框常用屬性：checked="checked"可用於設定預設選中值。

在表單提交時，通常資料最小單元都是一個鍵值對形式，而checked的鍵對應的是name屬性值，值對應的是value屬性值。

<input type="checkbox" name="checkbox1" value="checkbox1"  id="checkbox1">
<label for="checkbox1">複選框1</label>
<input type="checkbox" name="checkbox2" value="checkbox2"  id="checkbox2">
<label for="checkbox2">複選框2</label>
<input type="checkbox" name="checkbox3" value="checkbox3"  id="checkbox3">
<label for="checkbox3">複選框3</label>

單選框常用屬性：checked="checked"可用於設定預設選中值。

在表單提交時，radio的鍵對應的是name屬性值（因為單選，radio的name是相同值），值對應的是value屬性值。

<input type="radio" name="radio" value="radio1" id="radio1">
<label for="radio1">單選框1</label>
<input type="radio" name="radio" value="radio2" id="radio2">
<label for="radio2">單選框2</label>

下拉框，<option>標籤常用屬性：selected="selected"可以設定預設選中此選項。

注：<option>標籤內利用css樣式display: none可以隱藏一個選項。這樣一來如“請選擇”選項就無法選中了。

<label for="select">單項選擇列表</label>
<select name="select" id="select">
	<option value="0" style="display: none">請選擇</option>
	<!-- 利用css樣式display: none隱藏一個選項-->
	<option value="元素1">元素1</option>
	<option value="元素2">元素2</option>
	<option value="元素3">元素3</option>
	<!-- selected="selected"屬性設定預設選中值 -->
</select>

執行結果：

> 檔案上傳標籤

檔案上傳標籤，常用屬性：accept——校驗上傳檔案型別（不安全的），可以寫入檔案字尾名或是檔案的mime type值（如：text/xml， image/jpeg等），multiple——設定多檔案上傳，H5新增屬性。

在檔案上傳時，需要設定<form>標籤內的method="post"和enctype="multiple/form-"。

<form action="" method="post" enctype="multiple/form-">
<label for="file">上傳</label>
<input type="file" name="" id="file" />
<input type="file" name="" id="file2" accept=".lrc,.txt" />
<!-- accept屬性，可傳入值可以是檔案字尾名，也可以是檔案的midi屬性 -->
<input type="file" name="" id="file3" multiple/>
</form>

> H5新增的表單標籤及屬性

新增表單標籤屬性ie8存在相容問題，慎用。

<!-- html5新增標籤 -->
<!-- 郵箱格式輸入 -->
<input type="email"><br />
<!-- 手機號格式輸入 -->
<input type="tel"><br />
<!-- url格式輸入 -->
<input type="url"><br />
<!-- 數字格式輸入 -->
<input type="number"><br />
<!-- 搜尋框 -->
<input type="search"><br />
<!-- 自由拖動滑塊 -->
<input type="range"><br />
<!-- 小時分鐘選擇框 -->
<input type="time"><br />
<!-- 年月日選擇框 -->
<input type="date"><br />
<!-- 年月選擇框 -->
<input type="month"><br />
<!-- 年周選擇框 -->
<input type="week"><br />

執行結果： 設定禁用屬性

<!-- html5新增屬性 -->
<input type="text" disabled value="設定禁用屬性">

設定只讀屬性

<input type="text" readonly value="設定只讀屬性">

載入頁面結束後自動獲取焦點

<input type="text" autofocus value="載入頁面結束後自動獲取焦點">

提價表單時不能為空

<input type="text" required value="提價表單時不能為空">

用Alt + s 組合鍵，為此元素獲取焦點

<input type="text" accesskey="s" value="用Alt + s 組合鍵，為此元素獲取焦點">

執行結果：