web前端-html:简单创建表格表单相结合的网页

效果:

<body><form action="这里如果为空表单提交后不会有任何操作"method="get"<label for="edit">用户名</label><input type="text" name="用户名" id="最好不要空,id属性唯一" value=""> <br /><label for="edit">密&nbsp;&nbsp;&nbsp;&nbsp;码</label><input type="password"  > <br /><label for="hob">性别</label><input type="radio" name="性别" value="女" checked/>女<input type="radio" name="性别" value="男" >男<br /><label for="hob">爱好</label><input type="checkbox" name="爱好" value="写作" >写作<input type="checkbox" name="爱好" value="听音乐" >听音乐<input type="checkbox" name="爱好" value="体育">体育<br /><select name="省份" multiple><option >陕西</option><option >广西</option><option >山西</option></select><label for="introduction">自我介绍</label><textarea name="自我介绍" id="introduction" cols="30" rows="10" ></textarea><input type="submit" value="提交"><input type="reset" value="重置"></form>
</body>

知识点分析:

所有的name属性都用来定义一个名称,这个名称用于在表单提交时标识数据。

<form>标签用来创建一个表单

action属性用来指定表单数据提交到的服务器端脚本的URL,在实际开发的时候action应该设置具体的URL

method属性决定使用哪种请求方式(get/post),

get

             1.在前端的表单中,get上传数据量是受浏览器限制 

              2.会将表单的所有数据频道url中,所以安全性较差

              3.get会在浏览器的历史记录中保存

 post

         1.数据量无限制 

           2.post使用requestbody,他是隐蔽的,所以安全性较强

           3.post不会讲关键表单信息保存在历史记录中

           

 <textarea>标签的id属性值应该是唯一的,并且与<label>标签的for属性相匹配

<label>:提高表单课访问性,当用户点击标签时,对应的表单控件会获得焦点---for:指定该标签所关联的表单控件的id

<input type给出一个文本框并定义输入控件的类型,value是定义输入控件的初始值

 <select >:定义了一个下拉选择框,允许用户从多个选项中选择一个或多个值。---multiple:当这个属性存在时,允许用户从下拉列表中选择多个选项

<option >:定义关联元素中的一个选项。

<input type="submit" value="提交">定义了一个按钮,点击后将表单数据提交到在<form>标签的action属性中指定的URL
 <input type="reset" value="重置">将表单中的所有输入控件重置为它们的初始值。

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

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

相关文章

【论文学习与撰写】论文里配图的题注、多张图片同列排版格式等

目录 1、插入题注 2、多张图排版 1、插入题注 word--引用--插入题注&#xff0c;就会出来这个 直接点确定的话&#xff0c;是会出来图1/图2/图3.。。。之类的 那是因为标签设置的是 图 如图新建标签为&#xff1a; 图 1. 那么&#xff0c;插入题注之后&#xff0c;就会…

【分立元件】贴片电阻的额定功率

贴片电阻器通过电流后将会发热。而贴片电阻的额定功率(Power Rating)是在额定环境温度中可在连续工作状态下使用的最大功率值。 此外,由于使用温度的上限是确定的,因此在高于额定环境温度的条件下使用时,需要按照以下的功率降额曲线来降低功率。额定环境温度是能够…

ionic Capacitor 生成 Android 应用

官方文档 https://ionic.nodejs.cn/developing/android/ https://capacitorjs.com/docs/getting-started 1、创建新的 Capacitor 应用程序 空目录下面 npm init capacitor/app2、install Capacitor npm install npm start在这里插入图片描述 3、生成dist目录 npm run buil…

SpringBoot篇(缓存层)

目录 前言 缓存是什么&#xff1f; 一、SpringBoot内置缓存解决方案 1. 简介 2. 手机验证码案例 二、SpringBoot整合Ehcache缓存 1. 简介 2. 总结 三、SpringBoot整合Redis缓存 1. 简介 2. 总结 四、SpringBoot整合Memcached缓存 1. 简介 2. 安装 3. 变更缓存为M…

5G 现网信令参数学习(1) - MIB

MIB消息中的参数 systemFrameNumber 000101B, subCarrierSpacingCommon scs30or120, ssb-SubcarrierOffset 6, dmrs-TypeA-Position pos2, pdcch-ConfigSIB1 { controlResourceSetZero 10, searchSpaceZero 4 }, cellBarred notBarred, intraFreqReselection allowed, sp…

1024程序员节特惠题解!

#题外话&#xff1a;/ #先看题目 题目传送门https://www.luogu.com.cn/problem/P1035#思路&#xff1a;直接模拟&#xff08;Shift1&#xff09; #代码&#xff1a; #include <bits/stdc.h> using namespace std; int main(){double cnt0,k,sum0,x;cin>>k;while…

2.1 > Shell 是什么、如何更熟练的使用 Bash Shell

Shell 基础知识 Shell是计算机操作系统中的一个命令行解释器&#xff0c;由C语言编写&#xff0c;用于用户与操作系统之间进行交互。用户可以通过Shell输入命令&#xff0c;操作系统接收到这些命令后执行相应的操作。Shell一般还提供了编程语言的基本功能&#xff0c;允许用户…

【Mac 上将 MOV 格式转换为 MP4 格式的简易指南】

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

R语言笔记(四):函数

文章目录 一、Function basics1、Creating your own function2、Function structure3、Using your created function4、Multiple inputs5、Default inputs 二、Return values and side effects1、Returning more than one thing2、Side effectsExample of side effect: plot 三…

从零开始学python必看,最强“Python编程三剑客(pdf)”

目录 三剑客PDF传送门&#xff1a;三剑客 第一本&#xff1a;《Python编程&#xff1a;从入门到实践》 1.1《Python编程&#xff1a;从入门到实践》第一部分&#xff1a;基础知识 1.2《Python编程&#xff1a;从入门到实践》第二部分&#xff1a;项目 第二本&#xff1a;《…

Metasploit渗透测试之模块学习与开发

# 概述 Metasploit 框架采用模块化架构&#xff0c;即所有漏洞利用、有效载荷、编码器等都以模块形式存在。模块化架构使框架功能的扩展更加容易。任何程序员都可以开发自己的模块&#xff0c;并将其轻松移植到框架中。 # 1、使用辅助模块 在之前的"信息收集和扫描 &qu…

【设计模式-原型】

**原型模式&#xff08;Prototype Pattern&#xff09;**是一种创建型设计模式&#xff0c;旨在通过复制现有对象的方式来创建新对象&#xff0c;而不是通过实例化类来创建对象。该模式允许对象通过克隆&#xff08;复制&#xff09;来创建新的实例&#xff0c;因此避免了重新创…

QT-使用QSS美化UI界面

一、QSS简介&#xff1a; Qt Style Sheet&#xff1a;Qt样式表&#xff0c;用来自定义控件外观的一种机制&#xff0c;可以把他类比成CSS&#xff08;CSS主要功能与最终目的都是能使界面的表现与界面的元素分离&#xff09;。QSS机制使应用程序也能像web界面那样随意地改变外观…

构建后端为etcd的CoreDNS的容器集群(二)、下载最新的etcd容器镜像

在尝试获取etcd的容器的最新版本镜像时&#xff0c;使用latest作为tag取到的并非最新版本&#xff0c;本文尝试用实际最新版本的版本号进行pull&#xff0c;从而取到想的最新版etcd容器镜像。 一、用latest作为tag尝试下载最新etcd的镜像 1、下载镜像 [rootlocalhost opt]# …

基于vue框架的的高校消防设施管理系统06y99(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。

系统程序文件列表 项目功能&#xff1a;设备分类,设备信息,维修人员,报修信息,维修进度,院系,消防知识,培训记录,培训信息,备件信息,备件申请,派发信息,采购信息 开题报告内容 基于Vue框架的高校消防设施管理系统开题报告 一、项目背景与意义 随着高校规模的不断扩大和校园建…

OpenCV和HALCON

OpenCV和HALCON是两种广泛用于图像处理和计算机视觉的开发库&#xff0c;它们各有优缺点&#xff0c;适合不同的应用场景。以下是两者的比较&#xff1a; 1. 开发背景与定位 OpenCV (Open Source Computer Vision Library)&#xff1a; 开源库&#xff0c;最初由Intel开发&…

【EmbeddedGUI】PFB设计说明

PFB设计说明 背景介绍 一般来说&#xff0c;要实现屏幕显示&#xff0c;就是向特定像素点写入颜色值&#xff0c;最简单的办法就是直接通过SPI接口&#xff0c;向显示器芯片的特定缓存地址&#xff0c;写入像素点。一般来说&#xff0c;显示器芯片会提供2个基本操作API&#…

qt QNetworkProxy详解

一、概述 QNetworkProxy通过设置代理类型、主机、端口和认证信息&#xff0c;可以使应用程序的所有网络请求通过代理服务器进行。它支持为Qt网络类&#xff08;如QAbstractSocket、QTcpSocket、QUdpSocket、QTcpServer、QNetworkAccessManager等&#xff09;配置网络层代理支持…

数据仓库基础概念

数据仓库 概念 数据仓库&#xff08;Data Warehouse, DW&#xff09;是一个面向主题的、集成的、相对稳定的、反映历史变化的数据集合。它是为满足企业决策分析需求而设计的。 面向主题&#xff1a;数据仓库围绕特定的主题组织数据&#xff0c;例如“销售”或“人力资源”&am…

学成在线实战

#1024程序员节&#xff5c;征文# 一、Bug修改 在实战之前&#xff0c;老师留了一个bug&#xff0c;这个bug出现的原因是因为在查询课程计划时&#xff0c;使用的是Inner join查询&#xff0c;所以当章节下面没有小节的时候&#xff0c;是查不出来数据的&#xff0c;只需要将其…