初學HTML用法大全指導(五)html建立網頁中的表單與DIV、SPAN分塊
上一篇部落格我們講了html指令碼語言中超連結的建立與使用，這一篇部落格我們來聊一聊web網頁中常用的表單的建立，我們在登入一個新的網站時想成為這個網站的VIP會員或者普通使用者時常常面臨著各種資訊的登記，以及在登入這個系統時要輸入自己的賬戶和密碼，比如CSDN中，我們想登入進入自己的賬戶時，就要輸入賬戶和密碼。這是HTML指令碼語言中的表單操作就稱為了很重要的作用。最常見的表單標籤有：文字框、密碼框、文字域、單選框、複選框、下拉框、按鈕、上傳檔案等操作。下面我就來一一說明，首先要想用這些標籤，首先我們要知道Form表單標籤，上面的文字框、密碼框、文字域等等都是在Form標籤裡面。Form表單它是一個包含表單元素的區域，主要作用是向伺服器提交資料。
Form表單有兩個最重要的屬性：一個是method屬性其有post和get兩種方式其預設值是post方式，post和get有很大的區別。1）在伺服器端get是從伺服器獲取資料，post是向伺服器傳送資料；2）在客戶端通過get方式提交資料其資料在網址即URL中可以看到，而用post方式提交資料時其資料在網址即URL中不可以看到，其資料放在HTML HEADER中提交。3）對於get方式伺服器端用Request.QueryString獲取變數的值，而對於post方式伺服器端用Request.Form方式使用者在客戶端提交的資料。4）GET方式時客戶端提交的資料有位元組數限制，最多不能超過1024個位元組，而Post方式沒有限制。5）從上面的對比發現其Post方式比Get方式更安全即資料的安全性更好，所以如果你所建立的網站不需要太多去考慮性就可以用get方式，相反一般推薦post方式。另一個屬性是action，它指的是使用者所填寫的表單提交到哪裡，action裡面賦予的值就是提交表單後所跳轉的頁面，action所賦予的網址值一般都是存放在伺服器上。其他一些屬性都是一些不常用到的屬性，如果需要用時自己可以專門花時間去摸索（其實也很容易）。
好了下面介紹表單裡面的那些標籤：文字框、密碼框、文字域、單選框、複選框、下拉框、按鈕、上傳檔案。
1）文字框、密碼框；這兩個標籤一般使用者使用者登入某個系統時的首頁，即使用者登入操作。這個操作是作為一個網名眾所周知的操作，下面我就來說說這兩個標籤的具體用法。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文字框和密碼框及文字域</title> </head> <body> <center> <form action="success.jsp" method="get"> <table> <tr> <td colspan="2" align="center">使用者資訊操作</td> </tr> <tr> <td>賬戶:</td> <td><input type="text" id="userName" name="userName"/></td> </tr> <tr> <td>密碼:</td> <td><input type="password" id="pwd" name="pwd"/></td> </tr> <tr> <td>修改說明:</td> <td colspan="2"><textarea id="desc" name="desc" rows="8" cols="22">文字域</textarea></td> </tr> </table> </form> </center> </body> </html>
2）下面就來說一說單選按鈕、複選框、下拉列表這些標籤。單選按鈕是在input標籤中的type屬性選擇radio值，其預設選中是屬性checked="checked"，要想只選中一個就要把name命名成一樣的屬性，比如我的設定的值sex代表性別。複選框是在input標籤中的type屬性選擇checkbox值，預設選中屬性是checked值為checked。下拉列表標籤是select標籤中巢狀option標籤。程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>單選按鈕、多選框、下拉列表</title>
</head>
<body>
<center>
<form action="success.jsp" method="get">
<table>
<tr>
<td colspan="2" align="center">使用者資訊操作</td>
</tr>
<tr>
<td>性別:</td>
<td>
<input type="radio" name="sex" value="man" checked="checked"/>男
<input type="radio" name="sex" value="female"/>女</td>
</tr>
<tr>
<td>
愛好:
</td>
<td>
<input type="checkbox" name="hobby" value="baseball" checked="checked">足球
<input type="checkbox" name="hobby" value="basketball"/>籃球
<input type="checkbox" name="hobby" value="other"/>其他
</td>
</tr>
<tr>
<td>
年級:
</td>
<td>
<select id="grade" name="grade">
<option name="one">一年級</option>
<option name="two">二年級</option>
<option name="three">三年級</option>
</select>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
3）提交按鈕，重選按鈕。提交按鈕就會把form表單裡面的資料提交到指定的action值的伺服器上，重選按鈕會把表單的資料清空，但是其實現都需要自己去實現。程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>重選、提交</title>
</head>
<body>
<center>
<form action="success.jsp" method="get">
<table>
<tr>
<td>
<input type="submit" value="提交"/>
</td>
<td>
<input type="reset" value="重置"/>
</td>
</tr>
<tr>
<td>
<input type="button" value="提交"/>
</td>
<td>
<input type="button" value="重置"/>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
4）上傳檔案標籤。我們在有些網站他需要我們上傳自己的檔案，比如電子簡歷等檔案，這時就要用到了html中的上傳檔案標籤。程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>檔案上傳</title>
</head>
<body>
<input type="file" name="f" id="f"/>
</body>
</html>
5）這樣就完成了一般網站需要的個人資訊登記操作的表單。下面是上面的整合，如果你需要更好看的外觀和功能就自己私下花時間弄吧。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用者表單操作</title>
</head>
<body>
<center>
<form action="success.jsp" method="get">
<table>
<tr>
<td colspan="2" align="center">使用者資訊操作</td>
</tr>
<tr>
<td>賬戶:</td>
<td><input type="text" id="userName" name="userName"/></td>
</tr>
<tr>
<td>密碼:</td>
<td><input type="password" id="pwd" name="pwd"/></td>
</tr>
<tr>
<td>修改說明:</td>
<td colspan="2"><textarea id="desc" name="desc" rows="5" cols="22">文字域</textarea></td>
</tr>
<tr>
<td>性別:</td>
<td>
<input type="radio" name="sex" value="man" checked="checked"/>男
<input type="radio" name="sex" value="female"/>女</td>
</tr>
<tr>
<td>
愛好:
</td>
<td>
<input type="checkbox" name="hobby" value="baseball" checked="checked">足球
<input type="checkbox" name="hobby" value="basketball"/>籃球
<input type="checkbox" name="hobby" value="other"/>其他
</td>
</tr>
<tr>
<td>
年級:
</td>
<td>
<select id="grade" name="grade">
<option name="one">一年級</option>
<option name="two">二年級</option>
<option name="three">三年級</option>
</select>
</td>
</tr>
<tr>
<td>選擇要上傳的檔案:</td>
<td>
<input type="file" name="f" id="f"/>
</td>
</tr>
<tr>
<td>
<input type="submit" value="提交"/>
</td>
<td>
<input type="reset" value="重置"/>
</td>
</tr>
<tr>
<td>
<input type="button" value="提交"/>
</td>
<td>
<input type="button" value="重置"/>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
下面再介紹一些關於HTML塊的一些知識，分塊的標籤有兩個一個是div另一個是span。html中<div>是塊級元素，它是可用於組合其他的html元素的容器，div的分塊使那些作為IT前端設計人員來說很好的把web網頁分成了許多的塊，更能方便他們做出一些絢麗高大上的畫面。而span是作用於文字的容器，它可以很好的使文字出現各種各樣的風格模式，它是內斂元素。
DIV模組元素示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Div塊級元素</title>
</head>
<body>
<div id="id1" align="center" style="border:1px red solid;">
<h1>我是h1標題</h1>
<h2>我是h2標題</h2>
<p>我是段落標籤的代表</p>
</div>
<hr>
<div id="id2" align="center" style="border:1px blue dotted;">
<h1>我是h1標題</h1>
<h2>我是h2標題</h2>
<p>我是段落標籤的代表</p>
</div>
</body>
</html>
SPAN文字元素的容器示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SPAN</title>
</head>
<body>
<center>
我是SPAN文字容器<span style="color:red">紅色</span>。<br/>
我是SPAN文字容器<span style="color:blue">藍色</span>。<br/>
我是SPAN文字容器<span style="color:gray">灰色</span>。<br/>
</center>
</body>
</html>