第三章 表单
1.什么是表单:
表单就是一个将用户信息组织起来的容器。将用户需要填写的内容放置在表单容器中,当用户单击“提交”按钮的时候,表单会将数据统一发送给服务器。
2.表单标签及表单属性:
规定如何发送表单数据常用值post或get用表单数据 如何发送表单数据 规定如何发送表单数据
|
表示向何处发送表单数据 |
<form method=”post” action=”result.html”>
<p>名字:<input name=”mingzi”type=”text”></p>
<p>密码:<inputname=”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=”男”>男
<inputname=”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”>
<optionvalue=”” >选择月份</option>
<optionvalue=”1” >一月</option>
<optionvalue=”2” >二月</option>
<optionvalue=”3” >三月</option>
<optionvalue=”4” >四月</option>
<optionvalue=”5” >五月</option>
</select>月
单选按钮/复选框 ? | 选项默认 ? |
单选按钮 ? | checked=” checked” ? |
复选框 ? | selected=” selected” ? |
6.按钮:
1.button 普通按钮
2.submit 提交按钮
3.reset 重置按钮
<inputtype=”reset”name=”chongzhi”value=”重置”>
7.多行文本域:
<textareaname=”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><inputtype=”submit”value=”提交”></p>
将type属性改为hidden隐藏类型即可创建一个隐藏域 ??? | ??
??????
<p><inputtype=”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”>
邮箱:<inputtype=”text”></br>
</fieldset>
</form>
12.表单元素的标注
对表单元素进行标注,这样做的目的是为了增强鼠标的可用性。用表单元素标注时,在客户端呈现的效果不会有任何的改进。但是如果当用户使用鼠标单击标注文本内时,浏览器会自动将焦点转移到与该标注相关的表单元素上。
<form>
请选择性别:
<inputname="xingbie" type="radio" id="n" value="男" checked="checked" />
<label for="n"/>男
<input name="xingbie" type="radio"id="l" value="女" />
<label for="l" />女
HTML第三章
原文地址:http://www.cnblogs.com/ppdpp/p/7635537.html