form表单(重要)
表单在网页中主要负责数据采集功能,用form定义,用户输入信息都要包含在form标签,点击提交后,form里边包含的数据将被提交到服务器端或电子邮件中。(所有用户的输入内容都用表单来写,如登录注册,搜索框),收集到的数据提交到后台,服务器端在 反馈回客户端(两者交互)。
表单由窗体及控件组成,输入框、按钮叫做控件。
表单标签的格式:
<form action="" method="post"/get enctype="multipart/form-data" name=" " >控件</form>
属性:
name 提交时名称
action 移交到的地址
method 提交方式(默认为get)
post与get的区别:
(1)数据提交方式:get可以看到URL中的数据,post不可见
(2)get提交少量的数据,post提交大量的数据
(3)get最多提交1KB的数据,post不限制
(4)get提交的数据有历史记录,安全性不好
表单的组成:单表标签(控件)、表单域、表单按钮
表单的目的:收集用户的信息并提交
表单域: 存放表单的区域
表单按钮:把表单域中收集的信息提交
表单标签(控件):input
注意:1.input是单标签
2.input通过type属性来更改形状
文本框和密码:
(1)文本框
<input type="text"/>
name 定义控件的名称
value 指定控件的初始值
(2)密码
<input type="password""/>
name 定义控件的名称
value 指定控件的初始值
<h3>用户信息</h3>
<p>用户名:<input type="text" name="username" value="ih"/></p>
<p>密 码:<input type="password" name=" " value=" "/></p>
显示页面:
单选按钮和复选框:
(3)单选按钮:
<input type="radio"/>
属性:
name 定义控件的名称
value 指定控件的初始值
checked 设置控件初始状态是否被选中(checked value)
注意:单选按钮必须经过name属性值(只可以选择一个)
(4)复选框
<input type="checkbox"/>
name 定义控件的名称
value 指定控件的初始值
checked 设置控件初始状态是否被选中(checked value)
例子:
单元框为性别 复选框为爱好
<p>性别:<input type="radio" name="sex" checked value="男"/> 男 <input type="radio" name="sex"/>女</p>
<p>爱好:<input type="checkbox" checked/> 吃饭饭<input type="checkbox" checked/>睡觉觉
<input type="checkbox" /> 写代码<input type="checkbox" /> 玩游戏
</p>
页面显示:
文件
(5)文件
<input type="file"/>
属性:
name 定义控件的名称
注意:
(1)form表单的method属性要post
(2)form要加enctype="multipart/form-data"属性,说明我们的文件已二进制传输
格式如下:
<form action="" method="post" enctype="multipart/form-data">
<input type="file"/>
</form>
隐藏区域(学生学号)
(6)
<input type="hidden" />
属性
name 定义控件的名称
value
(7)按钮
普通按钮:<input type="button" value="注册"/>
提交按钮:<input type="submit"/> //默认提交按钮
重置按钮:<input type="reset"/> //默认重置按钮
图像按钮:<input type="image" src="../images/anniu.jpg" /> 属性 name src 指图像地址
<button>按钮</button>
属性:
name
value 显示文字
<form action="" method="post" enctype="multipart/form-data">
<input type="file"/>
</form>-->
<input type="file"/>
<p>隐藏区:<input type="hidden" /></p>
<p>普通按钮:<input type="button" value="注册"/></p>
<p>提交按钮:<input type="submit"/></p>
<p>重置按钮:<input type="reset"/></p>
<p>图像按钮:<input type="image" src="../images/anniu.jpg" width="20px"/></p>
<p><button>按钮</button></p>
显示页面:
2.下拉列表框
select属性
name
multiple 可多选
size 规定下拉列表可见选项目(显示几行)
disabled 规定禁用该下拉列表
option属性
selected 用来指定默认的选项
value 用来给<option>指定的一个选项赋值
籍贯:
<select >
<option >请选择省份</option>
<option selected>海南省</option>
<option >陕西省</option>
<option>四川省</option>
</select>
<select>
<option>海口市</option>
<option>三亚市</option>
<option>临高县</option>
<option>文昌市</option>
</select>
<hr/>
<select>
<optgroup label="陕西省">
<option>西安市</option>
<option>咸阳市</option>
</optgroup>
</select>
页面显示:
3.多行文本框
<textarea></textarea>
属性:
cols 这文字区块的宽度
rows 这文字区块的行数(高度)
label 标签 <label></label> (当点击文字是也可以输出信息)
使用方法:
1.直接使用label标签包裹input (<label><input/></label>)
2.通过label的for指向按钮的ID来绑定,for和id属性值要相同
<label for="pwd" >记住密码</label>
<input type="checkbox" id="pwd"/>
(checkbox 和radio)
<fieldset>元素集(块级元素)
fieldset 元素可将表单的相关元素分组和legend标签一起用,legend定义了fieldset提示信息。
<fieldset>
<legend>健康信息</legend>
<label>身高:<input type="text"/><br/></label>
<label>体重:<input type="text"/></label>
</fieldset>
<title>多行文本框</title>
</head>
<body>
<textarea rows="10" cols="20">
个人简介
</textarea>
<hr/>
<label>用户名:<input type="text"/></label><br/>
<label>密 码:<input type="text"/></label>
<hr/>
<label for="pwd" >记住密码</label>
<input type="checkbox" id="pwd"/>
<hr/>
<fieldset>
<legend>健康信息</legend>
<label>身高:<input type="text"/><br/></label>
<label>体重:<input type="text"/></label>
</fieldset>