HTML之form表单学习

HTML之form表单学习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        form 
          action 定义数据的提交地址
            1.url
            2.相对路径
            3.绝对路径
          method 定义数据的提交方式
            GET
                1.参数以键值对的方式放在url后提交  url?key=value&key=value&....
                2.数据直接暴露在地址栏中,相对不安全
                3.地址栏长度有限制,所以提交的数据量不大(与post相比)
                4.地址栏中只能是字符2-4k
            POST
                1.参数默认不放到url后面
                2.数据不会直接暴露在地址栏中,相对安全(F12控制台 网络 负载可见)
                3.数据是单独打包通过请求体发送,提交的数据量比较大
                4.请求体中可以是字符、字节(1010..)数据,即可以提交文件

            相较于POST,GET的效率比较高,但是提高的时间人的感受是感受不到的
            后续还有PUT、DELETE请求方式

          表单项标签 
          一定要定义name属性,该属性用于明确提交时的参数名,即key
          还需要定义value属性,该属性用于明确提交时的实参,即value
            input
                type 输入信息的表单项类型
                    text 普通文本框
                    password 密码框
                    submit 提交按钮
                    reset 重置按钮
                    radio 单选框 多个单选框使用相同的name属性值,就会有互斥效果
                    checkbox 复选框 多个选项选多个
                    hidden 隐藏域,不显示在页面上,提交时会携带;用于提交一些特定数据,但是考虑安全问题或是用户操作问题,不希望数据发生改变
            textarea 文本域 多行文本框

            select 下拉框
                option:选项
            
            file 上传文件
    -->
    post
    <form action="Wecome.html" method="post"><!--默认get-->
        <!--添加表单项标签 用户输入信息的标签-->
        用户名:
        <input type="text" name="username" />
        <br>
        密码:
        <input type="password" name="password"/>
        <br>
        性别:
        <input type="radio" name="gender" value="1" checked = "checked"><!--属性名等于属性值时,可以只写属性名 checked -->
        <input type="radio" name="gender" value="0"><br>
        爱好:
        <input type="checkbox" name="hobby" value="1">1
        <input type="checkbox"name="hobby" value="2">2
        <input type="checkbox"name="hobby" value="3">3
        <input type="checkbox"name="hobby" value="4">4
        <br>
        <!--用于提交一些特定数据,但是考虑安全问题或是用户操作问题,不希望数据发生改变
               readonly 只读 提交时 携带
               disabled 不可用 提交时 不携带
        -->
        <input type="hidden" name="hidden" value="hidden"/>
        <input type="text" name="hidden1" value="hidden1" readonly/> <!--readonly 表单提交的时候会携带-->
        <input type="text" name="hidden2" value="hidden2" disabled/> <!--disabled 表单提交的时候不会携带-->
        <br>
        个人简介:
        <textarea name="intro" style="width: 300px;height: 100px;">
        </textarea>
        <br>
        籍贯:
        <select>
            <option value="1">北京</option><!--类似于掩码形式,实际提交value值,若没有value则显示值即为value值-->
            <option value="2">天津</option>
            <option value="3">河北</option>
            <option value="0" selected>选择</option>
        </select>
        <br>
        <input type="submit" value="登录"/>
        <input type="reset" value="清空"/>
        选择头像:
        <input type="file" name="file"/>
    </form>

    get:实例将上述的内容复制下来然后method改为get即可测试

</body>
</html>

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

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

相关文章

计算机中数值表示:原码、反码、补码与移码

1 前言 计算机科学中&#xff0c;数字的表示方式至关重要&#xff0c;因为计算机内部只能识别处理二进制数据。为了在计算机中实现对整数的表示&#xff0c;提出了多种数值编码方式&#xff0c;其中最常用的是原码、反码、补码和移码。 2 原码 2.1 原码的定义 原码(Signed …

硬件实现I2C常用寄存器简单介绍

引言 在深入探讨I2C外设的具体案例之前&#xff0c;理解其核心寄存器的配置至关重要。这些寄存器不仅控制着I2C模块的基本操作模式&#xff0c;如数据传输速率和地址识别&#xff0c;还负责管理更复杂的通信需求&#xff0c;例如中断处理、DMA交互及错误检测与恢复。接下来的内…

分析用户请求K8S里ingress-nginx提供的ingress流量路径

前言 本文是个人的小小见解&#xff0c;欢迎大佬指出我文章的问题&#xff0c;一起讨论进步~ 我个人的疑问点 进入的流量是如何自动判断进入iptables的四表&#xff1f;k8s nodeport模式的原理&#xff1f; 一 本机环境介绍 节点名节点IPK8S版本CNI插件Master192.168.44.1…

linux中,软硬链接的作用和使用

一、软硬链接的作用 软硬链接&#xff0c;是大家所熟系的内容了。链接就是方便人使用电脑上访问文件、方便进程访问文件的工具。比如软连接大家都有见过&#xff0c;在安装某款软件的时候要不要添加快捷方式。在windows系统上&#xff0c;我们右键点击文件的时候按‘s’就能创建…

kalman滤波器C++设计仿真实例第三篇

1. 仿真场景 水面上有条船在做匀速直线航行&#xff0c;航行过程中由于风和浪的影响&#xff0c;会有些随机的干扰&#xff0c;也就是会有些随机的加速度作用在船身上&#xff0c;这个随机加速度的均方差大约是0.1&#xff0c;也就是说方差是0.01。船上搭载GPS设备&#xff0c;…

ubuntu20.04+RTX4060Ti大模型环境安装

装显卡驱动 这里是重点&#xff0c;因为我是跑深度学习的&#xff0c;要用CUDA&#xff0c;所以必须得装官方的驱动&#xff0c;Ubuntu的附件驱动可能不太行. 进入官网https://www.nvidia.cn/geforce/drivers/&#xff0c;选择类型&#xff0c;最新版本下载。 挨个运行&#…

[c语言日寄]浮点数在内存中的储存

【作者主页】siy2333 【专栏介绍】⌈c语言日寄⌋&#xff1a;这是一个专注于C语言刷题的专栏&#xff0c;精选题目&#xff0c;搭配详细题解、拓展算法。从基础语法到复杂算法&#xff0c;题目涉及的知识点全面覆盖&#xff0c;助力你系统提升。无论你是初学者&#xff0c;还是…

Yageo国巨的RC系列0402封装1%电阻库来了

工作使用Cadence多年&#xff0c;很多时候麻烦的就是整理BOM&#xff0c;因为设计原理图的时候图省事&#xff0c;可能只修改value值和封装。 但是厂家&#xff0c;规格型号&#xff0c;物料描述等属性需要在最后的时候一行一行的修改&#xff0c;繁琐又容易出错&#xff0c;过…

【文档智能】Qwen2.5-VL在版式分析和表格识别上的实际评测效果

qwen开年开源了Qwen2.5-VL系列权重模型&#xff0c;笔者观察到相较于传统的多模态系列&#xff0c;增加了文档理解功能。笔者以文档智能中两个比较重要的任务版式分析和表格识别&#xff0c;笔者直接测试下Qwen2.5-VL-72B的效果。 版式分析 case1 case2 这个case没有输出bbox…

【计算机组成原理】1_绪论

chap1 绪论 1. 国产芯片现状 MIPS阵营&#xff1a;龙芯X86阵营&#xff08;常见于桌面和服务器&#xff09;&#xff1a;兆芯&#xff08;VIA&#xff09;&#xff0c;海光&#xff08;AMD&#xff09;ARM阵营&#xff08;常见于移动嵌入式、手机平板等&#xff09;&#xff…

解锁反序列化漏洞:从原理到防护的安全指南

目录 前言 一、什么是反序列化 二、反序列化漏洞原理 三、反序列化漏洞的危害 &#xff08;一&#xff09;任意代码执行 &#xff08;二&#xff09;权限提升 &#xff08;三&#xff09;数据泄露与篡改 四、常见的反序列化漏洞场景 &#xff08;一&#xff09;PHP 反…

openGauss 3.0 数据库在线实训课程1:学习数据库状态查看

openGauss数据库状态查看 前提 我正在参加21天养成好习惯| 第二届openGauss每日一练活动 课程详见&#xff1a;openGauss 3.0.0数据库在线实训课程 学习目标 学习从操作系统层面和使用openGauss工具查看数据库的状态、版本和数据文件目录。 课程作业 gs_ctl是openGauss提…

[含文档+PPT+源码等]精品基于Python实现的django个性化健康餐计划订制系统

软件开发环境及开发工具&#xff1a; 开发语言&#xff1a;python 使用框架&#xff1a;Django 前端技术&#xff1a;JavaScript、VUE.js&#xff08;2.X&#xff09;、css3 开发工具&#xff1a;pycharm、Visual Studio Code、HbuildX 数据库&#xff1a;MySQL 5.7.26&am…

单机伪分布Hadoop详细配置

目录 1. 引言2. 配置单机Hadoop2.1 下载并解压JDK1.8、Hadoop3.3.62.2 配置环境变量2.3 验证JDK、Hadoop配置 3. 伪分布Hadoop3.1 配置ssh免密码登录3.2 配置伪分布Hadoop3.2.1 修改hadoop-env.sh3.2.2 修改core-site.xml3.2.3 修改hdfs-site.xml3.2.4 修改yarn-site.xml3.2.5 …

ZooKeeper单节点详细部署流程

ZooKeeper单节点详细部署流程 文章目录 ZooKeeper单节点详细部署流程 一.下载稳定版本**ZooKeeper**二进制安装包二.安装并启动**ZooKeeper**1.安装**ZooKeeper**2.配置并启动**ZooKeeper** ZooKeeper 版本与 JDK 兼容性3.检查启动状态4.配置环境变量 三.可视化工具管理**Zooke…

IMX6ULL环境搭建遇到的问题和解答更新

IMX6ULL环境搭建遇到的问题 开发板&#xff1a;正点原子IMX6ULL 终端软件串口控制&#xff1a;MobaXterm 1、网络环境搭建三方互ping不通 电脑无网口&#xff0c;使用绿联USB转网口&#xff0c;接网线直连开发板&#xff0c;电脑WiFi上网 按文档设置的 IP 地址&#xff0c;以…

Windows Docker笔记-Docker拉取镜像

通过在前面的章节《安装docker》中&#xff0c;了解并安装成功了Docker&#xff0c;本章讲述如何使用Docker拉取镜像。 使用Docker&#xff0c;主要是想要创建并运行Docker容器&#xff0c;而容器又要根据Docker镜像来创建&#xff0c;那么首当其冲&#xff0c;必须要先有一个…

51单片机07 串口通信

串口是一种应用十分广泛的通讯接口&#xff0c;串口成本低、容易使用、通信线路简单&#xff0c;可实现两个设备的互相通信。单片机的串口可以使单片机与单片机、单片机与电脑、单片机与各式各样的模块互相通信。51单片机内部自带UART&#xff08;Universal Asynchronous Recei…

外置互感器导轨式电能表

1 概述 1 Overview ADL系列导轨式多功能电能表&#xff0c;是主要针对于光伏并网系统、微逆系统、储能系统、交流耦合系统等新能源发电系统而设计的一款智能仪表&#xff0c;产品具有精度高、体积小、响应速度快、安装方便等优点。具有对电力参数进行采样计量和监测&#xff…

微软发布基于PostgreSQL的开源文档数据库平台DocumentDB

我们很高兴地宣布正式发布DocumentDB——一个开源文档数据库平台&#xff0c;以及基于 vCore、基于 PostgreSQL 构建的 Azure Cosmos DB for MongoDB 的引擎。 过去&#xff0c;NoSQL 数据库提供云专用解决方案&#xff0c;而没有通用的互操作性标准。这导致对可互操作、可移植…