第三章 表单
1.什么是表单：
表单就是一个将用户信息组织起来的容器。将用户需要填写的内容放置在表单容器中，当用户单击“提交”按钮的时候，表单会将数据统一发送给服务器。
2.表单标签及表单属性：
|
规定如何发送表单数据常用值post或get用表单数据 如何发送表单数据 规定如何发送表单数据
|
|
表示向何处发送表单数据 |
<form method=”post” action=”result.html”>
<p>名字：<input name=”mingzi”type=”text”></p>
<p>密码：<input name=”mima”type=”password”></p>
<p按钮：<input type=”submit”name=”Button”value=”提交”></p>
<p>按钮：<input type=”reset”name=”Reset” value=”重填”></p>
|
input元素类型 |
|
input元素的值
|
|
input元素名称
|
<input type=”submit”name=”Button”value=”提交”>
|
属性 |
说明 |
|
type |
指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text |
|
name |
指定表单元素的名称。 |
|
value |
元素的初始值。type 为 radio时必须指定一个值 |
|
size |
指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位 |
|
maxlength |
type为text 或 password 时，输入的最大字符数 |
|
checked |
type为radio或checkbox时，指定按钮是否是被选中 |
|
默认值 |
|
文本框的长度 |
|
输入的数据长度 |
列：
<p>登录名：
<Input name=”sname” type=”text” value=”张” size=”30” maxlength=”20” >
</p>
3.单选按钮：
<form method=”post” action=””>
性别： <input name=”gen” type=”radio” class=”input”value=”男”>男
<input name=”gen” type=”radio” class=”input”value=”女”>女
</form>
4.复选框：
<form method=”post” action=””>
爱好：
<input type=”checkbox”name=”interest” value=”sports”>运动
<input type=”checkbox”name=”interest” value=”talk”>聊天
<input type=”checkbox”name=”interest” value=”play”>玩游戏
</form>
5.列表框：
<form method=”post” action=””>
<select name=”yue”>
<option value=”” >选择月份</option>
<option value=”1” >一月</option>
<option value=”2” >二月</option>
<option value=”3” >三月</option>
<option value=”4” >四月</option>
<option value=”5” >五月</option>
</select>月
|
单选按钮/复选框 |
选项默认 |
|
单选按钮 |
checked=” checked” |
|
复选框 |
selected=” selected” |
6.按钮：
1.button 普通按钮
2.submit 提交按钮
3.reset 重置按钮
<input type=”reset”name=”chongzhi”value=”重置”>
7.多行文本域：
<textarea name=”textarea” cols=”显示的列的宽度” rows=”显示的行数”></textarea>
8.文件域：
<input type=”file” name=“wenjian”/>
9.表单的高级应用：
设置表单的隐藏域：
<form action=”” method=”get”>
<p>用户名：<input name=”minzi” type=”text”></p>
<p>密码 ： <input name=”mima” type=”password”></p>
<p><input type=”submit”value=”提交”></p>
|
将type属性改为hidden隐藏类型即可创建一个隐藏域 |
<p><input type=”hidden” value=”666” name=”userid”></p>
<from>
10.表单只读与禁用设置：
|
只读 |
readonly=”readonly” |
|
禁用 |
disabled=”disabled” |
11.语义化的表单：
域：在表单中可以使用<fieldset>标签实现域的定义。简单的来说就是将一组表单元素放到<fieldset>标签内时，浏览器就会以特殊方式来显示它们，这些表单元素可能有特殊的边界效果。
域标题：所谓的域标题就是给创建的域设置一个标题。设置域标题需要使用一个新的标签，<legend>标签，在该标签内的内容就被视为域的标题。
<from>
<fieldset>
<legend>用户信息</legend>
姓名：<input type=”text”>
年龄：<input type=”text”></br>
手机：<input type=”text”>
邮箱：<input type=”text”></br>
</fieldset>
</form>
12.表单元素的标注
对表单元素进行标注，这样做的目的是为了增强鼠标的可用性。用表单元素标注时，在客户端呈现的效果不会有任何的改进。但是如果当用户使用鼠标单击标注文本内时，浏览器会自动将焦点转移到与该标注相关的表单元素上。
<form>
请选择性别：
<input name="xingbie" type="radio" id="n" value="男" checked="checked" />
<label for="n"/>男
<input name="xingbie" type="radio" id="l" value="女" />
<label for="l" />女