HTML+CSS基础入门-第八天（HTML-表单）

谁借莪１个温暖的怀抱￠ 2022-10-01 00:58 185阅读 0赞

# 表单标记 #

<form></form>定义表单的开始位置和结束位置，表单提交时的内容就是<form>表单中的内容。

## 基本格式 ##

## 属性 ##

### name ###

表单名称

### method ###

*  get方式：会将表单的内容附加在URL地址的后面，所以限制了提交的内容的长度，不超过8192个字符，且不具备保密性
 *  post方式：将表单中的数据一并包含在表单主题中，一起传送到服务器中处理，没有数据大小限制。

### action ###

表单数据的处理程序URL地址，如果为空则使用当前文档的URL地址，如果变淡中不需要使用action属性也要指定其属性为”no”

### enctype ###

设置变淡的资料的编码方式

### target ###

和超链接的属于类似，用于指定目标窗口

# <input>标记 #

## type属性 ##

*  text：当type=”text”时，<input>表示一个文本的输入域
 *  password:当type=”password”时,<input>表示一个密码的输入域

### 代码 ###

### 显示结果 ###

![8-1][]

## name属性 ##

定义控件的名称

## value属性 ##

初始化值，打开浏览器时，文本框中的内容

### 代码 ###

### 显示结果 ###

![8-2][]

## size属性 ##

设置控件的长度

### 代码 ###

### 显示结果 ###

![8-3][]

## maxlenght属性 ##

输入框中最大允许输入的字符数

# 提交 重置 普通按钮 #

*  当<input type=”submit”>时，为提交按钮
 *  当<input type=”reset”>时，为重置按钮
 *  当<input type=”button”>时，为普通按钮

## 代码 ##

### 点击提交默认提交到当前页面 ###

![8-4][]

### 设置action ###

#### 代码 ####

#### 点击提交显示结果，提交到action地址 ####

![8-5][]

### 设置post提交 ###

#### 代码 ####

### 点击提交后地址栏不会有参数暴露 ###

![8-6][]

# 单选框和复选框 #

## 单选按钮 ##

当<input type=”radio”>时，为单选按钮

### 代码 ###

name设置一样可单选 checked为默认选择项

### 显示结果 ###

![8-7][]

## 复选框 ##

当<input type=”checkbox”>时，为复选框

### 代码 ###

### 显示结果 ###

![8-8][]

## 注意 ##

单选框和复选框都可以使用”cheked”属性来设置默认选中项

# 隐藏域 #

当<input type=”hidden”>时，为隐藏表单域

## 代码 ##

## 显示结果，界面中不会显示隐藏的内容，单机提交会进行提交 ##

![8-9][]

# 多行文本域 #

## 用法 ##

使用<textarea>标记可以实现一个，能够输入多行文本的区域

## 语法格式 ##

rows属性和cosl属性分别用来指定，显示的行数和猎术，单位是个数

## 代码 ##

## 显示结果 ##

![8-10][]

# 菜单下拉列表域 #

## 语法格式 ##

## option标记 ##

<option>用来指定列表中的一个选项，需要放在<select></select>之间  
\- value：给选项赋值，指定传送到服务器上面的值  
\- selected：指定默认的选项

## 代码 ##

## 显示结果 ##

![8-11][]

[8-1]: /images/20220705/e990922cbcc34c1eb273e88ca3084659.png
[8-2]: /images/20220705/a7bff8f215744fcf819f97586e1a73cd.png
[8-3]: /images/20220705/fde0cf37325941ae9e58de39979a104a.png
[8-4]: /images/20220705/dd1d59db389b4af78a636cb84eb8ade7.png
[8-5]: /images/20220705/bf8d5458c5aa45ed9a72b85127106bca.png
[8-6]: /images/20220705/bd30e8162382408198d0ee1c0b35f887.png
[8-7]: /images/20220705/0a00b83080bd41f38d6c2243beb1e1c2.png
[8-8]: /images/20220705/27e95266a4d9412fb6f93a5bb59acd49.png
[8-9]: /images/20220705/60c6fb6226974f42a8d70ad966dc2cdb.png
[8-10]: /images/20220705/3c07a58851a04d339d641bd7fed67899.png
[8-11]: /images/20220705/4bc1a5b245494fc3829d0c12a45cfe59.png