注意：文中代碼的效果僅展示了在瀏覽器上的外觀，并未展示效果，別問，問就是博主懶（硬氣地說道）
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="https://www.cnblogs.com/Burning-youth/p/注冊"/>
<!--這是一個普通的按鈕，沒有提交表單的能力-->
<input type="button" />
</form>
<br /><br />
<!--
這個按鈕和普通的超鏈接沒什么太大的區別（超鏈接和表單都可以向服務器發送請求，只不過表單發送請求的同時可以順便提交資料）
注意：利用表單來提交資料的單位是一個“form”，所以只會提交form之“內”的資料
-->
<form action="http://www.baidu.com">
<input type="submit" value="https://www.cnblogs.com/Burning-youth/p/百度"/>
</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="https://www.cnblogs.com/Burning-youth/p/bbb"/></td>
</tr>
<tr>
<td>密碼</td>
<td><input type="password" name="userpwd"/></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="https://www.cnblogs.com/Burning-youth/p/登錄"/>
<input type="reset" value="https://www.cnblogs.com/Burning-youth/p/清空"/>
</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="https://www.cnblogs.com/Burning-youth/p/1" />男
<!--
如何判斷是否需要設定value？
若我們需要的是用戶手動輸入的資訊，如簡介，密碼等，則不需要設定value；
若我們需要的是用戶選擇我們給定的選項（而不是用戶輸入的資訊），則需要設定特定的value以提交給服務器，如性別等
-->
<input type="radio" name="gender" value="https://www.cnblogs.com/Burning-youth/p/0" checked/>女 <!--標記checked代表默認此選項-->
<br>
興趣愛好
<!--多選框格式（可以多選，也可以單選）-->
<input type="checkbox" name="interest" value="https://www.cnblogs.com/Burning-youth/p/smoke"/>抽煙
<input type="checkbox" name="interest" value="https://www.cnblogs.com/Burning-youth/p/drink" checked/>喝酒<!--標記checked代表默認喝酒-->
<input type="checkbox" name="interest" value="https://www.cnblogs.com/Burning-youth/p/fireHair" checked/>燙頭<!--標記checked代表默認燙頭-->
<br>
學歷
<!--下拉串列格式（單選）-->
<select name="grade">
<option value="https://www.cnblogs.com/Burning-youth/p/gz">高中</option>
<option value="https://www.cnblogs.com/Burning-youth/p/dz">大專</option>
<option value="https://www.cnblogs.com/Burning-youth/p/bk" selected>本科</option> <!--selected標記代表默認本科-->
<option value="https://www.cnblogs.com/Burning-youth/p/ss">碩士</option>
</select>
<br>
簡介
<!--文本域格式，文本域沒有value屬性，用戶填寫的內容就是value-->
<!--可以通過設定row（寬）和（長）cols來調整文本框的大小-->
<textarea rows="10" cols="60" name="introduce"></textarea>
<br>
<!--最后給form提供一個提交資料按鈕,將以上資料提交給服務器-->
<input type="submit" value="https://www.cnblogs.com/Burning-youth/p/注冊" />
<!--設定一個按鈕實作清空所有文本框內資料的功能-->
<input type="reset" value="https://www.cnblogs.com/Burning-youth/p/清空" />
</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="https://www.cnblogs.com/Burning-youth/p/***" />
用戶代碼<input type="text" name="usercode" />
<input type="submit" value="https://www.cnblogs.com/Burning-youth/p/提交" />
</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="https://www.cnblogs.com/Burning-youth/p/456" readonly />
<br>
用戶姓名<input type="text" name="username" value="https://www.cnblogs.com/Burning-youth/p/zhangsan" disabled />
<br>
<input type="submit" value="https://www.cnblogs.com/Burning-youth/p/提交資料" />
</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>
谷歌瀏覽器：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/413072.html
標籤：Html/Css