0%

HTML表单

发表于 更新于 分类于
本文字数： 3k 阅读时长 ≈ 3 分钟
主要后面Javascript 的学习会涉及到表单

HTML 表单

概念

表单（Form）是 HTML 中用于收集用户输入信息并将其提交到服务器的一种机制。它通常由包含表单元素的一组 HTML 元素组成，用户可以在表单中输入数据并通过提交按钮将数据发送到服务器进行处理=>

我的理解: 就是C语言中的scanf()和getchar(),用来读取用户的输入

组成

<form> 元素用于创建表单，action 属性定义了表单数据提交的目标 URL，method 属性定义了提交数据的 HTTP 方法（这里使用的是 “post”）

method

method 属性用于定义 HTML 表单提交数据时所使用的 HTTP 方法。在 Web 开发中，常见的 HTTP 方法有两种：GET 和 POST。

  1. GET 方法：
  • 当使用 GET 方法提交表单时，表单数据会附加在 URL 的末尾，并作为查询字符串的一部分发送到服务器。
  • GET 方法通常用于请求资源，比如请求页面、提交搜索查询等。
  • 使用 GET 方法提交的表单数据会在 URL 中可见，因此不适合传输敏感信息，且有长度限制。
  1. POST 方法：
  • 当使用 POST 方法提交表单时，表单数据会作为 HTTP 请求的正文发送到服务器。
  • POST 方法通常用于向服务器提交较大量或敏感信息的数据，比如用户注册信息、登录凭证等。
  • 使用 POST 方法提交的表单数据不会在 URL 中可见，因此更安全，并且没有长度限制。

在 HTML 表单中，通过设置 method 属性为 “post”，表示表单数据将使用 POST 方法提交给服务器。这意味着用户填写的数据会作为 HTTP 请求的正文发送到服务器，而不会出现在 URL 中，从而保护了用户数据的隐私和安全性。

action

表单的动作属性 action 定义了服务端的文件名。

action 属性会对接收到的用户输入数据进行相关的处理

例如 action=”html_form_action.php”，输入数据会传送到 html_form_action.php 文件，该页面将显示出输入的结果。

文本域

文本域通过 <input type="text">标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域

代码罗列

required表示必填

label 为了增强可读性

checked 表示默认选中=>进入就能看到的

value 属性指定了用户输入的默认值或者在提交表单时发送到服务器的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <form action="/" method="post">
        <!-- 文本输入框 -->
        <label for="name">用户名:</label>
        <input type="text" id="name" name="name" required>
    
        <br>
    
        <!-- 密码输入框 -->
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" required>
    
        <br>
    
        <!-- 单选按钮 -->
        <label>性别:</label>
        <input type="radio" id="male" name="gender" value="male" checked>
        <label for="male">男</label>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">女</label>
    
        <br>
    
        <!-- 复选框  -->
        <input type="checkbox" id="subscribe" name="subscribe" checked>
        <label for="subscribe">订阅推送信息</label>
    
        <br>
    
        <!-- 下拉列表 -->
        <label for="country">国家:</label>
        <select id="country" name="country">
            <option value="cn">CN</option>
            <option value="usa">USA</option>
            <option value="uk">UK</option>
        </select>
    
        <br>
    
        <!-- 提交按钮 -->
        <input type="submit" value="提交">
    </form>
</body>
</html>

删去lable版本

1
2
3
4
5
6
7
8
9
10
<form>
    <!-- 省略了<label>元素 -->
    用户名：<input type="text" id="username" name="username" placeholder="请输入用户名">
    <br>
    <!-- 省略了<label>元素 -->
    密码：<input type="password" id="password" name="password" placeholder="请输入密码">
    <br>
    <!-- 省略了<label>元素 -->
    <input type="submit" value="登录">
</form>