前端 - 基础 表单标签 -- 表单元素( input - type属性) 文本框和密码框

表单元素  :  在表单域中可以定义各种表单元素,这些表单元素就是允许用户在表单中输入或选择

                      的内容控件。

表单元素的外观也各不一样,有小圆圈,有正方形,也有方框,乱七八糟的,各种各样,反正,只

要你上网,你百分之百就会看到各种各样的表单元素,只不过,我们不知道它是表单元素罢了 

现在呢,我们可以根据 使用场景 不同,我们可以分成 几大类 

A  :   input 输入表单元素 

B :    select  下拉表单元素 

C :    textarea  文本域元素 

< Input > 输入表单元素

#  大家肯定知道 input 是输入的意思, 而在 表单元素 中 < input > 标签用于收集用户信息 

语法规范 : 

在 <input> 标签中,包含一个 type 属性, 根据不同的 type 属性值,输入字段 拥有很多种 形式

( 可以是文本字段,复选框,掩码后的文本控件,单选按钮,按钮等 ) 

< input type=" 属性值 "  / > 

#  < input / > 标签为 单标签 

type 属性 必须包含, 属性设置不同的属性值,从而指定不同的控件类型 

      

       示例  : 

                      

              #  文本框  : 

                        

                        ===>>>

                       

                       

          #    密码框  : 

                       ​​​​​​​

                       ===>>>

                       

                     #  密码框当然得在输入密码的时候,看不见输入内容才行。

                         所以使用  input  type 属性 的  password 值即可 

                       

                     #  可以看到上面两个 < form > 标签都没有 加 属性,我们暂时 不研究这个

 

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

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

相关文章

每日学习笔记:C++ STL 的map、multimap

定义 特点 操作函数 意思就是&#xff0c;使用tuple中的元素来初始化pair&#xff0c;即string(“hello”)、complex(3.4,7.8) 元素的移除讨论

大数据架构技术选型

OLAP数据库选型对比&#xff1a; AnalyticDB(阿里&#xff09;、Hologres&#xff08;阿里&#xff09;、Doris、StarRocks、ClickHouse、Hbase AnalyticDB技术架构 db是融合数据库、大数据技术于一体的云原生企业级数据仓库服务、支持高吞吐的数据实时增删改查低延时的实时分…

stm32f103c8t6学习笔记(学习B站up江科大自化协)-USART串口-软件部分

前言&#xff1a; 本文属于软件部分&#xff0c;具体的串口硬件部分可见http://t.csdnimg.cn/afh48&#xff0c;对于串口的工作原理以及各个寄存器工作流程的记录十分详细。 一、接线图 二、stm32发送-电脑串口助手接收 1.USART初始化流程图 1.开启时钟 把需要使用的USART和…

golang面试题总结

零、go与其他语言 0、什么是面向对象 在了解 Go 语言是不是面向对象&#xff08;简称&#xff1a;OOP&#xff09; 之前&#xff0c;我们必须先知道 OOP 是啥&#xff0c;得先给他 “下定义” 根据 Wikipedia 的定义&#xff0c;我们梳理出 OOP 的几个基本认知&#xff1a; …

2024年阿里云服务器搭建幻兽帕鲁游戏_保姆级教程

玩转幻兽帕鲁服务器&#xff0c;阿里云推出新手0基础一键部署幻兽帕鲁服务器教程&#xff0c;傻瓜式一键部署&#xff0c;3分钟即可成功创建一台Palworld专属服务器&#xff0c;成本仅需26元&#xff0c;阿里云服务器网aliyunfuwuqi.com分享2024年新版基于阿里云搭建幻兽帕鲁服…

SpringBoot集成WebService

1&#xff09;添加依赖 <dependency><groupId>org.apache.cxf</groupId><artifactId>cxf-spring-boot-starter-jaxws</artifactId><version>3.3.4</version><exclusions><exclusion><groupId>javax.validation<…

【Linux】线程预备知识{远程拷贝/重入函数与volatile关键字/认识SIGCHILD信号/普通信号/实时信号}

文章目录 0.远程拷贝1.重入函数与volatile关键字2.认识SIGCHILD信号3.普通信号/实时信号 0.远程拷贝 打包资源&#xff1a;tar czf code.tgz *远程传输&#xff1a;scp code.tgz usr服务器ip:/home/usr/路径解压&#xff1a;tar xzf code.tgz 1.重入函数与volatile关键字 先看…

默写单词cpp(初学者版本)

笔摔坏了直接使用版:yum:仔细学习版:yum:1.直接使用版:yum:&#xff08;文件使用规范&#xff09;(1)文件(2)使用规范 2.仔细学习版。将会讲各个函数的功能和细节。今天太晚了&#xff0c;明天再写。 笔摔坏了 在一个阳光明媚的早晨&#xff0c;我愉快的奋笔疾书&#xff0c;抄…

推荐4个c++进度条开源库

在C中&#xff0c;有许多开源库可以帮助你创建进度条。以下是一些常用的C进度条库&#xff1a; 1. **indicators**: - GitHub链接: [https://github.com/p-ranav/indicators](https://github.com/p-ranav/indicators) - 特点: 轻量级&#xff0c;易于使用&#xff0c;支…

OpenCV学习笔记(十)——利用腐蚀和膨胀进行梯度计算以及礼帽和黑帽

梯度计算 在OpenCV中&#xff0c;梯度计算是图像处理中的一个基本操作&#xff0c;用于分析图像中像素值的变化速率的方向&#xff0c;其中梯度的方向是函数变化最快的方向&#xff0c;因此在图像中&#xff0c;沿着梯度方向可以找到灰度值变化最大的区域&#xff0c;这通常是…

我的自建博客之旅04之Halo

我的自建博客之旅04之Halo Halo是我无意间发现的一款博客框架,如果你讨厌Hexo,Vuepress等静态框架本地编辑,构建部署等方式,如果你想要一款一次搭建,前台是博客,后台是文章维护,并且支持各种定制化折腾的博客框架,可能Halo会比较适合你。 因为我个人还是比较偏技术,…

【数据结构取经之路】栈

目录 引言 栈的性质 顺序栈 栈的基本操作 初始化 销毁 插入 删除 判空 取栈顶元素 栈的大小 完整代码&#xff1a; 引言 栈(stack)&#xff0c;可以用数组实现&#xff0c;也可以用链表实现。用数组实现的栈叫顺序栈&#xff0c;用链表实现的栈叫链式栈&#…

wayland(xdg_wm_base) + egl + opengles 使用 Assimp 加载材质文件Mtl 中的纹理图片最简实例(十六)

文章目录 前言一、3d 立方体 model 属性相关文件1. cube.obj2. cube.Mtl3. 纹理图片 cordeBouee4.jpg二、代码实例1. 依赖库和头文件1.1 assimp1.2 stb_image.h2. egl_wayland_obj_cube.cpp3. Matrix.h 和 Matrix.cpp4. xdg-shell-client-protocol.h 和 xdg-shell-protocol.c5.…

SCI一区 | Matlab实现GWO-TCN-BiGRU-Attention灰狼算法优化时间卷积双向门控循环单元融合注意力机制多变量时间序列预测

SCI一区 | Matlab实现GWO-TCN-BiGRU-Attention灰狼算法优化时间卷积双向门控循环单元融合注意力机制多变量时间序列预测 目录 SCI一区 | Matlab实现GWO-TCN-BiGRU-Attention灰狼算法优化时间卷积双向门控循环单元融合注意力机制多变量时间序列预测预测效果基本介绍模型描述程序…

Hero Talk|无缝扩展:Kubernetes 上的 Amazon Aurora 分片和流量管理

亚马逊云科技 Data Hero 潘娟正在打开开源之门。作为“2020 中国开源先锋人物”以及“2021 OSCAR 尖峰开源人物”奖项获得者&#xff0c;她致力于赋能数据领域的开发者&#xff0c;助力他们把握先机。在亚马逊云科技 re:Invent 2023 大会上&#xff0c;潘娟就 Kubernetes 上的 …

【Godot4.2】 基于SurfaceTool的3D网格生成与体素网格探索

概述 说明&#xff1a;本文基础内容写于2023年6月&#xff0c;由三五篇文章汇总而成&#xff0c;因为当时写的比较潦草&#xff0c;过去时间也比较久了&#xff0c;我自己都得重新阅读和理解一番&#xff0c;才能知道自己说了什么&#xff0c;才有可能重新优化整理。 因为我对…

打造精美响应式CSS日历:从基础到高级样式

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…

ARM开发板实现24位BMP图片缩放

ARM开发板实现24位BMP图片缩放 一、linux平台bmp图片缩放 最近想在ARM开发板实现BMP图片的缩放&#xff0c;查看了一些资料&#xff0c;大家部分理论知识可参考&#xff1a; akynazh博主 &#xff0c;这位博主程序以window平台为主进行显示&#xff0c;发现在linux平台下编译…

堆排序(数据结构)

本期讲解堆排序的实现 —————————————————————— 1. 堆排序 堆排序即利用堆的思想来进行排序&#xff0c;总共分为两个步骤&#xff1a; 1. 建堆 • 升序&#xff1a;建大堆 • 降序&#xff1a;建小堆 2. 利用堆删除思想来进行排序. 建堆和堆删…

12|检索增强生成:通过RAG助力鲜花运营

什么是 RAG&#xff1f;其全称为 Retrieval-Augmented Generation&#xff0c;即检索增强生成&#xff0c;它结合了检 索和生成的能力&#xff0c;为文本序列生成任务引入外部知识。RAG 将传统的语言生成模型与大规模 的外部知识库相结合&#xff0c;使模型在生成响应或文本时可…