HTML- 标签学习之- 表单

news2024/11/24 2:28:39

input  系列, 类型根据type 区分,所有效果如下:

 注意点:

 单/多选框:  

        name :  相同name属性的单选值为一组,遗嘱中只能有一个被选中                

       checked: 默认选中

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

        爱好<input type="checkbox" name="like" checked>学习  <input type="checkbox" name="like">爬山  <input type="checkbox" name="like">旅游

 multiple:选择多个文件

        头像<input type="file" multiple>

type= 按钮系列

 Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <h1> 表单标签</h1>
        <hr>
        文本框: <input type="text" placeholder="账号">
        <br>
        <br>
        密码框: <input type="password" placeholder="密码">
    
        <br>
        <br>
        性别<input type="radio" name="sex" checked>男  <input type="radio" name="sex">女
    
        <br>
        <br>
        爱好<input type="checkbox" name="like" checked>学习  <input type="checkbox" name="like">爬山  <input type="checkbox" name="like">旅游
    
        <br>
        <br>
        头像<input type="file" multiple>
    
        <br>
        <br>
        <input type="submit" >  <input type="reset"  >  <input type="button"  value=" 免费注册" >

        <button type="reset"> 标签按钮 重置 </button>

    </form>

</body>
</html>

下拉菜单系列:select

 

selected :默认选中

    <select >
        <option > 北京</option>
        <option > 广州</option>
        <option selected> 上海</option>
        <option > 深圳</option>

    </select>

文本域标签: textarea

  • cols:规定了文本域内可见宽度
  • rows:规定了文本域内可见行数(开发中一般 用css 设置)
  • 右下角可以拖拽改変大小
  • 实际开发时针对于样式效
    <textarea name="文本域" id="" cols="40" rows="20"></textarea>

Lable标签

常用于绑定内容与表单标签的关系

两种方式分别如下:(方式1 :lable 的for 与表单id 绑定  方式2:lable 直接包裹)


<input type="radio" name="sex" id="m"> <label for="m">男</label>
               
<label><input type="radio" name="sex">女</label>

语义化标签:

div: 独占一行

span:  同一行展示

<div> 这是 div</div>

<span> 这是span</span>

以下为手机端标签:

 

字符实体:

 

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

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

相关文章

stm32的IIC驱动0.96OLED

IIC原理介绍&#xff1a; IIC是一个总线的结构但不支持总线协议 OLED介绍&#xff1a; 一、0.96寸OLED屏幕介绍 本文采用的是4针的0.96寸OLED显示进行讲解&#xff0c;采用的是SPI协议&#xff0c;速度会比采用I2C协议的更快&#xff0c;但这两者的显示驱动都一样&#xf…

AIGC功能在线制作思维导图?

ProcessOn思维导图软件是一款功能强大的在线制作思维导图的工具&#xff0c;它提供了丰富的模板和图标&#xff0c;可以帮助用户快速制作出高质量的思维导图。其中&#xff0c;AIGC(人工智能图形识别)功能是 ProcessOn软件中的一大特色&#xff0c;它可以帮助用户更加高效地制…

permiere的字幕自动转录功能

permiere2022.3后就能够离线字幕转录了&#xff0c;这个是个很好的消息&#xff08;但也要温馨的提示大家&#xff0c;这个功能对于非标注发音或者环境嘈杂的环境下的语音识别很不友好&#xff0c;当然&#xff0c;如果你想利用它来识别歌词&#xff0c;那就乘早死了这条心&…

chatgpt赋能Python-pythonslam

Pythonslam&#xff1a;实现SLAM技术的Python库 在机器人领域&#xff0c;SLAM&#xff08;Simultaneous Localization and Mapping&#xff09;技术是非常重要的。SLAM技术使得机器人能够在未知环境中构建地图并同时确定自己的位置。然而&#xff0c;SLAM算法往往需要强大的计…

Godot引擎 4.0 文档 - 第一个 2D 游戏

本文为Google Translate英译中结果&#xff0c;DrGraph在此基础上加了一些校正。英文原版页面&#xff1a; Your first 2D game — Godot Engine (stable) documentation in English 第一个 2D 游戏 在这个循序渐进的教程系列中&#xff0c;您将使用 Godot 创建您的第一个完…

上交清华搞事情!发起最全学科大模型中文知识及推理评测!GPT-4 竟然血洗所有国产模型

夕小瑶科技说 原创 作者 | 小戏&#xff0c;Python 从 OpenAI 的 ChatGPT、Meta 的 LLaMA、Anthropic 的 Claude 到复旦的 Moss、清华的 ChatGlm、MiniMax 的 Glow&#xff0c;国内的国外的大模型百花齐放层出不穷。那么&#xff0c;抛出一个相信大家都会关心的问题&#xff…

网狐大联盟服务端源码分析之服务核心-ServiceCore

工程属性分析: 1.工程属性->动态链接库 2.dll类型->MFC共享DLL 3.字符集->Unicode 4.库导出类型->使用模块定义文件def 5.生成的导出模块函数与对应的地址定义lib文件 源码分析: 头文件分析: 头文件与对应含义表示如下:

开关电源PCB排版基本规则

开关电源PCB排版是开发电源产品中的一个重要过程。许多情况下&#xff0c;一个在纸上设计得非常完美的电源可能在初次调试时无法正常工作&#xff0c;原因是该电源的PCB排版存在着许多问题。 为了适应电子产品飞快的更新换代节奏&#xff0c;产品设计工程师更倾向于选择在市场…

Linux安装部署Redis6.2.5图文教程

Redis 是一个开源的使用 ANSI C 语言编写、遵守 BSD 协议、支持网络、可基于内存、分布式、可选持久性的键值对(Key-Value)存储数据库&#xff0c;并提供多种语言的 API。最近学习需要用到Redis&#xff0c;所以就去Linux服务器上部署一个&#xff0c;做下记录&#xff0c;方便…

PostgreSQL中的行锁

行锁在PG中比较特殊&#xff0c;在9.4以前&#xff0c;只有两种类型的行锁&#xff0c; FOR UPDATE 和FOR SHARE&#xff0c;因为只有两种锁&#xff0c;粒度比较大&#xff0c;极大的影响了并发性。所以从9.4开始引入了FOR KEY SHARE和FOR NO KEY UPDATE这两种行锁。目前这四种…

防火墙——SNAT和DNAT策略的原理及应用、防火墙规则的备份、还原和抓包

防火墙—SNAT和DNAT策略的原理及应用、防火墙规则的备份、还原和抓包 一、SNAT策略概述1、SNAT应用环境2、SNAT原理3、SNAT转换的前提条件 二、SNAT策略的应用1、临时打开2、永久打开3、SNAT转换1&#xff1a;固定的公网IP地址4、SNAT转换2&#xff1a;非固定的公网IP地址&…

一文搞懂,PO设计模式详解

PO模式&#xff1a; 全称&#xff1a;page objece&#xff0c;分层机制&#xff0c;让不同层去做不同类型的事情&#xff0c;让代码结构清晰&#xff0c;增加复⽤性。 PO模式的优势&#xff1a; 1&#xff09;效率⾼ &#xff1a;同理&#xff0c;PO模式的逻辑层⽅法有具体定…

Flink第六章:多流操作

系列文章目录 Flink第一章:环境搭建 Flink第二章:基本操作. Flink第三章:基本操作(二) Flink第四章:水位线和窗口 Flink第五章:处理函数 Flink第六章:多流操作 文章目录 系列文章目录前言一、分流1.侧输出流(process function) 二、合流1. 联合&#xff08;Union&#xff09;2…

CVE-2018-2894WebLogic未授权任意文件上传

CVE-2018-2894WebLogic未授权任意文件上传 这个洞的限制就比较多了 限制版本 Oracle WebLogic Server版本 10.3.6.0 12.1.3.0 12.2.1.2 12.2.1.3 限制配置 该漏洞的影响模块为web服务测试页&#xff0c;在默认情况下不启用。 /ws_utc/config.do /ws_utc/begin.do 默认情况下不…

在职字节6年,一个29岁女软件测试工程师的心声

简单的先说一下&#xff0c;坐标杭州&#xff0c;14届本科毕业&#xff0c;算上年前在字节跳动的面试&#xff0c;一共有面试了有6家公司&#xff08;因为不想请假&#xff0c;因此只是每个晚上去其他公司面试&#xff0c;所以面试的公司比较少&#xff09; 其中成功的有4家&a…

Linux防火墙----firewalld

文章目录 一、firewalld概述二、firewalld 与 iptables 的区别三、firewalld 区域的概念四、firewalld数据处理流程五、firewalld防火墙的配置方法5.1 使用firewall-config 图形工具5.2 编写/etc/firewalld/中的配置文件5.3使用firewall-cmd 命令行工具 一、firewalld概述 fir…

AI:帮助你更好地发声!

正文共 978 字&#xff0c;阅读大约需要 3 分钟 公务员必备技巧&#xff0c;您将在3分钟后获得以下超能力&#xff1a; 快速生成倡议书 Beezy评级 &#xff1a;B级 *经过简单的寻找&#xff0c; 大部分人能立刻掌握。主要节省时间。 推荐人 | Kim 编辑者 | Linda ●图片由Lex…

当你知道前后端分离与不分离的6个特点,你就不该再当点工了

Web 应用的开发主要有两种模式&#xff1a; 前后端不分离 前后端分离 理解它们的区别有助于我们进行对应产品的测试工作。 前后端不分离 在早期&#xff0c;Web 应用开发主要采用前后端不分离的方式&#xff0c;它是以后端直接渲染模板完成响应为主的一种开发模式。以前后端不…

linux存储技术学习资料

参考 https://www.cnblogs.com/pengdonglin137/p/16525428.html Linux I/O栈 Linux内核的I/O栈大图知乎Linux I/O专栏1Linux 块设备之Block Layer层架构演变Linux VFS机制简析&#xff08;一&#xff09;Linux VFS机制简析&#xff08;二&#xff09;Linux Kernel文件系统写I…

keycloak入门

realm&#xff1a;领域&#xff0c;指的是在某一个软件业务领域中所涉及的用户认证授权管理相关的对象&#xff0c;在这个realm中有用户、角色、会话session等等用于认证授权管理的对象。 假设一个公司A使用一个erp系统&#xff0c;那么就可以给这个公司A设置一个realm&#xf…