本文共 5047 字，大约阅读时间需要 16 分钟。
html表单
### 1、概述
表单的作用：用于搜集不同类型的用户输入。
表单的组成：表单元素（控件）、表单区域。
生活中的表单：
网页中的表单：
### 2、表单区域
#### 2.1 form标签
- 语法：
```css
<form></form>
```
- 作用：
定义 HTML 表单域，是一个包含表单元素的区域。实现用户信息的收集和传递。举例说明：比如最为常见的交互操作，注册会员、跟帖留言或者文章发布等
- 注意：
form表单实现上述操作是最为常见方式之一，也可以使用其他方式，比如ajax等
### 3、表单元素
表单元素是允许用户在表单中输入内容的标签，比如：文本域、下拉列表、单选框、复选框等。
#### 3.1 input标签
- 概述：`<input> `标签是最重要的表单元素。type属性取值不同，可以展示出不同的表单形式。
- 作用：用来定义不同种类的输入控件
- 语法：
```css
<input type="类型">
```
- 常用类型
- type="text"
- 作用：用于文本输入的单行输入字段
```css
<input type="text" >
```
- 显示效果如下：
- type="password"
- 作用：定义密码字段
```css
<input type="password" value="密码">
```
- 注意：密码字段字符不会明文显示会显示为星号或实心圆
- 显示效果如下：
- type="radio"
- 作用：定义单选按钮，允许用户在有限数量的选项中选择其中之一（需要指定单选按钮组）
```css
<input type="radio">
```
- 显示效果如下：
- type="checkbox"
- 作用：定义复选框，允许用户在有限数量的选项中选择零个或多个选项
```css
<input type="checkbox">
```
- 显示效果：
- type="button"
- 作用：定义普通按钮
```css
<input type="button" value="按钮">
```
- 提示：value属性定义按钮显示的文本
- 显示效果
- type="submit"
- 作用：定义用于向表单处理程序提交表单的按钮
- 注意：省略了提交按钮的 value 属性，该按钮将显示默认文本”提交”（不同浏览器表现不同）
```css
<input type="submit" value="提交按钮">
```
- 显示效果
- 
- type="reset"
- 作用：定义重置按钮，将表单元素的value属性值重置为它最初的默认状态
- 注意：省略了提交按钮的 value 属性，该按钮将显示默认文本”重置”（不同浏览器表现不同）
```css
<input type="reset" value="重置">
```
- 显示效果
- type="image"
- 作用：定义图像形式的提交按钮
- 属性
- src=""：指定图片地址
- alt=""：指定替换文本
- 提示：src 属性和alt 属性必须与 <input type="image"> 结合使用
```css
<input type="image" src="button.png" alt="开始游戏">
```
- 显示效果：
- type="file"
- 作用：用于文件上传
```css
<input type="file">
```
- 显示效果
#### 3.2 textarea标签
- 作用：
定义多行输入字段（文本域）
- 语法：
```css
<textarea>初始值</texarea>
```
- 注意：不能够使用value属性规定它的初始值，初始值在开始和结束标签之间设置
```css
<textarea name="" id="" cols="30" rows="10">我是一个文本框</textarea>
```
- 显示效果：
#### 3.3 select标签
- 概述：
select标签用于定义下拉列表，下拉列表种通过option标签定义选项
- 语法：
```css
<select name="" id="">
<option value="">北京</option>
<option value="">上海</option>
<option value="">天津</option>
</select>
```
- 显示效果：
### 4、form的属性
#### 4.1 action属性
```css
action="数据提交地址.php,.net"
```
- 作用：
表单的动作属性，定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
可以是绝对路径或相对路径也可以是接收数数据的email邮箱地址。
- 注意：
如果省略 action 属性，则 action 会被设置为当前页面。
#### 4.2 target属性
- 作用：
设置目标地址的打开方式
- 取值：
- `_self`当前窗口(默认值)
- `_blank`新窗口
#### 4.3 method属性
- 作用：
规定发送表单数据的 HTTP 方法
- 取值：
- GET/POST
> get 方法：将表单中数据的按照 variable=value 的形式，添加到 action 所指向的【 URL 后面，并且两者使用“?”连接】，而各个变量之间使用“&”连接。
>
>
>
> post方法：将表单中的【数据放在 form 的数据体】中，按照变量和值相对应的方式，传递到 action 所指向 URL。
**get 和 post 区别（了解）：**
简单阐述，当前阶段不作为重点
- 用途：
get 从指定的资源请求数据，是用来从服务器上【获得数据】，而 POST向指定的资源提交要被处理的数据，是用来向服务器【上传递数据】
- 安全性：
get 是【不安全的】，因为规定发送表单数据的HTTP方法一些系统内部消息将会一同显示在用户面前。post 的所有操作对用户来说都是【不可见的】
- 数据量：
【get传输的数据量小】，这主要是因为受 URL 长度限制；而 post 可以传输大量的数据，所以上传文件只能使用 post（当然还有一个原因，将在后面的提到）。
### 5、表单元素标注
- 作用：
为 input 元素定义标注（标记）
通过<label> 标签的 for 属性值与相关元素的 id 值相同，绑定表单元素
- 语法：
```css
<label for="id名"></label>
```
- 效果描述：
当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上
```css
<label for="usname">用户名</label><input type="text" id="usname">
```
### 6、CSS 用户界面属性
#### 6.1 轮廓线
概述：轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。
outline简写
- 在一个声明中设置所有的轮廓属性
- 可以设置的属性分别是（按顺序）：
outline-color， outline-style， outline-width
- 说明：
- 轮廓样式 outline-style
- 轮廓颜色 outline-color
- 轮廓宽度 outline-width
- 语法：空格隔开
- 取值：参考边框
- 注意：如果不设置其中的某个值，也不会出问题，比如 outline:solid #ff0000; 也是允许的。
- 实例演示:
清除与设置 input的轮廓线：
```css
input {
/* 清除轮廓线 */
outline: none; /* 相当于 outline-style:none */
}
```
设置鼠标滑过添加外轮廓：
```css
div{
float:left;
width: 200px;
height: 200px;
background:#ccc;
margin:20px;
}
```
div:hover{
/* outline-width:5px;
outline-style:solid;
outline-color:red; */
outline:5px solid red;
}
#### 6.2 重置元素大小
默认：文本域可以用户可以通过鼠标拖拽改变大小
resize:none指定一个元素不允许用户调整大小
```css
textarea{
/* 禁止用户重置元素大小 */
resize: none;
}
```
#### 6.3 CSS 鼠标样式
通过在CSS中，cursor属性指定鼠标指针放在一个元素边界范围内时所用的光标形状
- 常用值
- 默认值：auto
- default 通常是一个箭头
- text 显示为光标
- pointer 光标呈现为指示链接的指针（一只手）
- move 此光标指示某对象可被移动。
- 其他值
>e-resize 此光标指示矩形框的边缘可被向右（东）移动。
>ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。
>nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。
>n-resize 此光标指示矩形框的边缘可被向上（北）移动。
>se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。
>sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。
>s-resize 此光标指示矩形框的边缘可被向下移动（南）。
>w-resize 此光标指示矩形框的边缘可被向左移动（西）。
>text 此光标指示文本。
>wait 此光标指示程序正忙（通常是一只表或沙漏）。
>help 此光标指示可用的帮助（通常是一个问号或一个气球）。
### CSS显示隐藏
#### 1.1 display
- none 隐藏该元素并且该元素所占的空间也不存在了
- block 显示元素
#### 1.2 visibility
- hidden 隐藏该元素但是该元素所占的内存空间还存在，即“隐身效果”
- visible 显示元素
转载地址：http://kxvduy.baihongyu.com/