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)是在额定环境温度中可在连续工作状态下使用的最大功率值。 此外,由于使用温度的上限是确定的,因此在高于额定环境温度的条件下使用时,需要按照以下的功率降额曲线来降低功率。额定环境温度是能够…

Java老鸟前端小白uniapp+uview开发小程序第2天

声明一下&#xff1a;该系列文章不定时更新&#xff0c;更新也没有预定顺序&#xff0c;纯粹是自己开发笔记。 今天的内容有&#xff1a; uniapp的页面路由、跳转、参数、Vuex等 1、uniapp页面 在pages文件夹下新建vue或nvue文件在pages.json配置页面属性"pages":…

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…

主机本地IP与公网IP以及虚拟机的适配器和WSL发行版的IP

在局域网内&#xff0c;如果你想要连接到同一网络中的另一台设备&#xff0c;建议使用 本地 IP 地址&#xff08;也称为局域网 IP 地址&#xff09;。这是因为本地 IP 地址是在局域网内分配给设备的&#xff0c;用于在同一网络中的设备之间进行通信。 使用本地 IP 地址的好处 …

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…

《环境学基础》一、二章扩展概念

城市基础建设 “城市人口迅速增加&#xff0c;城市规模和结构布局也迅速扩大和变化。但由于城市基础设施落后&#xff0c;跟不上城市工业和人口发展的需要&#xff0c;一些工业发达的城市和工矿区的工业企业&#xff0c;排除大量废物污染环境&#xff0c;使得‘三废’成灾………

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;《…

使用LM Studio在ZBlog基于大模型原创文章上稿进行SEO优化

在当今内容创作需求日益增长的背景下,如何高效地进行文章生成与发布,成为众多开发者关注的焦点。通过结合Python脚本与ZBlog平台,能够实现从分类与标签的自动化管理,到文章生成与发布的一整套流程。 本文详细讲解了如何进行自动化文章生成与发布的基础配置、项目搭建与实际…

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

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

【设计模式-原型】

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

sm3填充

完成下面任务&#xff08;10分&#xff09; 1. 使用 OpenSSL 生成长度为70字节的随机数&#xff0c;最后添加“你的8位学号姓名首字母”的 ASCII 码&#xff0c;得到HEX字符串S1&#xff0c;提交S1。&#xff08;4 分&#xff09; [wzyLAPTOP-PRC71A0C ~]$ openssl rand -hex…

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框架的高校消防设施管理系统开题报告 一、项目背景与意义 随着高校规模的不断扩大和校园建…