HTML---表单

news2024/12/23 10:14:31

文章目录

  • 前言
  • 一、pandas是什么?
  • 二、使用步骤
    • 1.引入库
    • 2.读入数据
  • 总结

一.表单概念

  HTML表单是网页上用于收集用户输入信息的一种元素。它由一系列输入字段(input)、选择字段(select)、文本区域(textarea)以及提交按钮(submit)等组成。

表单的目的是收集用户的数据并将其发送到服务器进行处理。用户可以在表单中输入文本、选择选项、上传文件等。然后,当用户点击提交按钮时,表单的数据会被发送到定义的处理程序或服务器端脚本进行处理。

语法:

method常用值
GET向服务器发送数据请求,适合用于获取数据
POST向服务器发送数据请求,适合用于发送数据

二.表单中的标签 

  •  框图标签

<input />:

 在HTML中,表单是用来收集用户输入的一种元素。表单中的input元素被用来定义输入字段,用户可以在这些字段中输入文本、数字、日期等不同类型的数据。

input 常用属性
type

定义框图类型,常见的值有text(文本),password(密码),submit(登录)

reset(重置) radio(单选) checkbox(多选) button(普通按钮)

image(图片)

name定义当前框图的名字,服务器将用户在框图中输入的信息保存到对应名字的框图中。
value保存用户通过该框图输入的信息,该值自动生成。
size设置框图长度
length设置框图支持输入信息的自大长度
checked默认选中该框图
<body>
		<!--声明表单并添加属性-->
		<form method="get" action="welcome.html">
		<p><!--input:声明文本框并添加属性-->
			请输入账号:<input type="text" name="UserCode"  />
		</p>	
		<p><!--密码框-->
			请输入密码:<input type="password" name="UserPwd" />
		</p>
		<p><!--登录/重置按钮-->
			<input type="submit" value="登录" />
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="reset" value="重置" />
            <!--图片按钮-->
			<input type="image" src="HTML.Png" width="100px" height="100px" />
		</p>
		<p><!--单选按钮--><!--一个name对应一个value-->
			请选择性别:
			<input type="radio" name="UserSex" value="男" checked /> 男
			<input type="radio" name="UserSex" value="女" /> 女
		</p>
		<p><!--多选按钮--><!--一个name对应多个value-->
			请输入爱好:
			<input type="checkbox" name="UserHobby" value="唱" />唱
			<input type="checkbox" name="UserHobby" value="跳" />跳
			<input type="checkbox" name="UserHobby" value="rap" />rap
			<input type="checkbox" name="UserHobby" value="篮球" />篮球
			<input type="checkbox" name="UserHobby" value="看坤" />看坤
		</p>
</body>

 

  • 下拉菜单标签

语法 <select>...</select>:

HTML中的下拉菜单可以使用<select>元素来创建,内部使用<option>元素表示每个选项。下面是一个基本的例子:

<option>元素常用属性
selected指定该选项默认被选中。
disabled指定该选项不可用,无法选择
label为选项提供一个标签,使其更易于理解
hidden指定该选项不会显示在下拉菜单中,可以在后台使用。
value:用于在提交表单时传递选中的选项值
<p><!--下拉菜单-->
			请选择地址:
			<select name="UserAddSheng">
				<option value="陕西">陕西</option>
				<option value="山西">山西</option>
				<option value="江苏">江苏</option>
				<option value="安徽">安徽</option>
			</select>&nbsp;&nbsp;省&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<select name="UserAdd市">
				<option value="南京">南京</option>
				<option value="无锡" selected>无锡</option>
				<option value="苏州">苏州</option>
				<option value="常州">常州</option>
			</select>&nbsp;&nbsp;市
</p>

 

 多行文本域

在HTML中,可以使用textarea标签来创建多行文本域。

注意:rows和cols属性分别用于指定文本域的行数和列数。根据需要调整这两个属性的值。

<p><!--多行文本域-->
			请输入简介:、
			<textarea name="UserMassage" rows="10" cols="10"></textarea>
</p>

 


总结

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

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

相关文章

CV计算机视觉每日开源代码Paper with code速览-2023.12.8

点击计算机视觉&#xff0c;关注更多CV干货 论文已打包&#xff0c;点击进入—>下载界面 点击加入—>CV计算机视觉交流群 1.【显著目标检测】Texture-Semantic Collaboration Network for ORSI Salient Object Detection 论文地址&#xff1a;https://arxiv.org//pdf/…

深入理解Java虚拟机---Java内存模型

JMM Java内存模型主内存和工作内存volatile Java内存模型 Java内存模型是Java虚拟机规范中试图定义一种Java内存模型(JMM)来屏蔽掉各种硬件和操作系统的内存访问差异&#xff0c;以实现让Java程序在各种平台上都能达到一致的内存访问效果。可以理解为JMM定义一套在多线程读写共…

leetcode 34. 在排序数组中查找元素的第一个和最后一个位置(优质解法)

代码&#xff1a; class Solution {public int[] searchRange(int[] nums, int target) {int[] resultnew int[2];result[0]result[1]-1;//排除特殊情况if(numsnull||nums.length0){return result;}//查找左边界int left0;int rightnums.length-1;while (left<right){int m…

独立完成软件的功能的测试(4)

独立完成软件的功能的测试&#xff08;4&#xff09; &#xff08;12.14&#xff09;&#xff08;功能测试>头条项目实战&#xff09; 项目总体概述 项目背景和定位&#xff1a;一款汇聚科技咨询&#xff0c;技术文章和问答交流的用户移动终端产品&#xff0c;用户可以通过…

【玩转TableAgent数据智能分析】TableAgent全功能详解及多领域数据分析实践(下)数据分析过程及总结展望

6 TableAgent的数据分析过程解析 TableAgent的整个分析过程包括以下步骤&#xff0c;形成一个有机结构&#xff0c;让我们理清其工作原理。 6.1 Data Graph阶段 TableAgent首先绘制数据图&#xff0c;以解决问题。这个图形表示了问题的分解和细化&#xff0c;将大问题分解成…

在WPF窗口中增加水印效果

** 原理&#xff1a; ** 以Canvas作为水印显示载体&#xff0c;在Canvas中创建若干个TextBlock控件用来显示水印文案&#xff0c;如下图所示 然后以每一个TextBlock的左上角为中心旋转-30&#xff0c;最终效果会是如图红线所示&#xff1a; 为了达到第一行旋转后刚好与窗口…

深算院YashanDB与长亮科技联合,推出国产数据库金融核心解决方案

近期&#xff0c;深圳计算科学研究院&#xff08;简称“深算院”&#xff09;携手深圳市长亮科技股份有限公司&#xff08;简称“长亮科技”&#xff09;重磅推出基于崖山数据库YashanDB的金融核心解决方案&#xff0c;为推动金融机构实现技术自主可控与数字化转型全面赋能。 …

C# 从代码入门 Mysql 数据库事务

在业务开发中&#xff0c;使用数据库事务是必不可少的。而开发中往往会使用各种 ORM 执行数据库操作&#xff0c;简化代码复杂度&#xff0c;不过&#xff0c;由于各种 ORM 的封装特性&#xff0c;开发者的使用方式也不一样&#xff0c;开发者想要了解 ORM 对事务做了什么处理是…

Facebook的DINO,无监督模型,可用于分类和分割任务

Facebook的DINO 参考&#xff1a;https://blog.csdn.net/hello_dear_you/article/details/133695006 代码&#xff1a;https://github.com/facebookresearch/dino/tree/main DINO本质上是一种自监督学习方法&#xff0c;其核心思想是通过在大规模的无标签数据集上进行对比学习&…

华为云之轻松搭建 Nginx 静态网站

华为云之轻松搭建 Nginx 静态网站 一、本次实践介绍1. 本次实践目的2. 本次实践环境 二、ECS弹性云服务器介绍三、准备实践环境1. 预置环境2. 查看ECS服务器的账号密码信息3. 登录华为云4. 远程登录ECS服务器 四、安装配置 Nginx1. 安装nginx2. 启动nginx3. 浏览器中访问nginx服…

【Spark精讲】Spark内存管理

目录 前言 Java内存管理 Java运行时数据区 Java堆 垃圾回收机制 Executor内存管理 内存类型 堆内内存 堆外内存 内存管理模式 静态内存管理 统一内存管理 ​编辑 执行内存管理 多任务间内存分配 Shuffle 的内存占用 MemoryOverHead详解 任务内存调节 错误类型…

HarmonyOS给应用添加弹窗

给您的应用添加弹窗 概述 在我们日常使用应用的时候&#xff0c;可能会进行一些敏感的操作&#xff0c;比如删除联系人&#xff0c;这时候我们给应用添加弹窗来提示用户是否需要执行该操作&#xff0c;如下图所示&#xff1a; 弹窗是一种模态窗口&#xff0c;通常用来展示用户…

gRPC-Gateway:高效转换 RESTful 接口 | 开源日报 No.105

grpc-ecosystem/grpc-gateway Stars: 16.4k License: BSD-3-Clause gRPC-Gateway 是一个遵循 gRPC HTTP 规范的 gRPC 到 JSON 代理生成器。它是 Google 协议缓冲编译器 protoc 的插件&#xff0c;可以读取 protobuf 服务定义并生成反向代理服务器&#xff0c;将 RESTful HTTP…

有没有手机电脑同步的工作时间管理软件?

越来越多的职场人士感到每天的工作任务是比较多的&#xff0c;而工作时间又是有限的&#xff0c;所以经常时间不够用。因此&#xff0c;对于上班族来说&#xff0c;高效的时间管理是提高工作效率、按时完成任务的关键。为了满足这一需求&#xff0c;很多网友都在寻找一款既能在…

HarmonyOS给应用添加视频播放功能

Video组件的使用 概述 在手机、平板或是智慧屏这些终端设备上&#xff0c;媒体功能可以算作是我们最常用的场景之一。无论是实现音频的播放、录制、采集&#xff0c;还是视频的播放、切换、循环&#xff0c;亦或是相机的预览、拍照等功能&#xff0c;媒体组件都是必不可少的。…

【数学建模美赛M奖速成系列】报名流程与论文的基本格式

数学建模美赛M奖速成系列 写在前面报名方式1.官网直接报名2.赛氪软件辅助报名 论文的基本格式摘要模型建立模型求解结果分析与检验模型评价 竞赛的基本注意事项1. 选题后查找资料2. 写作能力和编程能力 历年优秀论文标题与摘要简明扼要善用图表 最后 写在前面 最近&#xff0c…

Stable Video Diffusion: Scaling Latent Video Diffusion Models to Large Datasets

Stable video diffusion&#xff1a;将潜在视频扩散模型扩展到大型数据集 可以做到&#xff1a;文本-视频的生成、&#xff08;文本-&#xff09;图像-视频的生成、通过图像-视频微调进行多视图合成 摘要 我们提出了Stable video diffusion——一种用于高分辨率、最先进的文…

代码随想录第三十一天(一刷C语言)|无重叠区间划分字母区间合并区间

创作目的&#xff1a;为了方便自己后续复习重点&#xff0c;以及养成写博客的习惯。 一、无重叠区间 思路&#xff1a;参考carl文档 按照右边界排序&#xff0c;从左向右记录非交叉区间的个数。最后用区间总数减去非交叉区间的个数就是需要移除的区间个数了。 ledcode题目&a…

跨境电商如何利用跨境客服软件提升销售额

随着全球化的推进&#xff0c;跨境电商成为了许多企业拓展市场的重要途径。然而&#xff0c;跨境电商面临着语言、文化、时差等多种挑战&#xff0c;为了提供更好的客户服务并提升销售额&#xff0c;跨境电商需要利用跨境客服软件。本文将探讨跨境电商如何利用跨境客服软件来提…

VLAN基本原理

目录 一、VLAN概念及优势 &#xff08;一&#xff09;基本理念 &#xff08;二&#xff09;VLAN的特点 二、VLAN ID 种类、范围及用途 &#xff08;一&#xff09;静态VLAN &#xff08;二&#xff09;动态VLAN &#xff08;三&#xff09;VLAN三种端口类型 &#xff0…