01html基礎03
day03
HTML表單
表單
<form>
表單元素
</form>
註意：表單本身不可見
<input> 表單輸入標簽
<select> 菜單和列表標簽
<option> 菜單和列表項目標簽
<textarea> 文字域標簽
<optgroup> 菜單和列表項目分組標簽
<input type="類型屬性" name="名稱" .../>
type屬性值：text(文本域) password(密碼域) file(文件域) checkbox(復選域) radio(單選域)
Button(按鈕) Submit(提交按鈕) Reset(重置按鈕) hidden(隱藏域) image(圖像域)
單行文本域
<form>
<input type="text" name="..." ..../>
</form>
屬性：name Maxlength size(默認20個字符) value placeholder
單選框
<form>
<input type="radio" name="..." value="..." checked />
</form>
圖像域（圖像提交按鈕）
<input type="image" name="..." src="imageurl" />
隱藏域
<input type="hidden" name="..." value="..." />
下拉菜單和列表標簽
<select>
<option value="..." >選項</option>
<option value="..." >選項</option>
...
</select>
<select>標簽屬性：name multiple(多選) size(顯示的個數，默認為1)
<option>標簽屬性: value selected
分組下拉菜單和列表標簽
<select>
<optgroup label="組1" >
<option value="..." >選項</option>
<option value="..." >選項</option>
...
</optgroup>
<optgroup label="組2" >
<option value="..." >選項</option>
<option value="..." >選項</option>
...
</optgroup>
......
</select>
多行文本域<textarea>
<textarea name="..." rows=".." cols=".." ...>
內容....
</textarea>
<textarea>標簽屬性：name placehorder rows cols
<form>標簽屬性
action method name target enctype
案例（form_select.html）：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>表單select</title> 6 </head> 7 <body> 8 <h1 align="center">註冊信息</h1> 9 <hr color="#336699"> 10 <form action="action.php" method="post" target="_blank"> 11 <table width="600px" bgcolor="#f2f2f2" align="center"> 12 <tr> 13 <td align="right">姓名：</td> 14 <td align="left"> 15 <input type="text" name="username" size="25" maxlength="6" placeholder="請輸入您的姓名"> 16 </td> 17 </tr> 18 <tr> 19 <td align="right">郵箱：</td> 20 <td align="left"> 21 <input type="text" name="email" size="25" value="@163.com"> 22 </td> 23 </tr> 24 <tr> 25 <td align="right">密碼：</td> 26 <td align="left"> 27 <input type="password" name="paw" size="25" maxlength="6" placeholder="請輸入您的密碼"> 28 </td> 29 </tr> 30 <tr> 31 <td align="right">確認密碼：</td> 32 <td align="left"> 33 <input type="password" name="paw_confirm" size="25" maxlength="6" placeholder="請再次輸入您的密碼"> 34 </td> 35 </tr> 36 <tr> 37 <td align="right">選擇文件：</td> 38 <td align="left"> 39 <input type="file" name="file"> 40 </td> 41 </tr> 42 <tr> 43 <td align="right">性別：</td> 44 <td align="left"> 45 男<input type="radio" name="sex" value="man"checked> 46 女<input type="radio" name="sex" value="man"> 47 </td> 48 </tr> 49 <tr> 50 <td align="right">愛好：</td> 51 <td align="left"> 52 讀書<input type="checkbox" name="dx1" value="read" checked> 53 跳舞<input type="checkbox" name="dx1" value="dance"> 54 唱歌<input type="checkbox" name="dx1" value="sing"> 55 </td> 56 </tr> 57 <tr> 58 <td align="right">愛好的運動：</td> 59 <td align="left"> 60 跑步<input type="checkbox" name="dx1" value="run" checked> 61 籃球<input type="checkbox" name="dx1" value="basketball"> 62 跳繩<input type="checkbox" name="dx1" value="skip"> 63 </td> 64 </tr> 65 <tr> 66 <td align="right">城市：</td> 67 <td align="left"> 68 <select name="city"> 69 <option value="xz">--請選擇--</option> 70 <option value="bj">北京</option> 71 <option value="tj">天津</option> 72 <option value="sh">上海</option> 73 <option value="gz">廣州</option> 74 <option value="sz">深圳</option> 75 <option value="cd">成都</option> 76 <option value="hz">杭州</option> 77 <option value="xa">西安</option> 78 </select> 79 <select name="city" multiple size="5"> 80 <option value="xz">--請選擇--</option> 81 <option value="bj">北京</option> 82 <option value="tj">天津</option> 83 <option value="sh">上海</option> 84 <option value="gz">廣州</option> 85 <option value="sz">深圳</option> 86 <option value="cd">成都</option> 87 <option value="hz">杭州</option> 88 <option value="xa">西安</option> 89 </select> 90 <select name="city"> 91 <option value="xz">--請選擇--</option> 92 <optgroup label="華東"> 93 <option value="bj">北京</option> 94 <option value="tj">天津</option> 95 <option value="sh">上海</option> 96 <option value="gz">廣州</option> 97 </optgroup> 98 <optgroup label="華北"> 99 <option value="sz">深圳</option> 100 <option value="cd">成都</option> 101 <option value="hz">杭州</option> 102 <option value="xa">西安</option> 103 </optgroup> 104 </select> 105 </td> 106 </tr> 107 108 <tr> 109 <td align="right"> 110 <input type="hidden" name="hidden" value="這是一個用戶註冊信息"> 111 </td> 112 <td align="left"></td> 113 </tr> 114 <tr> 115 <td align="right">簡介：</td> 116 <td align="left"> 117 <textarea name="jj" placeholder="請輸入" rows="6" cols="50"></textarea> 118 </td> 119 </tr> 120 <tr> 121 <td align="right" colspan="2"> 122 <input type="button" name="button" value="click me!"> 123 <input type="submit" name="submit" value="submit"> 124 <input type="reset" name="reset" value="reset"> 125 <input type="image" name="image" src="image/image-button.png"> 126 </td> 127 </tr> 128 </table> 129 </form> 130 </body> 131 </html>
案例演示：
01html基礎03