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>

 


总结

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

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

相关文章

缓存雪崩问题与应对策略

目录 1. 缓存雪崩的原因 1.1 缓存同时失效 1.2 缓存层无法应对高并发 1.3 缓存和后端系统之间存在紧密关联 2. 缓存雪崩的影响 2.1 系统性能下降 2.2 数据库压力激增 2.3 用户请求失败率增加 3. 应对策略 3.1 多级缓存 3.2 限流与降级 3.3 异步缓存更新 3.4 并发控…

​Linux Ubuntu环境下安装配置Docker 和Docker、compose、mysql、中文版portainer

​Linux Ubuntu环境下安装配置Docker 和Docker、compose、mysql、中文版portainer 这篇文章探讨了在Linux Ubuntu环境下安装和配置Docker及其相关工具的过程。首先介绍了Docker的基本概念&#xff0c;然后详细讲解了在Ubuntu系统上的安装步骤。随后&#xff0c;文章涵盖了Dock…

智能优化算法应用:基于旗鱼算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于旗鱼算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于旗鱼算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.旗鱼算法4.实验参数设定5.算法结果6.参考文献7.MA…

yaml 文件格式

yaml文件&#xff1a;是一种标记语言&#xff0c;以竖列形式展示序列化的时间格式&#xff0c;可读性高 类似于json格式。语法简单。 yaml通过缩进来表示数据结构&#xff0c;连续的项目用-减号来表示。 yaml文件使用的注意事项&#xff1a; 1&#xff0c;大小写敏感 2&am…

Apache Web 服务器监控工具

将Apache Web 服务器监控纳入 IT 基础架构管理策略有助于先发制人地识别性能瓶颈&#xff0c;这种主动监控方法提供必要的数据&#xff0c;以确保 Web 服务器能够胜任任务&#xff0c;并在需要时进行优化。保证客户获得流畅、无忧的用户体验可以大大有助于巩固他们对组织的信任…

SSL证书过期怎么更新?

一、概述 SSL证书是用于加密网站和客户端之间通信的一种数字证书&#xff0c;可以确保数据传输的安全性和保密性。然而&#xff0c;SSL证书是有有效期的&#xff0c;一旦过期就需要及时更新。本文将介绍如何更新SSL证书&#xff0c;以确保网站的安全性和正常运行。 二、SSL证…

【字符串】ABC324E

退役啦&#xff0c;接下来的博客全是图一乐啦 E - Joint Two Strings 题意 思路 统计两个指针的方案数一定是枚举一个&#xff0c;统计另一个 然后因为拼起来之后要包含 t 这个字符串&#xff0c;隐隐约约会感觉到和前缀后缀子序列有关 考虑预处理每个 s[i] 的最长公共前…

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…

pycharm中如何去除波浪线的设置

pycharm中&#xff0c;碰到恼人的红绿波浪线&#xff0c;打开’file-settings’&#xff0c;然后&#xff0c;参照如图设置&#xff0c;去除’effects’选项&#xff1a;

【Linux服务器Java环境搭建】09 在CentOS系统中安装和配置clickhouse数据库

一、安装环境 CentOS7 二、官网安装参考文档 官网安装参考文档 不同系统请参考如下建议 从RPM软件包安装&#xff1a; 建议在CentOS、RedHat和所有其他基于rpm的Linux发行版上使用官方预编译的rpm软件包从DEB软件包安装&#xff1a; 建议在Debian或Ubuntu上使用官方预编译…

C语言 联合体验证 主机字节序 +枚举

联合体应用&#xff1a;验证当前主机的大小端&#xff08;字节序&#xff09; //验证当前主机的大小端 #include <stdio.h>union MyData {unsigned int data;struct{unsigned char byte0;unsigned char byte1;unsigned char byte2;unsigned char byte3;}byte; };int main…

详细说说vuex

Vuex 是什么 Vuex有几个属性及作用注意事项vuex 使用举例Vuex3和Vuex4有哪些区别 创建 Store 的方式在组件中使用 Store辅助函数的用法响应式的改进Vuex4 支持多例模式 Vuex 是什么 Vuex是一个专门为Vue.js应用设计的状态管理构架&#xff0c;它统一管理和维护各个Vue组件的可…

【深度学习】Pytorch 系列教程(一):PyTorch数据结构:1、Tensor(张量)及其维度(Dimensions)、数据类型(Data Types)

文章目录 一、前言二、实验环境三、PyTorch数据结构0、分类1、Tensor&#xff08;张量&#xff09;1. 维度&#xff08;Dimensions&#xff09;0维&#xff08;标量&#xff09;1维&#xff08;向量&#xff09;2维&#xff08;矩阵&#xff09;3维张量 2. 数据类型&#xff08…

报告称超 5 成职场人员有兼职 ,有人因做副业被降薪或被辞,有哪些信息值得关注?你有下班兼职的打算吗?

在职程序员分享身边几个做兼职的案例&#xff1a; 前领导从21年开始做小红书账号&#xff0c;粉丝30w&#xff0c;月入5w左右&#xff1b; 隔壁工位的哥们每隔几个月都会在平台接点小单&#xff0c;今年赚了小几万&#xff1b; 室友每天开车上班顺便接顺风车单子&#xff0c;一…

推荐一款好用的包含表格识别的OCR网站

在当今数字化的时代&#xff0c;文字和表格识别已经成为了许多行业的关键技术。无论是处理大量的纸质文档&#xff0c;还是从网络上收集数据&#xff0c;OCR&#xff08;光学字符识别&#xff09;技术都扮演着重要的角色。然而&#xff0c;对于许多用户来说&#xff0c;OCR软件…

螺旋矩阵算法(leetcode第885题)

题目描述&#xff1a; 在 rows x cols 的网格上&#xff0c;你从单元格 (rStart, cStart) 面朝东面开始。网格的西北角位于第一行第一列&#xff0c;网格的东南角位于最后一行最后一列。你需要以顺时针按螺旋状行走&#xff0c;访问此网格中的每个位置。每当移动到网格的边界之…

GradNorm理解

主要参考这一篇&#xff0c;GradNorm&#xff1a;Gradient Normalization for Adaptive Loss Balancing in Deep Multitask Networks&#xff0c;梯度归一化_grad norm-CSDN博客 14:20-15:30 提前需要理解的概念 损失函数&#xff0c;衡量ypred与ytruth的差距。 Grad Loss定…

盲盒小程序如何盈利?创业新模式

当前&#xff0c;盲盒的影响力越来越大&#xff0c;深受年轻人的热爱&#xff0c;受众群体逐渐增加&#xff0c;盲盒的市场规模不断扩大。 在当下社交媒体时代&#xff0c;盲盒也转到了互联网上&#xff0c;根据网络的传播&#xff0c;盲盒也迎来了新一轮的发展&#xff0c;“…

在服务器上配置jupyter notebook便于本地访问

文章目录 需求配置1. 安装jupyter2. 生成配置文件3. 设置登录密码并生成秘钥a. 打开服务器的终端b. 设置密码 4. 修改配置文件a. 进入配置文件所在的文件夹b. 编辑配置文件jupyter_notebook_config.pyc. 保存文件 5. 在服务器上生成jupyter访问地址 关注公众号&#xff1a;『 …

C# WinForm 跨线程访问控件

写在前面 在WinForm开发中&#xff0c;经常会碰到主线程代码运行过程中需要刷新窗体控件的情况&#xff0c;如果直接在其他线程中去操作窗体控件&#xff0c;这时会抛出线程间操作无效的异常信息&#xff0c;因为窗体控件是由主线程创建的&#xff0c;C#强制要求代码必须是线程…