首页 前端知识 HTML:Form表单控件主要标签及属性。name属性,value属性,id属性详解。表单内容的传递流程,get和post数据传递样式。表单数据传递实例

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

2024-05-10 08:05:41 前端知识 前端哥 157 826 我要收藏

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>

页面样貌

f75db360b4f64f5abf0510b24a8c855c.png

主要涉及标签及其属性

表单标签 <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: 这是一个留言

 

 

 

 

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7935.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!