注意：文中代碼的效果僅展示了在瀏覽器上的外觀，並未展示效果，別問，問就是博主懶（硬氣地說道）
1、form表單初步：
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>form表單初步</title>
</head>
<body>
<!--
1、表單有什么用？
收集用戶信息，表單展示之后，用戶填寫表單，點擊提交，提交數據給服務器
2、怎么畫一個表單？
使用form標簽畫表單
3、一個網頁當中可以有多個表單form
4、表單最終是需要提交給服務器的，form表單有一個action屬性，這個屬性用來指定服務器地址：
action屬性用來提交數據給哪個服務器
action屬性和超鏈接中中的href屬性一樣，都可以向服務器發送請求（request）
5、http://192.168.111.3:8080/oa/save 這是請求路徑，表單提交數據最終提交給：
192.168.111.3 這台機器上的8080端口對應的軟件
-->
<form action="http://192.168.111.3:8080/oa/save">
<!--畫按鈕可以使用input輸入域，type="submit"的時候表示該按鈕是一個提交按鈕，具有提交表單的能力-->
<!--對於按鈕來說，value屬性用來指定按鈕上顯示的文本信息,有提交功能的按鈕默認為“提交”-->
<input type="submit" value="注冊"/>
<!--這是一個普通的按鈕，沒有提交表單的能力-->
<input type="button" />
</form>
<br /><br />
<!--
這個按鈕和普通的超鏈接沒什么太大的區別（超鏈接和表單都可以向服務器發送請求，只不過表單發送請求的同時可以順便提交數據）
注意：利用表單來提交數據的單位是一個“form”，所以只會提交form之“內”的數據
-->
<form action="http://www.baidu.com">
<input type="submit" value="百度"/>
</form>
<br /><br />
<!--關於form的代碼只有放到form里，才能正常使用-->
<!--
表單是以什么格式提交給服務器的？
格式：action?name=value&name=value&name=value&name=value...
HTTP協議規定，必須以這種形式提交給服務器
例如：
http://localhost:8080/jd/login?username=aaa&userpwd=123456
注意：若文本框不設置name屬性，瀏覽器就不會提交數據給服務器
文本框的value和按鈕的value不一樣，沒有關系，不要搞混！！！
當文本框的name沒有設置的時候，該項不會提交給服務器
但是當value沒有寫的時候，value的默認值是空字符串"",這意味着java代碼得到的是String string = ""
-->
<form action="http://localhost:8080/jd/login">
<table>
<tr>
<td>用戶名</td>
<!--文本框也可以設置value，這個value會作為默認值，但是沒有什么意義，所以一般不設置文本框的value-->
<td><input type="text" name="username" value="bbb"/></td>
</tr>
<tr>
<td>密碼</td>
<td><input type="password" name="userpwd"/></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="登錄"/>
<input type="reset" value="清空"/>
</td>
</tr>
</table>
</form>
</body>
</html>
谷歌瀏覽器：
2、用戶注冊的表單：
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用戶注冊的表單</title>
</head>
<body>
<!--
form表單method屬性：
get:用戶提交的信息會顯示在瀏覽器的地址欄上（method默認為get）。
post：用戶提交的信息不會顯示在瀏覽器地址欄上。
-->
<form action="http://localhost:8080/jd/register">
用戶名
<!--文本框格式-->
<input type="text" name="username"/>
<br>
密碼
<!--文本框格式-->
<input type="password" name="userpwd" />
<br>
確認密碼
<!--文本框格式-->
<!--
確認密碼不需要設置name的，因為確認密碼如果要提交給服務器，說明與密碼相同，所以只需要name（提交）密碼就行了，不需要再提交一個相同的信息
-->
<input type="password"/>
<br>
性別
<!--單選圈圈（只能勾選一個圈圈）-->
<!--兩個圈圈的name相同是因為都屬於“用戶性別信息”，所以要相同name，若不相同，就可能出現既是男又是女的情況-->
<input type="radio" name="gender" value="1" />男
<!--
如何判斷是否需要設置value？
若我們需要的是用戶手動輸入的信息，如簡介，密碼等。則不需要設置value；
若我們需要的是用戶選擇我們給定的選項（而不是用戶輸入的信息），則需要設置特定的value以提交給服務器，如性別等
-->
<input type="radio" name="gender" value="0" checked/>女 <!--標記checked代表默認此選項-->
<br>
興趣愛好
<!--多選框格式（可以多選，也可以單選）-->
<input type="checkbox" name="interest" value="smoke"/>抽煙
<input type="checkbox" name="interest" value="drink" checked/>喝酒<!--標記checked代表默認喝酒-->
<input type="checkbox" name="interest" value="fireHair" checked/>燙頭<!--標記checked代表默認燙頭-->
<br>
學歷
<!--下拉列表格式（單選）-->
<select name="grade">
<option value="gz">高中</option>
<option value="dz">大專</option>
<option value="bk" selected>本科</option> <!--selected標記代表默認本科-->
<option value="ss">碩士</option>
</select>
<br>
簡介
<!--文本域格式，文本域沒有value屬性，用戶填寫的內容就是value-->
<!--可以通過設置row（寬）和（長）cols來調整文本框的大小-->
<textarea rows="10" cols="60" name="introduce"></textarea>
<br>
<!--最后給form提供一個提交數據按鈕,將以上數據提交給服務器-->
<input type="submit" value="注冊" />
<!--設置一個按鈕實現清空所有文本框內數據的功能-->
<input type="reset" value="清空" />
</form>
<!--超鏈接其實也可以提交數據，但是只能是固定不變的value，所以不可能用這種方式提交用戶信息-->
<!--超鏈接是get請求-->
<a href="http://localhost:8080/oa/save?username=zhangsan&password=111">提交</a>
</body>
</html>
谷歌瀏覽器：
3、下拉列表支持多選：
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉列表支持多選</title>
</head>
<body>
<!-- multiple="multiple" 支持多選的 size設置顯示條目數量。-->
<!--同時按ctrl和鼠標左鍵才可以實現多選-->
<select multiple="multiple" size="4">
<option>河北省</option>
<option>河南省</option>
<option>山東省</option>
<option>山西省</option>
</select>
</body>
</html>
谷歌瀏覽器：
4.file控件：
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>file控件</title>
</head>
<body>
<!--file控件：文件上傳專用。-->
<input type="file" />
<form action="http://localhost:8080/oa/save">
<!--
隱藏域：網頁上看不到，但是表單提交的時候數據會自動提交給服務器
用於提交需要提交但是又不想讓用戶看到的數據
-->
<input type="hidden" name="***" value="***" />
用戶代碼<input type="text" name="usercode" />
<input type="submit" value="提交" />
</form>
</body>
</html>
谷歌瀏覽器：
5、readonly 與 disabled：
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>readonly disabled</title>
</head>
<body>
<!--
readonly和disabled相同點：都是只讀不能修改。
但是readonly可以提交給服務器，disabled數據不會提交（即使有name屬性也不會提交。）
-->
<form action="http://localhost:8080/taobao/save">
用戶代碼<input type="text" name="usercode" value="456" readonly />
<br>
用戶姓名<input type="text" name="username" value="zhangsan" disabled />
<br>
<input type="submit" value="提交數據" />
</form>
</body>
</html>
谷歌瀏覽器：
6、maxlength：
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>maxlength</title>
</head>
<body>
<!--
maxlength 設置文本框中可輸入的字符數量。
-->
<input type="text" maxlength="3" />
</body>
</html>
谷歌瀏覽器：
