HTML表单
<!--语法:--> <form> 表单元素 </form>
表单本身不可见,可见的是表单元素
表单元素:
<input> | 表单输入标签 |
---|---|
<select> | 菜单和列表标签 |
<option> | 菜单和列表项目标签 |
<textarea> | 文字域标签 |
<optgroup> | 菜单和列表项目分组标签 |
<input>标签(单标签):
<input type="类型属性" name="名称" ....../>
type属性值 | 描述 |
---|---|
text | 文字域 |
password | 密码域 |
file | 文件域 |
checkbox | 复选域 |
radio | 单选域 |
Button | 按钮 |
Submit | 提交按钮 |
Reset | 重置按钮 |
Hidden | 隐藏域 |
image | 图像域 |
单行文本域属性:
属性 | 描述 |
---|---|
name | 文字域的名称 |
maxlength | 指用户输入的最大字符长度 |
size | 指定文本框的宽度,以字符个数为单位;文本框的缺省宽度是20个字符 |
value | 指定文本框的默认值 |
placeholder | 规定用户填写输入字段的提示 |
图像域(图像提交按钮):
<input type="image" name="..." src="imageurl"/>
隐藏域:
<input type="hidden" name="..." value="..."/>
下拉菜单和列表:
<select> <option value="...">选项</option> <option value="...">选项</option> </select>
<select>标签属性:
name | 设置下拉菜单和列表的名称 |
---|---|
multiple | 设置可选择多个选项 |
size | 设置列表中可见选项的数目 |
<option>标签属性:
selected | 设置选项初始选中状态 |
---|---|
value | 定义送往服务器的选项值 |
分组下拉菜单和列表标签:
<select name=""> <optgroup label="组1"> <option value="...">选项</option> <option value="...">选项</option> ...... </optgroup> <optgroup label="组2"> <option value="...">选项</option> <option value="...">选项</option> ...... </optgroup> </select>
多行文本域:
<textarea name=".." rows=".." cols=".." ...> 内容...... </textarea>
多行文本域属性值
name | 设置文本区的名称 |
---|---|
placeholder | 设置描述文本区域预期值的简短提示 |
rows | 设置文本区内的可见行数 |
cols | 设置文本区内的可见宽度 |
表单案例:
<!DOCTYPE html> <html> <head> <title>表单</title> </head> <body> <h1 align="center">注册信息</h1> <hr color="336699"/> <form> <table width="600px" bgcolor="f2f2f2" align="center"> <tr> <td align="right">姓名:</td> <td align="left"><input type="text" name="username" size="25" maxlength="6" placeholder="请输入姓名"/></td> </tr> <tr> <td align="right">邮箱:</td> <td align="left"><input type="text" name="email" value="@163.com"/></td> </tr> <tr> <td align="right">密码:</td> <td align="left"><input type="password" name="paw" size="25" maxlength="6" placeholder="请输入密码"/></td> </tr> <tr> <td align="right">确认密码:</td> <td align="left"><input type="password" name="paw_confirm" size="25" maxlength="6" placeholder="请再输入密码"/></td> </tr> <tr> <td align="right">上传照片:</td> <td align="left"><input type="file"/></td> </tr> <tr> <td align="right">性别:</td> <td align="left">男<input type="radio" name="sex" value="man" checked/> 女<input type="radio" name="sex" value="woman"/> </td> </tr> <tr> <td align="right">爱好:</td> <td align="left">读书:<input type="checkbox" name="dx1" value="read" checked/> 跳舞:<input type="checkbox" name="dx1" value="dance"/> 唱歌:<input type="checkbox" name="dx1" value="sing"/> </td> </tr> <tr> <td align="right">城市:</td> <td align="left"> <select name="city"> <option value="xz" selected>--请选择--</option> <option value="beijing">北京</option> <option value="tianjin">天津</option> <option value="hebei">河北</option> <option value="shanghai">上海</option> <option value="fujian">福建</option> <option value="xiamen">厦门</option> <option value="guangdong">广东</option> </select> <select name="city" size="5" multiple> <option value="xz" selected>--请选择--</option> <optgroup label="华北"> <option value="beijing" selected>北京</option> <option value="tianjin">天津</option> <option value="hebei">河北</option> </optgroup> <optgroup label="华东"> <option value="shanghai">上海</option> <option value="fujian">福建</option> <option value="xiamen">厦门</option> <option value="guangdong">广东</option> </optgroup> </select> </td> </tr> <tr> <td align="right">简介:</td> <td align="left"><textarea name="jj" rows="6" cols="50" placeholder="请输入个人介绍"></textarea></td> </tr> <tr> <td align="center" colspan="2"><input type="button" value="来点我" name="button"/> <input type="submit" value="submit" name="submit"/> <input type="reset" value="reset" name="reset"/> <input type="image" name="image_button" src="image-button.png"/></td> </tr> <tr> <td><input type="hidden" name="hidden" value="这是一个用户注册信息"/></td> <td></td> </tr> </table> </form> </body> </html>
<form>标签属性值:
属性 | 值 | 描述 |
---|---|---|
action | URL | 提交表单时向何处发送表单数据 |
method | get、post | 设置表单以何种方式发送到指定页面 |
name | form_name | 表单的名称 |
target | _blank、_self、_parent、_top | 在何处打开action URL |
enctype | 1.application/x-www-form-urlencoded 2.multipart/form-data 3.text/plain | 在发送表单数据之前如何对其进行编码 |
get:使用URL传递参数,对所发送信息的数量也有限制,一般用于信息获取,保密性差
post:表单数据作为HTTP请求体的一部分,对所发送信息的数量无限制,一般用于修改服务器上的资源