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
原文地址：https://www.cnblogs.com/shink1117/p/8393605.html