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>
案例演示：
