前端day4-表单标签

news2025/1/11 15:02:13
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>day4-表单</title>
</head>
<body>
    
    <!-- input标签 -->
    文本框,用于输入单行文本:<input type="text"><br>
    密码框: <input type="password"><br>
    单选框,多选一: 
    <input type="radio" name="0">语文
    <input type="radio" name="0">数学
    <input type="radio" name="0">英语
    <br>
    多选框,多选多: 
    <input type="checkbox" name="0">北京
    <input type="checkbox" name="0">天津
    <input type="checkbox" name="0">上海
    <input type="checkbox" name="0">厦门
    <br>
    选择文件,上传文件:<input type="file"><br>
    提交按钮: <input type="submit"><br>
    重置按钮: <input type="reset"> <br>
    普通按钮: <input type="button" value="按钮"><br><br>

    <hr>

    <!-- 占位符placeholder -->
    用户名:<input type="text" placeholder="请输入用户名"><br>
    密码: <input type="password" placeholder="请输入密码">

    <hr>

    <!-- 单选功能和默认选中,同理多选框 -->
    <!-- name:分组 -->
    <!-- checked:默认选中 -->
    学科:
    <input type="radio" name="subject" checked>语文
    <input type="radio" name="subject">数学
    <input type="radio" name="subject">英语

    <hr>

    <!-- 上传多个文件:multiple -->
    上传单个文件:<input type="file"><br>
    上传多个文件:<input type="file" multiple>

    <hr>

    <!-- 按钮 -->
    <!-- 属性value-添加显示文字 -->
    <form>
        用户名:<input type="text" placeholder="请输入用户名"><br>
        密码: <input type="password" placeholder="请输入密码"><br>
        <!-- 提交按钮和重置按钮需要在表单中使用 -->
        <input type="submit">
        <input type="submit" value="免费注册">
        <input type="reset">
        <input type="button" value="注册">
    </form>

    <hr>
    
    <!-- button按钮标签 -->
    <button>按钮</button>
    <button type="submit">提交按钮</button>
    <button type="reset">重置按钮</button>
    <button type="button">普通按钮,没有任何功能</button>

    <hr>

    <!-- select下拉菜单 -->
    <!-- selected:默认选中 -->
    下拉菜单:<br>
    <select>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option >厦门</option>
    </select>
    <select>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option selected>厦门</option>
    </select>

    <hr>

    <!--textarea文本域,右下角可拖曳改变大小  -->
    <!-- cols:规定可见宽度; rows:规定可见行数 -->
    <textarea cols="30" rows="10"></textarea>

    <hr>

    <!-- label:点击文字可选中 -->
    <!-- 方法一:复杂 -->
    性别:
    <input type="radio" name="sex" id="nan"><label for="nan">男</label>
    <input type="radio" name="sex" id="nv"><label for="nv">女</label>
    <br><br>
    <!-- 方法二:简单 -->
    性别:
    <label><input type="radio" name="sex1">男</label>
    <label><input type="radio" name="sex1">女</label>

</body>
</html>

 

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

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

相关文章

# 基于MongoDB实现商品管理系统(2)

基于MongoDB实现商品管理系统&#xff08;2&#xff09; 基于 mongodb 实现商品管理系统之准备工作 1、案例需求 这里使用的不是前端页面&#xff0c;而是控制台来完成的。 具体的需求如下所示&#xff1a; 运行 查询所有 通过id查询详情 添加 - 通过id删除 2、案例分析 程…

进程创建,进程消亡

虚拟地址&#xff1a;通过虚拟技术&#xff0c;将外部存储设备的一部分空间&#xff0c;划分给系统&#xff0c;作为在内存不足时临时用作数据缓存。当内存耗尽时&#xff0c;电脑就会自动调用硬盘来充当内存&#xff0c;以缓解内存的紧张。 练习: 编写一个代码实现,一个父…

OGG转MP3音频格式转换:6种免费音频转换器推荐

在如今的数字音乐时代&#xff0c;不同音频格式的兼容性问题常常让我们感到困扰。其中&#xff0c;OGG和MP3是两种常见的音频格式&#xff0c;但由于设备和平台的支持问题&#xff0c;我们经常需要将OGG转换为MP3格式。 本文将为您详细介绍OGG和MP3的区别&#xff0c;为什么需要…

Spring Boot集成protobuf快速入门Demo

1.什么是protobuf&#xff1f; Protobuf&#xff08;Protocol Buffers&#xff09;是由 Google 开发的一种轻量级、高效的数据交换格式&#xff0c;它被用于结构化数据的序列化、反序列化和传输。相比于 XML 和 JSON 等文本格式&#xff0c;Protobuf 具有更小的数据体积、更快…

数据结构:队列(含源码)

目录 一、队列的概念和结构 二、队列的实现 头文件 初始化 入队列和出队列 获取队头队尾元素 队列有效数据数及队列判空 队列的销毁 完整源码 dl.h dl.c 一、队列的概念和结构 队列是一种只允许在一端进行插入数据操作&#xff0c;在另一端进行删除数据操作的特殊线性…

重生之我 学习【数据结构之顺序表(SeqList)】

⭐⭐⭐ 新老博友们&#xff0c;感谢各位的阅读观看 期末考试&假期调整暂时的停更了两个多月 没有写博客为大家分享优质内容 还容各位博友多多的理解 美丽的八月重生之我归来 继续为大家分享内容 你我共同加油 一起努力 ⭐⭐⭐ 数据结构将以顺序表、链表、栈区、队列、二叉树…

多米诺和托米诺平铺

有两种形状的瓷砖&#xff1a;一种是2 x 1的多米诺形&#xff0c;另一种是形如L的托米诺形。两种形状都可以旋转。 给定整数 n &#xff0c;返回可以平铺 2 x n 的面板的方法的数量。返回对 10^9 7 取模 的值。 平铺指的是每个正方形都必须有瓷砖覆盖。两个平铺不同&#xff…

maven常用命令与常见问题汇总

文章目录 一、IDEA 下载依赖包源码报错Sources not found for:xxxx二、常用命令1、打包 一、IDEA 下载依赖包源码报错Sources not found for:xxxx 解决方案&#xff1a; 方案1、在 terminal 运行 mvn dependency:resolve -Dclassifiersources 命令 方案2、右键特定的pom文件…

论文概览 |《IJGIS》2024 Vol.38 issue4

本次给大家整理的是《International Journal of Geographical Information Science》杂志2024年第38卷第4期的论文的题目和摘要&#xff0c;一共包括8篇SCI论文&#xff01; 论文1 knowledge-constrained large language model interactable with GIS: enhancing public risk …

笔试题 day1

目录 快速io 统计2的个数 两个数组的交集 点击消除 快速io import java.util.*; import java.io.*;public class Main {public static PrintWriter out new PrintWriter(new BufferedWriter(new OutputStreamWriter(System.out)));public static Read in new Read();publ…

瑞_Linux防火墙相关命令_Windows远程连接虚拟机的服务失败_Linux防火墙端口开放

&#x1f64a; 前言&#xff1a;博主在学习使用虚拟机的过程中&#xff0c;常常碰到 Windows 远程连接虚拟机的服务失败的问题。比如想要在主机上连接虚拟机中的 MongoDB 服务的时候&#xff0c;服务器或者虚拟机一般都会默认开启防火墙&#xff0c;则会导致远程连接失败&#…

做一个能和你互动玩耍的智能机器人之七-接入对话和大模型

接入科大迅飞的语音识别&#xff1a; private void printResult(RecognizerResult results) {String text JsonParser2.parseIatResult(results.getResultString());String sn null;// 读取json结果中的sn字段try {JSONObject resultJson new JSONObject(results.getResult…

如何忽略已经提交到 Git 仓库中的文件

文章目录 前言一、确认文件是否已经被提交二、确认 .git 文件存在三、修改 .git/info/exclude 文件四、修改文件名五、提交和推送六、验证总结 前言 在日常开发中&#xff0c;我们常常会遇到这样的情况&#xff1a;不小心将不应追踪的文件提交到了 Git 仓库中&#xff0c;例如…

LabVIEW中的Reverse String函数与字节序转换

在LabVIEW中&#xff0c;数据的字节序&#xff08;也称为端序&#xff09;问题通常出现在数据传输和存储过程中。字节序可以分为大端&#xff08;Big-Endian&#xff09;和小端&#xff08;Little-Endian&#xff09;&#xff0c;它们分别表示高字节存储在低地址和低字节存储在…

培训第二十二天(mysql数据库主从搭建)

上午 1、为mysql添加开机启动chkconfig [rootmysql1 ~]# chkconfig --list //列出系统服务在不同运行级别下的启动状态注&#xff1a;该输出结果只显示 SysV 服务&#xff0c;并不包含原生 systemd 服务。SysV 配置数据可能被原生 systemd 配置覆盖。 要列出 systemd 服务…

2024.8.2(MySQL)

一、mysql 1、下载mysql软件包 [rootmysql ~]# yum -y install wget [rootmysql ~]# wget https://downloads.mysql.com/archives/get/p/23/file/mysql-8.0.33-1.el7.x86_64.rpm-bundle.tar 2、解压 [rootmysql ~]# tar -xf mysql-8.0.33-1.el7.x86_64.rpm-bundle.tar 3、安装…

完美解决浏览器的输入框自动填入时,黄色背景问题,以及图标被遮住问题(最新)

用图说话↓↓↓ 首先用代码解决黄色背景问题&#xff0c;box-shadow颜色设置透明即可 :deep(input:-webkit-autofill) {box-shadow: 0 0 0 1000px transparent !important;/* 浏览器记住密码的底色的颜色 */-webkit-text-fill-color: #fff !important;/* 浏览器记住密码的字的…

【Linux 驱动】IMX6ULL input驱动

1. input子系统介绍 input 子系统分为 input 驱动层、input 核心层、input 事件处理层&#xff0c;最终给用户空间提供可访问的设备节点。 驱动层&#xff1a;输入设备的具体驱动程序&#xff0c;比如按键驱动程序&#xff0c;向内核层报告输入内容核心层&#xff1a;承上启下…

【docker】docker和镜像仓库

阿里云镜像仓库&#xff08;Aliyun Container Registry&#xff09;是阿里云提供的容器镜像存储和管理服务。它以Docker Registry协议为基础&#xff0c;为容器开发者提供了稳定可靠的镜像存储和分发服务。 使用阿里云镜像仓库&#xff0c;您可以将自己的Docker镜像推送到阿里…

lc209. 长度最小的子数组

题目&#xff1a; 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其总和大于等于 target 的长度最小的 子数组 [numsl, numsl1, ..., numsr-1, numsr] &#xff0c;并返回其长度。如果不存在符合条件的子数组&#xff0c;返回 0 。 思路&#xff1a;…