一、HTML表单
概述
表单:采集不同类型用户输入的数据,然后发送给服务器,实现用户与服务器之间的数据交互
一个完整的表单包含:表单域,表单控件(表单元素),提示信息,共三个部分;
# 1、表单元素# 1、表单区域--form标签
- 语法:```css <form></form>```
- 作用:
定义 HTML 表单域,是一个包含表单元素的区域。实现用户信息的收集和传递。举例说明:比如最为常见的交互操作,注册会员、跟帖留言或者文章发布等
注意: form表单实现上述操作是最为常见方式之一,也可以使用其他方式,比如ajax等
一个页面中可以包含多个form标签,标签之间是相互独立的,不能嵌套
## 1-1 form的属性
## 1-1-1 action属性`css
## action="数据提交地址"
注意:如果省略 action 属性,则 action 会被设置为当前页面。
``` 作用: 把数据提交到后台或者服务器
注意:
如果省略 action 属性,则 action 会被设置为当前页面。
## 1-1-2 target属性
作用:
设置目标地址的打开方式
取值: `_self`当前窗口(默认值) - `_blank`新窗口
# 1-1-3 method属性
- 作用:
method="GET/POST":提交表单时所用的HTTP方法,默认是GET方法
- 取值: - GET/POST
> get 方法:将表单中数据的按照 variable=value 的形式,添加到 action 所指向的【 URL 后面,并且两者使用“?”连接】,而各个变量之间使用“&”连接。(通过地址栏提交)
> post方法:将表单中的【数据放在 form 的数据体】中,按照变量和值相对应的方式,传递到 action 所指向 URL。将数据隐藏在http数据流中传输(通过后台提交)
- 注意:name属性:如果input表单不设置name属性,输入框的内容无法随表单一起提交
# 2、input表单控件
表单元素是允许用户在表单中输入内容的标签,比如:文本域、下拉列表、单选框、复选框等。
- 概述:`<input> `标签是最重要的表单元素。type属性取值不同,可以展示出不同的表单形式。
- 作用:用来定义不同种类的输入控件
语法:<input type="text" name="" value="">
type属性:表示不同类型的表单控件
name属性:表单的字段名,如果不设置name属性,输入框的内容无法随表单一起提交
value属性:规定输入字段的初始值```
-常用类型 - type="text" - 作用:用于文本输入的单行输入
<input type="text" placeholder="请输入账号">
type='text'
placeholder:提示信息
```
- type="password"
- 作用:定义密码字段
- 默认掩码处理
<input type="password" value="密码">
```
- type="radio"
- 作用:定义单选按钮,允许用户在有限数量的选项中选择其中之一(需要指定单选按钮组)
<input type="radio">
<input type="radio" name="" value="">
name属性:可以实现单选框的互斥效果,name设置的属性值要一样,即选男不能选女,选女不能选男
value属性:必不可少的,表示选项代表的值
- type="checkbox"
- 作用:定义复选框,允许用户在有限数量的选项中选择零个或多个选项
<input type="checkbox">
<input type="checkbox" name="" value="">
name属性:name设置的属性值要一样,实现多个选项保存在同一个字段中
value属性:必不可少的,表示选项代表的值
checked:用于单选框按钮和复选框按钮的默认选中,直接在input标签写checked或checked='checked'
```
- type="submit"
- 作用:定义用于向表单处理程序提交表单的按钮
- 注意:省略了提交按钮的 value 属性,该按钮将显示默认文本”提交”(不同浏览器表现不同)
<input type="submit" value="提交按钮">
-
type="button"
- 作用:定义普通按钮
```html
<input type="button" value="按钮">
- 提示:不能提交信息,默认没有文字
- value属性:定义普通按钮的文字
- type="reset"
- 作用:清除表单控件的输入信息
<input type="reset" value="重置"
- value属性:修改按钮的文字,默认是重置
- 扩展:
```html
按钮button
<button type="submit"></button>
默认没有文字,内容写在中间
具有提交功能,但是在ie7及以下浏览器是没用提交功能的
type类型默认submit
- type="image"
- 作用:定义图像形式的提交按钮
- 属性
- src="":指定图片地址
- alt="":指定替换文本
- 提示:src 属性和alt 属性必须与 <input type="image"> 结合使用,一般不建议使用
- width:设置宽
height:设置高
```html
<input type="image" src="./images/4.jpg" alt="图片" width="100" height="200">
```
- type="file"
- 作用:用于文件上传
- 注意:
要实现文件的上传,必须在form标签中添加enctype="multipart/form-data"
<input type="file">
#### 2-1 textarea标签
- 作用:
用于留言板等需要输入大量文本的一个标
```css
<textarea>初始值</texarea>
- 注意:不能够使用value属性规定它的初始值,初始值在开始和结束标签之间设置
<textarea name="" id="" cols="30" rows="10">我是一个文本框</textarea>
resize: none禁止用户手动调整多行文本域的大小
cols属性是表示宽度
rows属性是表示行数
```
#### 2-3 select标签
- 概述:
select标签用于定义下拉列表,下拉列表种通过option标签定义选项
- 语法:
```html
下拉列表
<select name=""size="2">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="天津">天津</option>
</select>
option:列表项
value属性:必不可少的,表示选项代表的值
selected:下拉列表的默认选中,直接在option标签中写即可,selected或者selected='selected'
size属性:控件长度,规定下拉列表中可见选项的数目
```
### 3、表单元素标注
为 input 元素定义标注(标记)
通过<label> 标签的 for 属性值与相关元素的 id 值相同,绑定表单元素
* 作用:是扩大点击范围,提高用户体验
一般与单选按钮或者复选框组合使用
- 语法:
```html
<label for="id名"></label>
```
- 效果描述:
当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上
```html
<input type="radio" id="man1" name="man" value="男">
<label for="man1">男</label>
<input type="checkbox" name="" id="woman" value="女">
<label for="woman">女</label>
<label for="man">
<input type="radio" name="sex" value="男" checked id="man">男
</label>
```
### 3.表单属性
```html
1、action 属性定义在提交表单时执行的动作。通常,表单会被提交到 web 服务器上的网页。如果省略 action 属性,则 action 会被设置为当前页面。
2、method="GET/POST":提交表单时所用的HTTP方法,默认是GET方法
3、checked:用于单选框按钮和复选框按钮的默认选中,直接在input标签写checked或checked='checked'
4、selected:下拉列表的默认选中,直接在option标签中写即可,selected或者selected='selected' 5、value属性:规定输入字段的初始值。
6、readonly属性:只读属性,只能读,不能修改
7、disabled属性:禁用属性,表示元素不可用,不可以点击
8、maxlength属性:允许输入的最多字符
9、size属性:控件长度,规定下拉列表中可见选项的数目
10、placeholder 提示用户输入信息
```
## 2、文本框和按钮不对齐现象
- input 设置左浮动 (float:left)
- 因为按钮的高度比input的高度大2px
- 垂直对齐:按钮设置高度比文本框的高度大2px
- 左右对齐:文本框和按钮设置浮动
```html
input {
/* 左右对齐 */
float: left;
}
.sub {
/* 垂直对齐 */
/* 按钮的高度比文本框的高度大2px */
height: 21px;
}
-------------------------------------------------------------------------------
input {
/* 左右对齐 */
float: left;
height: 50px;
}
.sub {
/* 垂直对齐 */
/* 文本框和按钮的高度要一样 */
height: 56px;
}
结构:
<input type="text" placeholder="text">
<input type="submit" class="sub">
<input type="button" class="sub" value="普通按钮">
<input type="reset" class="sub">
```