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>

案例演示：