HTML表单标签form分析

news2024/10/6 12:24:30

说明:在html的标签中,表单标签与后台联系密切,像用户登录、注册,都是用到页面的表单标签,用户将信息填入到表单中,提交到后端业务中校验处理,再将结果反馈给前端页面。

表单内的标签分别有:input(输入框)、select(下拉列表)、textarea(文本域)

表单内的属性有:action(数据提交到哪里)、method(数据提交的方式)

表单的标签

表单的标签,在使用时要命名,这样提交后,后台业务可以根据名字获取到对应标签的值;

input type=“text”

生成一个普通的输入框,对框内输入的内容类型无要求

用户名:<input type="text" name="username"/>

在这里插入图片描述

input type=“password”

生成一个密码输入框,内容类型无限制,但是是加密的,不可见

密码:<input type="password" name="password" />

在这里插入图片描述

input type=“radio”

生成一个单选框,同一个名称的单选框为同一类,这些单选框之间只允许选其中一个;如果要设置某个单选项为默认值,只需在标签内加“checked”,表示该项为默认勾选。

 性别:
 <input type="radio" name="sex"/><input type="radio" name="sex"/>

在这里插入图片描述

年龄段:
<input type="radio" name="age"/>青年
<!-- 设置中年为默认选项 -->
<input type="radio" name="age" checked/>中年
<input type="radio" name="age"/>老年

在这里插入图片描述

input type=“checkbox”

生成一个多选框,同样,如果需要设置默认值,在该选项的标签内添加“checked”,表示该项默认勾选。

爱好:
<input type="checkbox" name="hobby" />跑步
<input type="checkbox" name="hobby" checked />阅读
<input type="checkbox" name="hobby" />听音乐
<input type="checkbox" name="hobby" checked />健身
<input type="checkbox" name="hobby" />下棋

在这里插入图片描述

input type=“file”

生成一个文件上传按钮,可选择本地的文件

上传头像:
<input type="file" name="photo" />

在这里插入图片描述

input type=“datetime-local”

生成日期输入框,可选择date、time和datetime-local,分别表示可选日期、时间和日期+时间的详细表达方式。

生日:<br />
<input type="date" name="birthday" /> <br />
<input type="time" name="birthday" /><br />
<input type="datetime-local" name="birthday" />

在这里插入图片描述

input type=“button”

定义一个按钮,可配合js使用

<input type="button" value="提交" />

在这里插入图片描述

input type=“reset”

定义一个可清空表单内容的按钮,按下后,表单的内容将清空

用户名:<input type="text" name="username" /><br />
密码:<input type="password" name="password" /><br />
<input type="reset" value="重置" />

在这里插入图片描述

input type=“hidden”

生成一个隐藏的输入框,这个框在开发中可用于统计网页的访问人数

这后面有一个隐藏的输入框<input type="hidden" name="hiddenInput" />

在这里插入图片描述

input type=“submit”

生成一个提交表单按钮,点击后可跳转到表单action属性设置的页面里,并将表单数据传过去,我这里没有设置action的值,故点击后还是本页面。

<form action="" method="">
    用户名:<input type="text" name="username" /><br />
    密码:<input type="password" name="password" /><br />
    <input type="submit" value="登录" />
</form>

在这里插入图片描述

select标签

生成一个下拉菜单,待选项标签为option

文化程度:
<select name="education">
    <option>小学</option>
    <option>中学</option>
    <option>大学</option>
</select>

在这里插入图片描述

textarea标签

个人信息:
<textarea name="info"></textarea>

在这里插入图片描述

表单的属性

action

表示点击submit提交后,表单的数据提交到哪里,可选择另一个页面;

method

表示表单提交的方式,有get和post两种,默认是get;两种方式,明显的区别在于:get方式,表单中的数据可在提交后,页面的地址栏看到;post提交方式看不到;

<form action="" method="get">
    用户名:<input type="text" name="username" /><br />
    密码:<input type="password" name="password" /><br />
    <input type="submit" value="登录" />
</form>

在这里插入图片描述

<form action="" method="post">
    用户名:<input type="text" name="username" /><br />
    密码:<input type="password" name="password" /><br />
    <input type="submit" value="登录" />
</form>

在这里插入图片描述

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

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

相关文章

ChatGPT国内免费使用的方法有哪些?分享几个网内可用的免费的ChatGPT网页版

目录 一、ChatGpt是什么&#xff1f; 二、ChatGPT国内免费使用的方法&#xff1a; 第一点&#xff1a;电脑端 第二点&#xff1a;手机端 三、结语&#xff1a; 一、ChatGpt是什么&#xff1f; ChatGPt是美国OpenAI [1] 研发的聊天机器人程序 。更是人工智能技术驱动的自然语言…

【学习日记2023.5.26】 之 客户端之完善缓存和购物车模块

文章目录 7. 用户端之完善缓存和购物车模块7.1 缓存菜品7.1.1 问题说明7.1.2 实现思路7.1.3 代码开发7.1.4 功能测试7.1.5 提交代码 7.2 缓存套餐7.2.1 Spring Cache7.2.1.1 介绍2.1.2 常用注解7.2.1.3 入门案例 7.2.2 实现思路7.2.3 代码开发7.2.4 功能测试7.2.5 提交代码 7.3…

14-C++面向对象(单例模式、const成员、浅拷贝、深拷贝)

单例模式 单例模式&#xff1a;设计模式的一种&#xff0c;保证某个类永远只创建一个对象 构造函数\析构函数 私有化 定义一个私有的static成员变量指向唯一的那个单例对象&#xff08;Rocket* m_rocket&#xff09; 提供一个公共的访问单例对象的接口&#xff0…

[组合数学] 容斥原理polya定理

数学 A 170 物理 B130 化学C120 A ∩ B 45 A ∩ C 20 B ∩ C 22 A ∩ B ∩ C 3 A\cap B 45\quad A\cap C20 \quad B\cap C 22 \quad A\cap B\cap C 3 A∩B45A∩C20B∩C22A∩B∩C3 ∣ A ∪ B ∪ C ∣ A B C − A ∩ B − B ∩ C − A ∩ C A ∩ B ∩ C 170 130 …

vcruntime140.dll丢失怎么办?怎么解决vcruntime140.dll丢失的问题

当您运行一个需要此文件的程序时&#xff0c;如果您的系统中不存在这个文件&#xff0c;会提示出错信息“找不到vcruntime140.dll”或“vcruntime140.dll丢失”。这种情况下&#xff0c;您需要解决这个问题&#xff0c;才能继续运行此应用程序。我们将介绍vcruntime140.dll丢失…

python基于协同过滤推荐算法的电影观后感推荐管理系统的设计

本课题所设计的影单管理系统&#xff0c;使用B/S架构&#xff0c;Python语言进行开发&#xff0c;它的优点代码不能从浏览器查看&#xff0c;保密性非常好&#xff0c;比其他的影单管理更具安全性。Python还容易修改和调试&#xff0c;毕竟影视是在不断发展过程中&#xff0c;难…

【P34】JMeter ForEach控制器(ForEach Controller)

文章目录 一、ForEach控制器&#xff08;ForEach Controller&#xff09;参数说明二、准备工作三、测试计划设计 一、ForEach控制器&#xff08;ForEach Controller&#xff09;参数说明 可以对一个组变量进行循环迭代&#xff1b;该组件通常与后置处理器中的 JSON 提取器、正…

自动化测试工具——Selenium详解

前言 Selenium是一个用于Web应用程序测试的工具。是一个开源的Web的自动化测试工具&#xff0c;最初是为网站自动化测试而开发的&#xff0c;类型像我们玩游戏用的按键精灵&#xff0c;可以按指定的命令自动操作&#xff0c;不同是Selenium可以直接运行在浏览器上&#xff0c;…

AIBlockChain:“知名博主独家讲授”人工智能创新应用竞赛【精选实战作品】之《基于计算机视觉、自然语言处理、区块链和爬虫技术的智能会议系统》软件系统案例的界面简介、功能介绍分享之二、会中智能

AI&BlockChain&#xff1a;“知名博主独家讲授”人工智能创新应用竞赛【精选实战作品】之《基于计算机视觉、自然语言处理、区块链和爬虫技术的智能会议系统》软件系统案例的界面简介、功能介绍分享之二、会中智能系统 目录 人工智能竞赛【精选实战作品】之《基于计算机视…

【网络编程一】初识网络:IP与端口号 网络模型

目录 &#x1f31f;需要知道 一、基础概念 &#x1f308;1、IP地址与端口号 &#x1f308;2、五元组 二、协议分层 &#x1f308;1、OSI七层网络网络模型 &#x1f308;2、TCP/IP五层(四层)模型 &#x1f308;3、封装和分用&#xff08;重点&#xff01;&#xff09; &…

Kotlin 协程中的并发问题:我明明用 mutex 上锁了,为什么没有用?

前言 最近在接手的某项目中&#xff0c;主管给我发来了一个遗留以久的 BUG&#xff0c;让我看看排查一下&#xff0c;把它修复了。 项目的问题大概是在某项业务中&#xff0c;需要向数据库插入数据&#xff0c;而且需要保证同种类型的数据只被插入一次&#xff0c;但是现在却…

每日一练 | 网络工程师软考真题 Day13

阅读以下说明&#xff0c;回答以下问题1至问题6。 【说明】 某公司的两个部门均采用Windows 2003的NAT功能共享宽带连接访问Internet&#xff0c;其网络结构和相关参数如图2-1所示。ISP为该公司分配的公网IP地址段为202.117.12.32/29。 【问题1】在Windows 2003中&#xff0c;…

NodeJS Crypto加密⑤

文章目录 ✨文章有误请指正&#xff0c;如果觉得对你有用&#xff0c;请点三连一波&#xff0c;蟹蟹支持&#x1f618;前言NODE内置模块Zlib模块 createGzip&#xff08;CreateGzip方法 异步&#xff09;Crypto加密模块 getHashes 方法 createHash 方法 createHmac 方法…

野火RA6M5开发板 DHT11温湿度传感器 OLED显示测试学习

野火RA6M5开发板 DHT11温湿度传感器 OLED显示测试学习 DHT11温湿度传感器 DHT11是一款有已校准数字信号输出的温湿度传感器。 精度湿度5%RH&#xff0c; 温度2℃&#xff0c;量程湿度20-90%RH&#xff0c; 温度0~50℃。 更多DHT11信息请参考&#xff1a;https://baike.sogou…

img[:, :, ::-1] 通俗理解

&#x1f468;‍&#x1f4bb;个人简介&#xff1a; 深度学习图像领域工作者 &#x1f389;工作总结链接&#xff1a;https://blog.csdn.net/qq_28949847/article/details/128552785 链接中主要是个人工作的总结&#xff0c;每个链接都是一些常用demo&#xff0c…

Redis5.0+ Redis集群水平扩容|节点删除

文章目录 1. 背景2. Redis集群水平扩展2.1 启动集群2.2 连接其中一个节点2.3 配置新节点2.4 启动新节点2.5 配置8007节点加入集群&#xff0c;成为主节点2.6 增加子节点2.7 分配hash槽2.8 检查 Redis 集群 3. 节点删除4. redis集群命令帮助5. 参考文献 1. 背景 之前搭建了Redi…

硬件系统工程师宝典(26)-----四种BJT应用电路分析

各位同学大家好&#xff0c;欢迎继续做客电子工程学习圈&#xff0c;今天我们继续来讲这本书&#xff0c;硬件系统工程师宝典。上篇我们说到晶体三极管&#xff08;BJT&#xff09;的几种应用电路&#xff1a;三极管的输入端钳制电压电路、BJT电平转换电路、Boost升压电路、图腾…

WGCNA | 不止一个组的WGCNA怎么分析嘞!?~(二)(共识网络分析-第二步-构建网络与模块-Blockwise)

1写在前面 临床工作越来越忙了&#xff0c;更新的频率也开始降低了&#xff0c;希望各位小伙伴可以理解一下。&#x1f62d; 最近看到塞尔达-王国之泪发售了&#xff0c;真的是想买一个&#xff0c;但想想根本没有时间去玩&#xff0c;买回来只能吃灰。&#x1f972; 想问问小伙…

G0第22章 :获取参数、文件上传、重定向、Gin路由、Gin中间件、运行多个服务

05 获取参数 1、获取querystring参数 querystring 指的是URL中的 ? 后面携带的参数&#xff0c;例如&#xff1a; /user/search?username小王子&address天津 。获取请求querystring参数的方法如下&#xff1a; package mainimport ("github.com/gin-gonic/gin&qu…

Git基础笔记(只含常用命令)

1.Git基本概念 1.git三区 工作区 -->git add 暂存区 --> git commit版本区域 暂存区用来存放临时文件&#xff0c;相当于只编辑没有保存 2.文件状态 命令 git status 查看文件状态 大体来说有被版本管理和没被版本管理两种状态 a.txt 执行了git add 3.git本地仓库命令 g…