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

news2024/12/23 22:59:34

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: 这是一个留言

 

 

 

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1595134.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【板栗糖GIS】如何给微软拼音输入法加上小鹤双拼

【板栗糖GIS】如何给微软拼音输入法加上小鹤双拼

【板栗糖GIS】如何给微软拼音输入法加上小鹤双拼 用过在注册表里新建的方法&#xff0c;结果弄完没有出现小鹤双拼方案&#xff0c;想到了自己写reg表 目录 1. 新建一个txt文件 2. 把.txt的后缀名改成.reg&#xff0c;双击运行 3. 在设置中找到微软输入法-常规 1. 新建一个…
阅读更多...
做一个后台项目的架构

做一个后台项目的架构

后台架构的11个维度 架构1&#xff1a;团队协助基础工具链的选型和培训架构2&#xff1a;搭建微服务开发基础设施架构3&#xff1a;选择合适的RPC框架架构4&#xff1a;选择和搭建高可用的注册中心架构5&#xff1a;选择和搭建高可用的配置中心架构6&#xff1a;选择和搭建高性…
阅读更多...
Towards IP Geolocation Using Delay and TopologyMeasurements（TBG）（2006年）

Towards IP Geolocation Using Delay and TopologyMeasurements（TBG）（2006年）

下载地址：Towards IP geolocation using delay and topology measurements | Proceedings of the 6th ACM SIGCOMM conference on Internet measurement 被引次数：492 Katz-Bassett E, John J P, Krishnamurthy A, et al. Towards IP geolocation using delay and topology …
阅读更多...
【GD32】AD9833模块 DDS模块 提供测试程序 正弦波/方波/三角波信号发生器

【GD32】AD9833模块 DDS模块 提供测试程序 正弦波/方波/三角波信号发生器

2.45 AD9833 DDS模块 2.45.1 模块来源 采购链接&#xff1a; AD9833模块 DDS模块 提供测试程序 正弦波/方波/三角波信号发生器 资料下载&#xff1a; https://pan.baidu.com/s/1JZ0ga4uTyXUq5u-Or9BVlg?pwdGOOD 提取码&#xff1a;GOOD 2.45.2 规格参数 工作电压&#xff1…
阅读更多...
（七）PostgreSQL的用户管理

（七）PostgreSQL的用户管理

PostgreSQL的用户管理 1 创建用户&#xff08;角色&#xff09; CREATE USER现在是CREATE ROLE的别名。唯一的区别是&#xff0c;当命令的拼写为CREATE USER时&#xff0c;默认情况下会使用LOGIN&#xff0c;而当命令拼写为CREATE ROLE时会使用NOLOGIN。 官方文档&#xff1a…
阅读更多...
MyBatis-Spring整合

MyBatis-Spring整合

引入Spring之前需要了解mybatis-spring包中的一些重要类&#xff1b; http://www.mybatis.org/spring/zh/index.html 什么是 MyBatis-Spring&#xff1f; MyBatis-Spring 会帮助你将 MyBatis 代码无缝地整合到 Spring 中。 知识基础 在开始使用 MyBatis-Spring 之前&#x…
阅读更多...
如何编写易于访问的技术文档 - 最佳实践与示例

如何编写易于访问的技术文档 - 最佳实践与示例

当你为项目或工具编写技术文档时&#xff0c;你会希望它易于访问。这意味着它将为全球网络上的多样化受众提供服务并可用。 网络无障碍旨在使任何人都能访问网络内容。设计师、开发人员和撰写人员有共同的无障碍最佳实践。本文将涵盖一些创建技术内容的最佳实践。 &#xff0…
阅读更多...
编曲知识19：自动化处理 发送原理 混响 延迟

编曲知识19：自动化处理 发送原理 混响 延迟

自动化处理 发送原理 混响 延迟小鹅通-专注内容付费的技术服务商https://app8epdhy0u9502.pc.xiaoe-tech.com/live_pc/l_661a68eae4b023c0a96a8b36?course_id=course_2XLKtQnQx9GrQHac7OPmHD9tqbv 自动化处理 自动化 鼠标挪动到轨道左下角打开自动化轨道 或右键轨道-左键单击…
阅读更多...
力扣 | 24. 两两交换链表中的节点

力扣 | 24. 两两交换链表中的节点

两两交换链表中的节点 给定一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后的链表。 你不能只是单纯的改变节点内部的值&#xff0c;而是需要实际的进行节点交换。 输入&#xff1a;head 1->2->3->4->5->NULL 输出&#xff1a;2->1-&g…
阅读更多...
信号反射的几个重要体现及电路设计

信号反射的几个重要体现及电路设计

本文要点&#xff1a; 1&#xff0c;介绍信号分列反射的具体表现&#xff1b; 2&#xff0c;结合具体电路分析。 信号沿传输线向前传播时&#xff0c;每时每刻都会感受到一个瞬态阻抗&#xff0c;这个阻抗可能是传输线本身的&#xff0c;也可能是中途或末端其他元件的。对于信…
阅读更多...
HashMap扩容原理(带源码分析)

HashMap扩容原理(带源码分析)

HashMap的扩容原理 1.扩容流程图 注&#xff1a;拆分链表的规则 这里拆分链表时的一个比较&#xff1a;e.hash & oldCap 0 意思是&#xff1a;某一个节点的hash值和老数组容量求&运算。如果等于0&#xff0c;当前元素在老数组中的位置就是在新数组中的位置。如果不等…
阅读更多...
numpy学习笔记（3），数组连接

numpy学习笔记（3），数组连接

6. 连接数组 6.1. 连接数组&#xff0c; 6.2. 分割数组&#xff0c; 6.3. 算术运算&#xff0c; 6.4. 广播&#xff08;重点&#xff09; 6.1 连接数组 concatenatehstackvstack 6.1.1 使用concatenate函数 沿指定轴连接多个数组&#xff0c;语法格式如下&#xff1a; num…
阅读更多...
最新版守约者二级域名分发系统

最新版守约者二级域名分发系统

主要功能 二级域名管理&#xff1a; 我们的系统提供全面的二级域名管理服务&#xff0c;让您轻松管理和配置二级域名。 域名分发&#xff1a;利用我们先进的域名分发技术&#xff0c;您可以自动化地分配和管理域名&#xff0c;确保每个用户或客户都能及时获得所需的域名资源。…
阅读更多...
串口RS485

串口RS485

1.原理 全双工&#xff1a;在同一时刻可以同时进行数据的接收和数据的发送&#xff0c;两者互不影响 半双工&#xff1a;在同一时刻只能进行数据的接收或者数据的发送&#xff0c;两者不能同时进行 差分信号幅值相同&#xff0c;相位相反&#xff0c;有更强的抗干扰能力。 干…
阅读更多...
Java实现二叉树（下）

Java实现二叉树（下）

1.前言 http://t.csdnimg.cn/lO4S7 在前文我们已经简单的讲解了二叉树的基本概念&#xff0c;本文将讲解具体的实现 2.基本功能的实现 2.1获取树中节点个数 public int size(TreeNode root){if(rootnull){return 0;}int retsize(root.left)size(root.right)1;return ret;}p…
阅读更多...
基于深度学习的花卉检测系统（含PyQt界面）

基于深度学习的花卉检测系统（含PyQt界面）

基于深度学习的花卉检测系统&#xff08;含PyQt界面&#xff09; 前言一、数据集1.1 数据集介绍1.2 数据预处理 二、模型搭建三、训练与测试3.1 模型训练3.2 模型测试 四、PyQt界面实现参考资料 前言 本项目是基于swin_transformer深度学习网络模型的花卉检测系统&#xff0c;…
阅读更多...
正确使用@RequestMapping（包含属性详解）

正确使用@RequestMapping（包含属性详解）

目录 一、基本认知二、RequestMapping的基本使用三、深入学习RequestMapping1、RequestMapping的源码2、RequestMapping的属性2.1 path2.2 method2.3 params2.4 headers2.5 consumes2.6 produces2.7 name 一、基本认知 客户端发起Http请求&#xff0c;会提供一个URL [协议://域…
阅读更多...
Unity 2D让相机跟随角色移动

Unity 2D让相机跟随角色移动

相机跟随移动 最简单的方式通过插件Cinemachine 在窗口/包管理器选择全部找到Cinemachine&#xff0c;导入。然后在游戏对象/Cinemachine创建2D Camera。此时层级中创建一个2D相机。选中人物拖入检查器Follow。此时相机跟随人物移动。 修改相机视口距离 在检查器中Lens下调正…
阅读更多...
单细胞RNA测序（scRNA-seq）构建人类参考基因组注释

单细胞RNA测序（scRNA-seq）构建人类参考基因组注释

细胞定量是scRNA-seq重要的分析步骤，主要是进行细胞与基因的定量， cell ranger将比对、质控、定量都封装了起来，使用起来也相当便捷。 单细胞RNA测序（scRNA-seq）基础知识可查看以下文章： 单细胞RNA测序（scRNA-seq）工作流程入门 单细胞RNA测序（scRNA-seq）细胞分离与…
阅读更多...
logistic分叉图

logistic分叉图

MATLAB代码 % 初始化 r_min 2.5; % 参数r的起始值 r_max 4.0; % 参数r的结束值 r_step 0.001; % 参数r的步长 r_values r_min:r_step:r_max; % 参数r的范围% 分岔图数据初始化 num_iterations 1000; % 总迭代次数 num_last_points 100; % 用于绘图的最后的这些…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023