HTML：Form表单控件主要标签及属性。name属性，value属性，id属性详解。表单内容的传递流程，get和post数据传递样式。表单数据传递实例

news2024/11/13 9:08:25

form表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <form action="" method="post">

        用户名：<input type="text" name="username">
        <br>
        密码：<input type="password" name="passwd">
        <br>
        性别: boy<input type="radio" name="sex" value="boy">
              girl<input type="radio" name="sex" value="girl">
              blank<input type="radio" name="sex" value="blank" checked>
        <br>
        技能：
        前端<input type="checkbox" name="skill" value="1" checked>
        后端<input type="checkbox" name="skill" value="2" >
        数据库<input type="checkbox" name="skill" value="3" checked>
        <br>
        居住地：
        <select name="city">
            <option value="shanghai">上海</option>
            <option value="anhui" selected>安徽</option>
            <option value="guangdong">广东</option>
        </select>
        上传文件：<input type="file" name="locol file">
        <br>
        留言板：<br><textarea name="message" id="" cols="30" rows="10"></textarea>
        <br>
        <input type="submit" name="submit"><input type="reset">   
        <hr>     
        <button>普通按钮</button>
        <input type="button" value="按钮">
    </form>
    
</body>
</html>

页面样貌

主要涉及标签及其属性

表单标签 <form>

action 属性：这个属性应该包含表单提交后数据需要发送到的服务器端脚本的URL。在这个例子中，它是空的，意味着表单数据将提交到当前页面的URL。
method 属性：指定表单数据的提交方式，可以是 get 或 post。get方式传参会显示在url中，post传参不会显示。

输入标签 <input>

type="text"：创建一个文本输入框，用户可以输入文本。name 属性为 username，这将是服务器接收数据时使用的键。

type="password"：创建一个密码输入框，用户输入的内容会被隐藏。name属性为 "passwd"。

type="radio"：创建单选按钮，用户只能从一组选项中选择一个。name 属性为 "sex"，表示这些单选按钮属于同一组。value`属性为 "boy"、"girl" 或 "blank"，表示选中时提交的值。checked 属性表示默认选中的选项。

type="checkbox"：创建复选框，用户可以选择多个选项。name 属性为 "skill"，表示这些复选框属于同一组。value属性为 "1"、"2" 或 "3"，表示选中时提交的值。checked属性表示默认选中的选项。

type="file"：创建一个文件上传控件，用户可以从本地计算机选择文件上传。name属性为 "locol file"，这将是服务器接收文件数据时使用的键。

选择标签 <select>

创建一个下拉选择框，用户可以从中选择一个选项。name 属性为 "city"，这将是服务器接收选择数据时使用的键。<option>标签定义了可选择的选项，selected 属性表示默认选中的选项。

文本区域标签 <textarea>

创建一个多行文本区域，用户可以输入多行文本。name属性为 "message"，这将是服务器接收文本区域数据时使用的键。cols 和 rows属性分别定义了文本区域的宽度和高度。

提交和重置按钮 <input>

type="submit"：创建一个提交按钮，点击后将表单数据发送到服务器。name 属性为 "submit"，这将是服务器接收按钮点击事件时使用的键。
type="reset"：创建一个重置按钮，点击后清除表单中的所有数据，恢复到初始状态。

普通按钮 <button> 和 <input type="button">

<button>：创建一个按钮元素，可以用作客户端脚本的触发器。在这个例子中，它是一个普通的按钮，没有 name 属性。
<input type="button"：创建一个按钮，点击后不会提交表单数据。value属性定义了按钮上显示的文本。

水平线 <hr>

创建一条水平分割线，用于分隔内容。

扩展内容[name属性;value属性;id属性]

name属性

name属性是HTML表单元素的一个关键属性，尤其是在 <input>、<textarea> 和 <select> 等元素中。当表单被提交到服务器时，name 属性的值用作请求中的参数名。服务器端脚本将使用这个名称来识别和访问用户提交的数据。

示例：
<input type="text" name="username" value="John Doe">

在这个例子中，`name="username"`表示当表单提交时，用户输入的文本将作为名为 "username" 的参数发送到服务器。

value属性

value属性定义了表单元素的初始值，即用户在开始填写表单时看到的值。对于不同类型的表单元素，value 属性的表现形式和作用也不同。

示例：
<input type="text" name="username" value="John Doe">

这里的 `value="John Doe"` 表示文本输入框的初始值将是 "John Doe"。用户可以保留这个值，也可以修改它。

id属性

id 属性是一个独特的标识符，用于在HTML文档中给元素一个唯一的标识。id 属性可以用于CSS选择器来应用样式，或者在JavaScript中用于获取和操作元素。需要注意id属性在同一个文档中必须是唯一的。

示例：
<input type="text" id="user-name" name="username">

这里的 id="user-name"为文本输入框提供了一个唯一的标识符，可以在CSS或JavaScript中使用 user-name 来引用这个特定的元素。

表单内容的传递

当用户填写完表单并点击提交按钮时，浏览器会将表单中所有具有 name 属性的元素的 value 值收集起来，并根据表单的 method 属性确定的提交方式发送给服务器。

使用get方式传递数据：

如果表单的 method 属性是 get，那么浏览器会在地址栏中构建一个URL，其中包含了所有的表单数据。数据会被编码为 key=value 的形式，并且由 & 符号分隔。例如：

http://example.com/?username=用户输入的用户名&passwd=用户输入的密码&sex=用户选择的性别&skill=1&skill=2&skill=3&city=用户选择的居住地&locol file=用户上传的文件名&message=用户输入的留言

使用post方式传递数据

如果表单的 method 属性是 post（在您的代码中是这种情况），那么浏览器会创建一个HTTP请求，并将所有的表单数据放在请求体中发送到服务器。这些数据不会显示在URL中，而是在HTTP请求的消息体中。数据通常以 application/x-www-form-urlencoded 格式发送，但如果您使用了 enctype="multipart/form-data" 属性，那么数据将以 multipart/form-data 格式发送，这通常用于文件上传。

服务器端脚本（如PHP、Python、Node.js等）会接收这些数据，并根据 `name` 属性的值来访问和处理这些数据。例如，在PHP中，可以通过 `$_GET['username']` 或 `$_POST['username']` 来获取用户提交的用户名。

示例数据提交的样子

假设用户填写了以下信息并提交了表单：

用户名（username）: JohnDoe
密码（passwd）: password123
性别（sex）: girl
技能（skill）: 前端（值为1），数据库（值为3）
居住地（city）: 广东（值为guangdong）
文件上传（locol file）: file.pdf
留言板（message）: 这是一个留言。

如果是GET方法，URL可能会是这样的：

http://example.com/?username=JohnDoe&passwd=password123&sex=girl&skill=1&skill=3&city=guangdong&locol file=file.pdf&message=这是一个留言

如果是POST方法，服务器端脚本可能会接收到以下数据：

username: JohnDoe

passwd: password123

sex: girl

skill: 1 (前端) skill: 3 (数据库)

city: guangdong

locol file: file.pdf (文件内容会作为二进制数据发送)

message: 这是一个留言