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

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.mzph.cn/news/816522.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ubuntu 安装java

在Ubuntu上安装Java通常有两种方式&#xff1a;使用包管理器安装默认仓库中的Java或者手动安装Oracle JDK。 使用APT包管理器安装&#xff1a; sudo apt update sudo apt install default-jdk 手动安装Oracle JDK&#xff1a; 首先&#xff0c;你需要从Oracle官网下载JDK的…

PromptRPA-手机上的智能代理框架

PromptRPA的设计基于一个智能代理的多代理框架&#xff0c;这些代理模拟人类的认知功能&#xff0c;专门用于解释用户意图、管理RPA生成的外部信息以及在智能手机上执行操作。传统的RPA技术能有效地自动化图形用户界面&#xff08;GUI&#xff09;上的任务&#xff0c;通过模仿…

浏览器缓存(强缓存、协商缓存)

一、浏览器缓存 这一点主要解析浏览器缓存以及缓存机制的详细过程。 与缓存相关的状态码&#xff1a; 200 ok 从浏览器下载的最新资源 200 (from memory cache) 不进行http请求&#xff0c;直接从浏览器内存中读取的资源&#xff0c;页面关闭&#xff0c;则资源释放&a…

【攻防世界】bug

垂直越权IP绕过文件上传 文件上传绕过&#xff1a; 1. mime检测 2. 大小写绕过 3. 等价替换&#xff08;php5&#xff0c;php3&#xff09; 4. 利用JavaScript执行php代码&#xff08;正常的php代码会被检测到&#xff0c;所以就用JavaScript来执行&#xff09; <script lan…

Linxu vim详解(常用命令)

目录 强烈建议全文阅读&#xff01; vim是什么&#xff1f; 命令模式 底行模式&#xff1a;shift &#xff1b; 普通用户无法sodu&#xff1f; vim配置问题&#xff1a;&#xff08;一点都不重要&#xff09; vim是什么&#xff1f; Vs 2022是一款集成开发软件 vim是一…

记录一下MySQL8版本更改密码规则

#查看当前密码策略 show variables like validate_password%;#修改密码等级为low set global validate_password.policy LOW; #注意MySQL8版本这是点&#xff0c;不是_#修改密码长度为6 set global validate_password.length 6;#查询我的数据库中user表host和user select host,…

[C++][算法基础]SPFA求负权边(Dijkstra优化)

给定一个 n 个点 m 条边的有向图&#xff0c;图中可能存在重边和自环&#xff0c; 边权可能为负数。 请你判断图中是否存在负权回路。 输入格式 第一行包含整数 n 和 m。 接下来 m 行每行包含三个整数 x,y,z&#xff0c;表示存在一条从点 x 到点 y 的有向边&#xff0c;边长…

康耐视visionpro-CogFindCircleTool操作工具详细说明

◆CogFindCircleTool]功能说明: 通过用多个卡尺找到多个点来拟合所要找的圆 ◆CogFindCircleTool操作说明: ①.打开工具栏,双击或点击鼠标拖拽添加CogFindCircleTool工具 ②.添加输入图像,右键“链接到”或以连线拖拽的方式选择相应输入源 ③预期的圆弧:设置预期圆弧的…

消除 BEV 空间中的跨模态冲突,实现 LiDAR 相机 3D 目标检测

Eliminating Cross-modal Conflicts in BEV Space for LiDAR-Camera 3D Object Detection 消除 BEV 空间中的跨模态冲突&#xff0c;实现 LiDAR 相机 3D 目标检测 摘要Introduction本文方法Single-Modal BEV Feature ExtractionSemantic-guided Flow-based AlignmentDissolved…

基于Spring Boot实现的图书个性化推荐系统

基于Spring Boot实现的图书个性化推荐系统 开发语言&#xff1a;Java语言 数据库&#xff1a;MySQL工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统实现 前台首页功能模块 学生注册 登录 图书信息 个人信息 管理员功能模块 学生管理界面图 图书分类管理界面图 图书信息管…

A17 STM32_HAL库函数 之 GPIO扩展驱动程序所有函数的介绍及使用

A1 STM32_HAL库函数 之 HAL系统驱动程序所有函数的介绍及使用 1 该驱动函数预览1.1 HAL_GPIOEx_ConfigEventout1.2 HAL_GPIOEx_EnableEventout1.3 HAL_GPIOEx_DisableEventout 该文档修改记录&#xff1a;总结 1 该驱动函数预览 序号函数名描述1HAL_GPIOEx_ConfigEventout()配…

基于R语言实现的负二项回归模型【理解与实现】-理解负二项回归模型和泊松回归模型之间的区别

前言 我们可以在R语言中使用MASS包中的glm.nb函数来拟合负二项模型&#xff0c;以及使用glm函数来拟合泊松模型。以下是一个详细的过程&#xff0c;包括模拟数据的生成、模型的拟合、结果的比较和解释。 需要的包 if (!require("MASS")) install.packages("M…

WPF中Binding的原理和应用

WPF中Binding的原理和应用 在WPF中&#xff0c;Binding机制是实现数据与界面的连接和同步的重要工具。了解Binding的原理和应用&#xff0c;对于开发人员来说是非常重要的。本文将详细介绍WPF中Binding的原理和应用&#xff0c;帮助读者更好地理解和运用这一强大的机制。 Bin…

Qt:发出一个信号,有多少相关槽函数执行?

返回连接signal的接收者的个数。 因为信号和槽都能作为信号的接收者&#xff0c;同时相同的连接能被建立很多次&#xff0c;接收者的数量和与该信号建立连接的数量相同。 当调用该函数时&#xff0c;你能使用SIGNAL()宏来传递一个特定的信号&#xff1a; if (receivers(SIGNA…

gitlab:Could not resolve host

fatal: unable to access http://xxx.git/: Could not resolve host: yyy Git-fatal: unable to access ‘https://gitlab.XX.git/‘: Could not resolve host: gitlab.XX.com.cn_drone unable to access .git/: could-CSDN博客 原因&#xff1a; 克隆的时候使用的是这里的HTT…

实现(图像、视频等)数据上云存储

实现&#xff08;图像、视频等&#xff09;数据上云存储 实现&#xff08;图像、视频等&#xff09;数据上云存储通常涉及以下几个步骤&#xff1a; 选择云存储服务商&#xff1a; 根据您的需求、预算、地域覆盖、数据安全性、服务稳定性等因素&#xff0c;选择一家合适的云存储…

QT助手翻译【QT 5.14】 -----QPushButton

目录 1 属性 2 公共职能 3 重新实现的公共功能 4 公用插槽 5 受保护的功能 6 保护方法 7 详细说明 1 属性 自动默认值&#xff1a;bool 此属性保存按钮是否为自动默认按钮 如果此属性设置为true&#xff0c;则该按钮为自动默认按钮。 在某些GUI样式中&a…

题目:有n个整数,使其前面各数顺序向后移m个位置,最后m个数变成最前面的m个数

题目&#xff1a;有n个整数&#xff0c;使其前面各数顺序向后移m个位置&#xff0c;最后m个数变成最前面的m个数 There is no nutrition in the blog content. After reading it, you will not only suffer from malnutrition, but also impotence. The blog content is all pa…

Android之启动优化

不在 Application 初始化非必要的第三方库&#xff0c;尽量在使用的时候初始化&#xff0c;例如地图平台、播放器框架等这些可以在使用的时候再初始化。 启动优化误区&#xff1a; 启动页 Activity 的窗口背景采用透明色&#xff0c;由此来掩盖启动时卡白屏时间较长的问题&am…

面试题:Spring Cloud微服务架构下的服务发现、配置中心、负载均衡等组件介绍与配置

Spring Cloud微服务架构提供了一系列标准化的组件和服务&#xff0c;以帮助开发者更好地构建和管理分布式微服务系统。以下是对Spring Cloud中服务发现、配置中心和负载均衡三个核心组件的简介以及基本配置方式&#xff1a; ### 1. 服务发现 : 组件 : Spring Cloud Netfl…