HTML---表单

文章目录

  • 前言
  • 一、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>

 


总结

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Terrain

最近工作中遇到一个需求&#xff0c;需要在地形上随机生成对应的植被&#xff0c;需要对地形就行解析。 1.对地形的贴图的解析 需要把对应坐标在Terrain Layer成分获取到 2.计算出对应坐标中Terrain Layer占比最大的成分当作当前坐标的主要成分&#xff0c;例如草地&#xff…

C# 两个日期比较大小

文章目录 C# 两个日期比较大小直接比较大小工具类DateTime.Compare C# 两个日期比较大小 直接比较大小 string ed "2023-12-13 09:27:59.000";//过去式DateTime nowDateTime DateTime.Now;DateTime expirationDate Convert.ToDateTime(ed);//质保期 长日期DateT…

python篇FastAPI_快速使用手册

一个新兴的web框架 安装fastapi pip install fastapi asgi 服务器安装 pip install "uvicor[standard]"helloworld from fastapi import FastAPI appFastAPI() app.get("/") async def root():return {"message" : "hello world"…

工业性能CCD图像处理

硬件部分 软件部分 CCD新相机的调试处理(更换相机处理,都要点执行检测来查看图像变化) 问题:新相机拍摄出现黑屏,图像拍摄不清晰,(可以点击图像,向下转动鼠标的滚轮(Mouse Wheel)放大图像) 解决办法:进入CCD的设定,选择对应的相机,调试好参数(如下图) 选择好相…

CentOS7安装MySQL8.0

一、使用Yum安装 1. 使用wget下载MySQL的rpm包 wget https://repo.mysql.com//mysql80-community-release-el7-3.noarch.rpm2. 安装下载好的rpm包 yum localinstall mysql80-community-release-el7-3.noarch.rpm 3. 安装mysql&#xff08;该步可能出现问题&#xff09; yum…

代码分支管理+DevOps策略实践

现在团队相关的一些背景&#xff1a;1、一个人维护几个系统&#xff1b;2、需求急且大小不一&#xff0c;产品经理也不会去细拆需求&#xff1b;3、敏捷成熟度几乎为0&#xff0c;没有DevOps&#xff0c;没有自动化测试&#xff1b;4、使用SVN。 将要变成&#xff1a;1、一个人…

第二百零四回 模拟对话窗口的页面

文章目录 1. 概念介绍2. 思路与方法2.1 实现思路2.2 实现方法 3. 示例代码4. 经验分享5. 内容总结 我们在上一章回中介绍了"修改组件风格的另外一种方法"相关的内容&#xff0c;本章回中将介绍" 如何做一个模拟对话框窗口的页面".闲话休提&#xff0c;让我…

C语言小游戏之三子棋(可以做期末设计作业)

哈喽大家好&#xff0c;今天为大家带来一个用C语言写的小游戏--三子棋&#xff0c;就是大家小时候用树枝和石子玩的那种游戏&#xff0c;这个小项目可以用于大家的C语言期末设计作业&#xff0c;不会很难&#xff0c;都是C语言基本的操作 下面是游戏截图&#xff1a; 完全可以…

acwing-蓝桥杯C++ AB组辅导课Day1-递归

感谢梦翔老哥的蓝桥杯C AB组辅导课~ 省一刷200题 国赛拿成绩300题 比赛考察的是各种模型的熟练度&#xff0c;可以从dfs的角度比较各个模型与当前问题的匹配程度。 常见时间复杂度&#xff0c;根据时间复杂度可以判别是否可以选用这个解题思路 写递归的时候&#xff…

11 月公链盘点:Solana 强势复苏,Blast 飞速崛起,Web3 游戏市值猛涨

作者&#xff1a;stellafootprint.network 11 月的加密市场充满了重大事件&#xff0c;从比特币 ETF 的热议到币安 40 亿美元的和解&#xff0c;均获得了极大的关注。在以太坊继续主导 TVL 和像 Arbitrum 这样的 Layer 2 成为焦点的同时&#xff0c;我们也见证了 Solana 引人注…

【vue3】处理数组方法,在数组中获取指定条件所在的数组对象等持续更新笔记~~

1、在数组中获取指定条件所在的数组对象 &#xff08;1&#xff09;filter方法获取到的是包含指定项的数组 data.checkRow res.result.filter(item > item.checked 1);打印&#xff1a; &#xff08;2&#xff09;map方法取到的是包含指定项的数组&#xff0c;如果满足…

全志V3s之应用层点灯

1、全志V3s的管脚控制简介&#xff1a; 全志V3s一共有5个端口可以作为输入输出&#xff0c;其数量如图所示&#xff1a; 端口的基地址为&#xff1a;PIO &#xff1a; 0x01c20800。其中&#xff0c;每个端口都有自己的偏移地址&#xff0c;其偏移计算公式如表所示&#xff1a…

业务代码-整合框架-存储-缓存常见错误详解一

一. java空指针和异常&#xff1a; 1.什么是空指针异常&#xff08;java.lang.NullPointException)&#xff1a; 1.1常见的空指针异常案例&#xff1a; public class WhatIsNpe {public static class User {private String name;private String[] address;public void print…

有监督学习、无监督学习、半监督学习和强化学习

有监督学习 训练数据有标签 无监督学习 数据是没有标签的 聚类的思想&#xff1a;通过计算空间中的距离来判断是否属于同一类 强化学习 和环境交互&#xff0c;从环境中学习 三者对比 半监督学习 少量有标注&#xff0c;大量无标注 三个假设 1.连续性/平滑性假设:相…

关于对RF射频方面性能要求各有不同

1.1 射频天线性能 对于一个射频设备每个公司对其合格指标要求都不一&#xff0c;有些公司注重于阻抗及电压驻波&#xff0c;有些公司注重与回波损耗及阻抗、有些只关注电压驻波。 1.2 射频的目的 其实射频天线的目的就是在不把无用的杂散放大超标准的前提下&#xff0c;把有用…

Nature 确认:大语言模型只是没有感情的「学人精」

DeepMind、EleutherAI 科学家提出&#xff0c;大模型只是在角色扮演。 ChatGPT 爆火后&#xff0c;大语言模型一跃而至&#xff0c;成为了行业与资本的宠儿。而在人们或是猎奇、或是探究地一次次对话中&#xff0c;大语言模型所表现出的过度拟人化也引起了越来越多的关注。 其实…

使用FluentAvalonia组件库快速完成Avalonia前端开发

前言 工欲善其事必先利其器,前面我们花了几篇文章介绍了Avalonia框架以及如何在Avalonia框架下面使用PrismAvalonia完成MVV模式的开发。今天我们将介绍一款重磅级的Avalonia前端组件库,里面封装了我们开发中常用的组件,这样就不用我们自己再写组件了。专注业务功能开发,提…

SpringBoot类文件具有错误的版本 61.0, 应为 55.0

4.SpringBoot入门案例 每一个从你生命中路过的人&#xff0c;都在教你成长&#xff0c;感恩的心&#xff0c;感谢一程陪伴&#xff0c;感谢曾经有你spring learn https://spring.io/projects/spring-boot#learn Getting Started Developing Your First Spring Boot Applicati…

Tcon基础知识

1、TCON&#xff0c;就是 Timing Controller 的缩写。从主芯片输出的要在 TFT 显示屏上显示的数据&#xff0c;在经过 TCON 模块后可以变换生成 Panel 可以直接利用的 DATA 信号和驱动器&#xff08;包括 source driver 和 gate driver&#xff09;的控制信号。 TV 市场上 TCO…

超声波测距HC-SR04模块的简单应用

文章目录 一、HC-SR04HC-SR04是什么&#xff1f;HC-SR04测距的原理 二、使用步骤1.硬件最远探测距离调节硬件连接 2.软件1.初始化配置代码如下&#xff08;示例&#xff09;&#xff1a;引脚初始化定时器初始化 2.引脚输入输出配置代码如下&#xff08;示例&#xff09;&#x…