四、表单

深藏阁楼爱情的钟 2022-11-13 11:29 130阅读 0赞

### 文章目录 ###

*  四、表单
 *   *  4.1 表单的基本概念
     *  4.2 HTML 的表单元素
     *  4.3 使用表单需要注意的事项
     *   *  4.3.1 GET提交方式(默认)
         *  4.3.2 POST提交方式
     *  4.4 自定义注册表单

--------------------

# 四、表单 #

## 4.1 表单的基本概念 ##

在我们页面上唯一用于接收用于输入并与服务器交互的元素——表单  
我们做在网站或软件系统时会尽量避免用户输入,在任何软件系统都会存在需要用户输入的要素，用来收集用户的信息;  
在网页上能够接收输入的只有表单;  
表单是一个统称，它指的一系列表单元素的集合;

## 4.2 HTML 的表单元素 ##

1.  文本框(text)
2.  密码框(password)
3.  日期框(date)
4.  数字框(number)
5.  复选框(checkbox)
6.  单选按钮(radio)
7.  文本域（textarea）
8.  文件域(file)
9.  下拉列表（select）
10. 隐藏域(hidden)
11. 提交按钮(submit)
12. 重置按钮(reset)
13. 普通按钮(button)
14. 图片按钮(image)

## 4.3 使用表单需要注意的事项 ##

在网页中如果只写表单元素是无效的,表单元素必须归到一个表单中才起作用,在 HTML中使用`<form></form>`一对标签来表示一个表单;  
需要的表单元素必须在这对标签中才能起作用(form 表单)；  
常见的表单元素都在一个`<input>`标签中，在 form 标签中有一个 action 的属性，该属性的值指定当前表单的提交位置，当用户单击 submit 按钮时，会自动将表单的数据提交到 action 属性指定的位  
置。  
表单有两种提交方式(form标签的method属性中设置):

### 4.3.1 GET提交方式(默认) ###

1.1 不安全，在地址栏中会显示提交的数据信息  
1.2 GET提交方式提交的数据量大小不能超过255个字节

### 4.3.2 POST提交方式 ###

1.1 安全,在地址栏中不显示提交的数据  
1.2 POST 提交方式理论上提交的数据量可以无限制，页面与服务器交互都有提交方式，超链接的提交方式为get

## 4.4 自定义注册表单 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70]: /images/20221022/2bc8a3894cc140d998eb91a2096f8a1b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 1]: /images/20221022/74bbb7424fc84a58b1db3aa78cb2117e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 2]: /images/20221022/c0dc865a0e494623b0d80ca652e03d3e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 3]: /images/20221022/53d15da0788a4983a4e8effa9a40ca17.png