前端开发:form中的标签

一、铺垫

我本来想分开,一段一段的写;可是又怕分开后不连贯造成很多问题;

二、标签

2.1input

<form action="">  

        <!-- 都是单行输入  -->

        <!-- //将文本输入框设置成text格式 -->

        姓名<input type="text">  

        <br/>

        <!-- //将文本输入框设置成不可见的密码形式 -->

        密码<input type="password">

        <!-- 单选框 -->

         <br/>

         <!-- 单选框当给定name属性时,就可以单选; -->

        性别<input type="radio" name="sex">男

        <input type="radio" name="sex" checked="checked">女

        <br/>

        爱好<input type="checkbox">吃饭

        <input type="checkbox">睡觉

        <input type="checkbox">打豆豆

        <br/>

        <input type="button" value="这是一个普通按钮">//要想联动必须要使用JavaScript;

    </form>

    <form action="">

        课程<input type="text" name="course">

        <input type="submit" value="登陆">        //把内容提交给服务器

        <input type="reset">        //清空input中的内容

        <input type="file">           //选择要上传的文件

    </form>

 2.2label标签

一半来说label标签是单选框或复选框绑定的,可以通过点击文字;来选择

<label for="male">男</label>

<input type="radio" name="sex" id="male">

<label for="female">女</label>

<input type="radio" name="sex" id="female">

 2.3select标签

下拉菜单

option 中定义 selected="selected" 表示默认选中
<select>
   <option> 请选择工作地点 </option>
    <option> 北京 </option>
    <option selected = "selected" > 上海 </option>
</select>

2.4textarea标签

<textarea name="" id="" cols="30" rows="10"></textarea>

cols:列数

rows:行数

一个用于填写文本的区域,30列10行;若超过此限制,则会添加滚轮;一般会在CSS中设置属性;

 2.5无语义标签

div 标签; division 的缩写 , 含义是分割
span 标签 , 含义是跨度
可以理解成就是用来浏览器页面布局;比如位置在上方,中间,下方;
div是分成一行一行的;span是一行中占一部分类似于空格;
div 是独占一行的 , 是一个大盒子 .
span 不独占一行 , 是一个小盒子 .

<div>

        <div>

            <span>吃饭</span>

            <span>吃饭</span>

            <span>吃饭</span>

            <span>吃饭</span>

        </div>

        <div>睡觉</div>

        <div>打豆豆</div>

</div>

 

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

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

相关文章

【2024年华为OD机试】 (CD卷,100分)- 最大N个数与最小N个数的和(Java JS PythonC/C++)

一、问题描述 题目描述 给定一个数组&#xff0c;编写一个函数来计算它的最大N个数与最小N个数的和。你需要对数组进行去重。 说明&#xff1a; 数组中数字范围 [0, 1000]最大N个数与最小N个数不能有重叠&#xff0c;如有重叠&#xff0c;输入非法返回 -1输入非法返回 -1 …

WINFORM - DevExpress -> DevExpress总结[安装、案例]

安装devexpress软件 路径尽量不换&#xff0c;后面破解不容易出问题 vs工具箱添加控件例如: ①使用控制台进入DevExpress安装目录: cd C:\Program Files (x86)\DevExpress 20.1\Components\Tools ②添加DevExpress控件&#xff1a; ToolboxCreator.exe/ini:toolboxcreator…

cursor+deepseek构建自己的AI编程助手

文章目录 准备工作在Cursor中添加deepseek 准备工作 下载安装Cursor &#xff08;默认安装在C盘&#xff09; 注册deepseek获取API key 在Cursor中添加deepseek 1、打开cursor&#xff0c;选择设置 选择Model&#xff0c;添加deepseek-chat 注意这里去掉其他的勾选项&…

《零基础Go语言算法实战》【题目 2-7】defer 关键字特性

《零基础Go语言算法实战》 【题目 2-7】defer 关键字特性 下面代码的输出是什么&#xff1f;请说明原因。 package main import ( "fmt" ) func main() { deferFunc() func deferFunc() { defer func() { fmt.Println("value1") }() defer func() {…

如何规模化实现完全自动驾驶?Mobileye提出解题“新”思路

在CES 2025上&#xff0c;Mobileye展示了端到端自动驾驶系统Mobileye Drive™&#xff0c;通过高度集成的传感器、算法和计算平台&#xff0c;可以实现自动驾驶功能的全覆盖。 Mobileye创始人兼首席执行官Amnon Shashua教授 期间&#xff0c;Mobileye创始人兼首席执行官Amnon …

腾讯云AI代码助手编程挑战赛-智能聊天助手

作品简介 本作品开发于腾讯云 AI 代码助手编程挑战赛&#xff0c;旨在体验腾讯云 AI 代码助手在项目开发中的助力。通过这一开发过程&#xff0c;体验到了 AI 辅助编程的高效性。 技术架构 前端: 使用 VUE3、TypeScript、TDesign 和 ElementUI 实现。 后端: 基于 Python 开发…

超大规模分类(三):KNN softmax

传统的分类损失计算输入数据和每个类别中心的距离&#xff0c;来优化模型的训练。KNN softmax通过选择和输入数据最相关的top-K个类别&#xff0c;仅计算输入数据和top-K个类别中心的距离&#xff0c;以减小计算量。 KNN softmax首次诞生于达摩院机器智能技术实验室发表的SIGKD…

MySQL素材怎么导入Navicat???

不管用什么方法都要先关掉MySQL服务&#xff0c;并且提前备份数据&#xff01; 1.有sql文件时候。 打开navicat&#xff0c;运行sql文件 然后点击后面三个点&#xff0c;选中要运行的sql文件&#xff0c;开始。 鼠标右键刷新一下&#xff0c;就能看到sql文件中的表了 2.没有s…

程序员独立开发竞品分析:确定网站使用什么建站系统

要确定一个网站使用的建站系统&#xff0c;可以通过以下几种方法尝试分析&#xff1a; 查看页面源代码&#xff1a; 打开网站&#xff0c;右键点击页面并选择“查看页面源代码”。在代码中查找一些常见的建站系统标志&#xff0c;例如&#xff1a; WordPress 的迹象&#xff1a…

Linux(Centos7)安装Mysql/Redis/MinIO

安装Mysql 安装Redis 搜索Redis最先版本所在的在线安装yum库 查看以上两个组件是否是开机自启 安装MinIO 开源的对象存储服务&#xff0c;存储非结构化数据&#xff0c;兼容亚马逊S3协议。 minio --help #查询命令帮助minio --server --help #查询--server帮助minio serve…

【DB-GPT】开启数据库交互新篇章的技术探索与实践

一、引言&#xff1a;AI原生数据应用开发的挑战与机遇 在数字化转型的浪潮中&#xff0c;企业对于智能化应用的需求日益增长。然而&#xff0c;传统的数据应用开发方式面临着诸多挑战&#xff0c;如技术栈复杂、开发周期长、成本高昂、难以维护等。这些问题限制了智能化应用的…

解决aerich init -t xx 报错ModuleNotFoundError: No module named ‘tomli_w‘

今天在学习fastapi的时候&#xff0c;发现一款数据库迁移工具&#xff0c;通过这个工具可以根据模型类来对数据库做出改变。 随跟着学: 在执行 aerich init -t settings.TORTOISE_ORM的时候&#xff0c; 彼其娘之。。 报了一些错误&#xff1a; Traceback (most recent ca…

.NET Core NPOI 导出图片到Excel指定单元格并自适应宽度

NPOI&#xff1a;支持xlsx&#xff0c;.xls&#xff0c;版本>2.5.3 XLS&#xff1a;HSSFWorkbook&#xff0c;主要前缀HSS&#xff0c; XLSX&#xff1a;XSSFWorkbook&#xff0c;主要前缀XSS&#xff0c;using NPOI.XSSF.UserModel; 1、导出Excel添加图片效果&#xff0…

浅谈云计算07 | 云安全机制

浅谈云计算安全机制&#xff1a;全方位守护云端世界 一、引言二、加密技术&#xff1a;数据的隐形护盾三、散列机制&#xff1a;数据完整性的忠诚卫士四、数字签名&#xff1a;数据来源与真伪的鉴定专家五、公钥基础设施&#xff08;PKI&#xff09;&#xff1a;信任的基石六、…

Unity 2d描边基于SpriteRender,高性能的描边解决方案

目标 以Unity默认渲染管线为例&#xff0c;打造不需要图片内边距&#xff0c;描边平滑&#xff0c;高性能的描边解决方案 前言 在2d游戏中经常需要给2d对象添加描边&#xff0c;来突出强调2d对象 当你去网上查找2d描边shader&#xff0c;移植到项目里面&#xff0c;大概率会…

Uniapp仿ChatGPT Stream流式输出(非Websocket)

Uniapp仿ChatGPT Stream流式输出&#xff08;非Websocket&#xff09; 前言&#xff1a;流式输出可以使用websocket也可以使用stream来实现EventSource是 HTML5 中的一个接口&#xff0c;用于接收服务器发送的事件流&#xff08;Server - Sent Events&#xff0c;SSE&#xff…

黑马linux入门笔记(01)初始Linux Linux基础命令 用户和权限 实用操作

B站 黑马程序员 的视频 BV1n84y1i7td 黑马程序员新版Linux零基础快速入门到精通&#xff0c;全涵盖linux系统知识、常用软件环境部署、Shell脚本、云平台实践、大数据集群项目实战等 增强自控力 冥想慢呼吸绿色锻炼充分休息减少决策次数优先做重要的事情(早晨)融入强自控群控…

当你不小心使用了MySQL的保留字作为字段名而导致你的SQL语法解析错误该怎么办!

问题举例&#xff1a; 你在尝试更新一个名为 desc 的字段时遇到了 SQL 语法错误。原因是 desc 是 MySQL 的保留字&#xff0c;通常用于表示 ORDER BY 子句中的降序&#xff08;DESC&#xff09;&#xff0c;因此直接使用 desc 作为字段名会导致 SQL 解析错误。如下图&#xff…

excel设置好的可选择列数据后,如何快速输入到单元格中?

当设置好列的【数据】-【数据有效性】-【序列】后&#xff0c;在单元格中输入可选择数据的开头&#xff0c;就会提示出对应的可选择数据&#xff0c;然后&#xff0c;按一下键盘上的【↓】键&#xff0c;再按回车&#xff0c;即可快速输入到单元格中。

2025封禁指定国家ip-安装xtables-addons记录

如何安装和使用 安装lux仓库(该仓库包含xtables-addons所需的依赖环境) # wget http://repo.iotti.biz/CentOS/7/noarch/lux-release-7-1.noarch.rpm # rpm -ivh lux-release-7-1.noarch.rpm 安装xtables-addons。注意&#xff1a;必须先安装kmod-xtables-addons&#xff0c;再…