028、HTML 標籤3表單標籤插入元件
內容：表單標籤插入元件(經常使用)
##############################################################
form表單標籤和input元件 <form> 使用者名稱稱：<input type="text" name="username" value="hehe" /><br/> 輸入密碼：<input type="password" name="psw" /><br/> 選擇性別：<input type="radio" name="sex" value="nan" />男 <input type="radio" name="sex" value="nv" checked="checked"/>女<br/> 選擇技術：<input type="checkbox" name="tech" value="java" />JAVA <input type="checkbox" name="tech" value="html" />HTML <input type="checkbox" name="tech" value="css"/>CSS<br/> 一個按鈕：<input type="button" value="有個按鈕" onclick="alert('有個按鈕,我彈！')"/><br/> 隱藏元件：<input type="hidden" name="zhangsan" value="20"/><br/> 選擇檔案：<input type="file" name="file" /><br/> 圖片元件：<input type="image" src="1.jpg" /><br/> 選擇國家： <select name="country"> <option value='none'>--選擇國家--</option> <option value="cn" selected="selected">中國</option> <option value="usa">美國</option> <option vaue='en'>英國</option> </select> <br/> 個人介紹：<textarea rows="4" cols="20"></textarea> <input type="submit" value="提交"/><input type="reset" value="恢復預設"/> </form>
如果這些值需要提交到服務端的，每個元件的屬性都需要name
####################################################################################
瀏覽器兩種提交方式
以下get和post提交資料來自程式碼
<!--
form標籤中的action用於明確目的地。 method屬性用於明確提交的方式。
方式有兩種 get post。
get提交的資料：
位址列：http://192.168.1.223:9090/?user=abc&psw=12&repsw=12&sex=nan&tech=java&country=cn
GET /?user=abc&psw=12&repsw=12&sex=nan&tech=java&country=cn HTTP/1.1
Accept: application/x-shockwave-flash, image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, application/xaml+xml, application/x-ms-xbap, application/x-ms-application, */*
Accept-Language: zh-cn
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET4.0C; .NET4.0E)
Host: 192.168.1.223:9090
Connection: Keep-Alive
post提交：
位址列：http://192.168.1.223:9090/
POST / HTTP/1.1
Accept: application/x-shockwave-flash, image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, application/xaml+xml, application/x-ms-xbap, application/x-ms-application, */*
Accept-Language: zh-cn
Content-Type: application/x-www-form-urlencoded
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET4.0C; .NET4.0E)
Host: 192.168.1.223:9090
Content-Length: 56
Connection: Keep-Alive
Cache-Control: no-cache
user=abcd&psw=123&repsw=123&sex=nv&tech=html&country=usa
GET和POST的區別：
區別1：位址列是否顯示資訊。
GET提交，將提交的資料顯示在位址列。
POST提交，提交資料不顯示在位址列。
區別2：敏感資訊是否安全。
GET提交，提交敏感資訊不安全。
POST提交，提交敏感資訊保安。
區別3：資料的體積。
GET提交，資訊儲存到位址列，儲存的資訊體積有限。
POST提交，可以提交大體積資料資訊。
區別4：提交資訊的http封裝形式不同。
GET提交，將提交資訊封裝到了請求行。
POST提交，將提交資訊封裝到了請求體。
綜上所述：表單提交，建議使用POST.
問題1：如果表單加入了增強型的校驗(只有所有選項都符合規則的情況下，才可以提交)
這時，服務端收到資料後，還需要校驗嗎？
需要，因為客戶端有可能避開校驗，提交錯誤的資料到服務端，所以為了安全性，服務端必須做校驗。
和服務端互動有三種方式：
1，位址列輸入。get
2，超連結。get
3，表單。get post
問題2：服務端如果進行校驗，頁面還需要做校驗嗎？
需要，為了減輕服務端的壓力，同時為了增強使用者的體驗效果。
-->
#############################################
加入表格標籤，好看，下面實現簡單提交
<body> <form action="127.0.0.1:8080" method="get"> <table border="1" bordercolor="blue" width="700px" cellspacing="0" cellpadding="10"> <tr> <th colspan="2">使用者註冊</th> </tr> <tr> <th>使用者名稱稱:</th> <td><input type="text" name="usename"></td> </tr> <tr> <th>輸入密碼:</th> <td><input type="password" name="pwd"></td> </tr> <tr> <td>選擇性別:</td> <td><input type="radio" name="sex" value="male"/>男 <input type="radio" name="sex" value="female">女</td> </tr> <tr> <td>選擇技術:</td> <td><input type="checkbox" name="tech" value="java">java <input type="checkbox" name="tech" value="HTML">HTML </td> </tr> <tr> <td>一個按鈕</td> <td><input type="button" value="按鈕" onclick="alert('love')"></td> </tr> <tr> <th colspan="2"><input type="submit" value="提交"></th> </tr> </table> </form> </body>
##簡單伺服器用於執行上面的提交：
public static void main(String[] args) throws IOException { ServerSocket ss = new ServerSocket(8080); Socket s = ss.accept(); InputStream is = s.getInputStream(); byte[] buf = new byte[1024]; int len = is.read(buf); String str = new String(buf,0,len); System.out.println(str); PrintWriter out = new PrintWriter(s.getOutputStream(),true); out.println("<font color='blue' size='7'>註冊成功</font>"); s.close(); ss.close(); }
############################################################################
其他標籤
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <body> <b>演示</b><i>一下</i><u>其他</u>的<strong>標籤</strong>。語義化 X<sub>2</sub> X<sup>2</sup> <marquee behavior="slide" direction="down">哇，我會飛啦！</marquee> <pre> class Demo { public static void main(String[] args) { System.out.println("hello"); } } </pre> </body>