單屬性匯總：

1 name屬性

服務器會識別不同的name屬性，并根據name屬性來捕獲不同元素內的數據。

2 value屬性

value 屬性為 input 元素設定值。

對于不同的輸入類型，value 屬性的用法也不同：

type="button", "reset", "submit" - 定義按鈕上的顯示的文本

type="text", "password", "hidden" - 定義輸入字段的初始值

type="checkbox", "radio", "image" - 定義與輸入相關聯的值

注釋：<input type="checkbox"> 和 <input type="radio"> 中必須設置 value 屬性。

注釋：value 屬性無法與 <input type="file"> 一同使用。

注意：單選框和復選框傳遞數據到數據庫時一定要設置value, 否則插入數據失敗;

3 type屬性

它決定了<input>標簽在頁面中的表現樣式和功能

text 文本框

password 密碼框

radio 單選框

checkbox 復選框

file 文件域

hidden 隱藏域

image 圖像域

submit 提交按鈕

reset 重置按鈕

button 普通按鈕

4 size屬性

列表框中size屬性用來設置列表框顯示的行數；

文本框和密碼框會使用size屬性設置域的顯示寬度；

5 disabled屬性

定義disabled屬性可以禁止使用該元素；

無法將數據提交到服務器處理;

6 readonly屬性

常用在輸入性表單對象中(如文本框、密碼框、文本區域)，用來禁止輸入任何信息；

可以將數據提交到服務器處理;

7 checked屬性

它與disabled屬性一樣沒有屬性值，常用在選擇性表單對象中，定義對象處于被選中狀態(如單選按鈕和復選框)

但在列表框或者下拉式菜單中，為了表示被選中的項目，可使用selected屬性；

7 placeholder屬性

規定幫助用戶填寫輸入字段的提示。

表單對象：

1 文本框

<input type="text" name="textfield" id="textfield" value="單行文本框" size="20" maxlength="20">

必需的屬性:name type

2 密碼域

<input type="password" name="passwordfield" id="passwordfield">

必需的屬性:name type

3 文本域

<textarea name="textarea" cols="20" rows="5" wrap="physical"></textarea>

必需的屬性:name cols rows

wrap屬性 默認值：輸入的文本會自動換行。當數據提交到服務器被處理時, 換行符不會隨輸入的文本一同被提交到服務器；

off(也可寫成wrap)：不自動換行, 當輸入的內容超出文本區域右邊界時, 文本將向左滾動, 并顯示滾動條。

如果希望換行，必須手動輸入回車鍵才能將插入點移到下一行；

virtual：文本能夠自動換行, 當數據提交到服務器被處理時, 換行符不會隨輸入文本一同提交到服務器；(默認值)

physical：文本能夠自動換行, 當數據提交到服務器被處理時, 換行符將會隨輸入的文本一同被提交到服務器進行處理；

關于如何限制文本域輸入字符串的長度 見javascript|語法|設置文本框

HTML5中wrap中屬性值修改為hard|soft

soft 當在表單中提交時, textarea 中的文本不換行, 默認值。

hard 當在表單中提交時, textarea 中的文本換行(包含換行符)。

當使用 "hard" 時, 必須規定 cols 屬性

4 單選按鈕

單選按鈕傳遞的信息簡單，如1或0、True或False。

<input type="radio" name="radio" value="1"/>選項1
<input type="radio" name="radio" value="2"/>選項2
<input type="radio" name="radio" value="3"/>選項3

多個單選按鈕通過定義相同的name屬性, 以實現捆綁在一起；

必需的屬性:type name value

5 復選框

<input type="checkbox" name="checkbox[]" value="1"/>選項2
<input type="checkbox" name="checkbox[]" value="2"/>選項2
<input type="checkbox" name="checkbox[]" value="3"/>選項2

通過設置相同的name屬性可以把多個復選框捆綁在一起；

必需的屬性:type name value

6 列表框/下拉菜單

<select name="select" size=1>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
</select>

如果select元素中不設置size屬性,則該元素會顯示為下拉菜單樣式

<select name="select" size="1" multiple="multiple">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
</select>

如果希望以列表框形式顯示,則可以使用size屬性指定列表框的高度(顯示幾個選項);

還可以通過mutiple屬性定義列表框是否為多選(默認是單選)；

通過<optgroup>標簽把相關的選項組合在一起：

<select>
<optgroup label="PHP版塊">
<option value="resource">資源共享</option>
<option value="study">學習交流</option>
<option value="salary">薪酬待遇</option>
</optgroup>
<optgroup label="IOS版塊">
<option value="resource">資源共享</option>
<option value="study">學習交流</option>
<option value="salary">薪酬待遇</option>
</optgroup>
</select>

注意：其中PHP版塊和IOS版塊不能被選中

所有主流瀏覽器都支持 <optgroup> 標簽。

7 文件域

<input type="file" name="file"/>
<input type="file" name="file" multiple/>

8 按鈕

提交按鈕

<input type="submit" name="" value="提交"/>

name值必須給出

重置按鈕

<input type="reset" name="" value="重置"/>

普通按鈕

<input type="button" name="" value="普通按鈕"/>

它一般是配合javascript來使用;

關于控制表單提交按鈕見: javascript|語法|控制表單提交

9 圖像域

<input type="image" name="image" value="提交" src="images/vote_d.gif" alt="提交" align="middle"/>

10 隱藏域

限制上傳文件大小

<input type="hidden" name="MAX_FILE_SIZE" value="1000000" />

傳遞ID值

<input type="hidden" name="id" value="<?php echo $result['id'];?>" />

11 button標簽

在 button 元素內部，您可以放置內容，比如文本或圖像。這是該元素與使用 input 元素創建的按鈕之間的不同之處。

<button type="button" name="button" value="按鈕"><img src="hw001.jpeg"/></button>

普通按鈕<button type="button">普通按鈕</button> 它一般是配合javascript來使用, 默認值

提交按鈕<button type="submit">提交按鈕</button>

重置按鈕<button type="reset">重置按鈕</button>

提交表單

enctype屬性

該屬性包含兩種方式:

application/x-www-form-urlencoded 是默認編碼類型

multipart/form-data

multipart/form-data編碼方式可以用來傳輸二進制數據或者非ASCII字符的文本(如圖片、不同格式的文件等),上傳文件必須使用此屬性

multipart: 多部件的

multiple: 多重的

text/plain

text/plain將表單屬性發送到電子郵箱時，enctype的值必須設為"text/plain",否則將會出現亂碼。

發送電子郵件的表單程序

<form name="form1" method="post" action="mailto:marker@broadview.com.cn" enctype="text/plain">
</form>

action 表單提交的腳本

如果傳遞到本頁面，則直接輸入控制 action=""

表單提交方式method:post/get

<form action="test.php?id=5" method="post" >
name: <input type="text" name="name" value="100">
</form>

id=5是get傳， name="100" 是post傳！ //高洛峰解釋

action="" 表示傳遞到當前腳本文件

target 指定提交到哪一個窗口

_blank 打開新窗口

_self 當前的窗口,默認值

_parent 上一層窗口

_top 最上層窗口

框架名稱 指定指定窗口或框架名稱

label標簽

作用: 擴大觸控區域, 為了提升用戶體驗, 點擊文字也能選中表單

<form action=" method="get" accept-charset="utf-8">
<label>電子郵箱: <input type="text" name="email" value="" placeholder="請輸入電子郵箱"/></label><br/>
<label>密碼: <input type="password" name="password"/></label><br/>
<label for="address">地址</label>
<input type="text" name="address" id="address" placeholder="請輸入地址" />
</form>

for與id一致

<input type="radio" id="sec" name="sex"> <label for="sex">男</label>

簡化寫法:

<label><input type="checkbox"/>周杰倫-晴天</label>

注意: "for" 屬性可把 label 綁定到另外一個元素。請把"for"屬性的值設置為相關元素的 id 屬性的值。

PHP實例：創建發送郵件信息的html表單

代碼：

<html>
<head>
<title>簡單郵件發送表單</title>
</head>
<body>
<h1>Mail Form</h1>
<form name="form1" method="post" action="simpleEmail.php">
<table>
<tr><td><b>To</b></td><td><input type="text" name="mailto" size="35"></td></tr>
<tr><td><b>郵件主題：</b></td>
<td><input type="text" name="mailsubject" size="35"></td></tr>
<tr><td><b>郵件內容</b></td>
<td><textarea name="mailbody" cols="50" rows="7"></textarea></td>
</tr>
<tr><td colspan="2">
<input type="submit" name="Submit" value="發送">
</td>
</tr>
</table>
</form>
</body>
</html>

simpleEmail.php

過昨天的學習算是對HTML有了一點點了解，知道了什么是前端，什么是HTML、前端三大標準、主流瀏覽器和html的基本結構及常用標簽。那么今天繼續看看html還有什么新的知識吧。

特殊字符（了解即可）

有常見性就有特殊性，我們使用電腦時經常會用到空格鍵，在html文檔上有時也會使用到空格鍵等等，那怎么在html上又是以什么形式展示給瀏覽器解析呢？

表格標簽

作用：在瀏覽器上清晰美觀地顯示、展示數據。

表格標簽的語法

<table>

<tr>

<td></td>

</tr>

</table>

表格標簽：<table></table>，一個table標簽中可嵌套多個tr標簽。

行標簽：<tr></tr>，一個tr標簽代表一行。一個行標簽中可以嵌套多個單元格標簽。

單元格標簽：<td></td>，一個td標簽代表一個單元格。在單元格中可以填充文本、圖片、超鏈接等等內容。

在html中表格不是由橫線劃分行和列，而是大大小小的矩形盒子來劃分。Table是一個最大的矩形盒子，里面包含tr標簽，這個是一個和table長度差不多的矩形盒子，table一行僅容納一個tr盒子。在tr盒子中還包含有N個td盒子，td盒子就是單元格。

表格示例：

在html文檔中編輯表格標簽結構時，除了一個標簽一個標簽地敲之外，可以使用快捷方式快速操作：如五行三列的表格，可以在table標簽中輸入：“tr*5>td*3”然后敲回車，就將其表格結構迅速展現出來。

<h1>表格示例：</h1>
<table>
        <tr>
            <td>姓名</td>
            <td>性別</td>
            <td>年齡</td>
        </tr>
        <tr>
            <td>張三豐</td>
            <td>男</td>
            <td>27</td>
        </tr>
        <tr>
            <td>李四喜</td>
            <td>女</td>
            <td>18</td>
        </tr>
        <tr>
            <td>王五通</td>
            <td>男</td>
            <td>35</td>
        </tr>
        <tr>
            <td>秦六夏</td>
            <td>女</td>
            <td>30</td>
        </tr>
</table>

運行界面示例：默認狀態下表格是沒有線條分界，表格對齊方式左對齊。

表頭單元格標簽

<th></th>：位于表格的第一行或第一列，可以使其內容加粗居中顯示。

語法：

<table>

<th>

<td></td>

</th>

</table>

表頭表格代碼示例：

<h1>表頭表格示例：</h1>
   <table>
        <tr>
            <th>姓名</th>
            <th>性別</th>
            <th>年齡</th>
        </tr>
        <tr>
            <td>張三豐</td>
            <td>男</td>
            <td>27</td>
        </tr>
        <tr>
            <td>李四喜</td>
            <td>女</td>
            <td>18</td>
        </tr>
        <tr>
            <td>王五通</td>
            <td>男</td>
            <td>35</td>
        </tr>
        <tr>
            <td>秦六夏</td>
            <td>女</td>
            <td>30</td>
        </tr>
    </table>

運行界面示例：

表格結構標簽

表格結構標簽分為表格頭部標簽和表格主體標簽。類似于head標簽和body標簽對于html標簽之間的關系。

表格頭部標簽：<thead></thead>。定義表格頭部，嵌套在<table></table>中，一般位于第一行。

表格主體標簽：<tbody></tbody>。定義表格主體，嵌套在<table></table>中，主要用于顯示數據。

代碼示例：

<h1>表格結構標簽</h1>
    <table border="1" width="300px" height="150px" cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性別</th>
                <th>年齡</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>張三豐</td>
                <td>男</td>
                <td>36</td>
            </tr>
            <tr>
                <td>李四喜</td>
                <td>女</td>
                <td>30</td>
            </tr>
        </tbody>
    </table>

運行界面：

表格屬性

雖然表格屬性在實際開發過程中不常使用，一般都是通過CSS樣式設置，但是還是需要記住這些屬性關鍵詞，在css中屬性關鍵詞也會用到。

注：這些屬性都要寫在table標簽的開始標簽中，多個屬性之間需要使用空格分隔。

align：表格的對其方式。

align=“left”：在瀏覽器中居左顯示。也是默認顯示。

align=“center”：在瀏覽器中居中顯示。

align=“right”：在瀏覽器中居右顯示。

border：表格是否具有邊框。

border=”1”：表格添加邊框。

cellpadding：單元格內的元素和td邊框的距離。

舉個例子，如果表格是一件教室的話，桌子就是單元格，桌子上放的書本就是單元格內的元素，書本邊緣和桌子邊緣之間產生的空白區域就是cellpadding的值。

cellspacing：單元格和單元格之間的距離。默認是有空隙的，可設置為零，使其空隙清零，成為一條直線。

還是以教室為表格，桌子為單元格。桌子和桌子之間的距離就是cellspacing的值。

width：表格的寬度，屬性值可以是像素值也可以是百分比。

height：表格的高度，屬性值可以是像素值也可以是百分比。

代碼示例：

<h1>表頭表格示例：</h1>
    <table align="center" border="1" cellpadding="0" cellspacing="0" width="200px" height="300px">
        <tr>
            <th>姓名</th>
            <th>性別</th>
            <th>年齡</th>
        </tr>
        <tr>
            <td>張三豐</td>
            <td>男</td>
            <td>27</td>
        </tr>
        <tr>
            <td>李四喜</td>
            <td>女</td>
            <td>18</td>
        </tr>                   
        <tr>
            <td>王五通</td>
            <td>男</td>
            <td>35</td>
        </tr>
        <tr>
            <td>秦六夏</td>
            <td>女</td>
            <td>30</td>
        </tr>
    </table>

運行界面：

合并單元格

合并單元格是指將兩個或兩個以上的單元格合并成一個單元格。合并屬性一般寫在單元格標簽的開始標簽上。合并代碼屬性設置后，要將沒有寫合并的單元格代碼的其他合并單元格標簽刪除掉。

目標單元格：（合并代碼存在位置）

跨行合并：最上側單元格為目標單元格，寫合并代碼。

跨列合并：最左側單元格為目標單元格，寫合并代碼。

合并單元格的方式：

跨行合并：將處于不同行的單元格進行合并

語法：rowspan=“合并單元格個數”

代碼示例：

<h1>跨行合并表格：</h1>
    <table border="1" width="300px" height="150px" cellspacing="0">
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

運行界面：

跨列合并：將處于不同列的單元格進行合并

語法：colspan=“合并單元格個數”

代碼示例：

<h1>跨列合并表格：</h1>
    <table border="1" width="300px" height="150px" cellspacing="0">
        <tr>
            <td colspan="2"></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

運行示例：

今天學習的表格內容就到這里了，明天開始學習列表。