HTML常用表单元素使用?

目录

  • 一、常用表单元素使用的关键字
  • 二、常用表单元素使用的效果与作用
    • (1)password : 保护用户的隐私
    • (2) email: 输入邮件(比如QQ邮件)
    • (3)、number : 输入框只能输入数字
    • (4)、tel : 常用于输入电话号
    • (5)、url : 用于输入网址
    • (6)、file: 用于选择文件路径
    • (7)、range:通常用于显示滑动条
    • (8)、search:通常用于当作搜索栏
    • (9)、radio:单选性别等
    • (10)、checkbox:和上一个相反,这个是多选
    • (11)、select 标签和option 标签组合
    • (12)、textarea 文本域:一般用于留言,会话等功能
    • (13)、submit 按钮:用于提交试题,个人资料等
    • (14)、reset按钮 :用于重置
    • (15)、button按钮:普通按钮

在这里插入图片描述
在这里插入图片描述

一、常用表单元素使用的关键字

<form action="提交数据的路径" method="POST/GET">
文本框:<input type="text" value="" placeHoLder="输入框提示" id="id" disabled="禁用" readonly="只读" required="输入框必填" hidden="隐藏" pattern="正则表达式" maxlength="最大长度"
minlength="最小长度" size="输入框的长度">
密码:<input type="password" value="">
email输入框:<input type="email" value="">
数字输入框:<input type="number" value="">
手机号输入框:<input type="tel" value="">
url:<input type="url" value="">
文件:<input type="file" value="">
滑块:<input type="range" value="">
搜索:<input type="search" value="">
单选框:<input type="radio" value="">
复选框:<input type="checkbox" value="">
下拉框:<select name="名字"><option value="" selected默认第一个显示></option></select>
文本域:<textarea value=""></textarea>
提交:<input type="submit" value="">
重置:<input type="reset" value="">
按钮:<input type="button" value="">
</form>

二、常用表单元素使用的效果与作用

(1)password : 保护用户的隐私

属性:password

密码:<input type="password" value="123456789">

在这里插入图片描述

(2) email: 输入邮件(比如QQ邮件)

属性:email

email输入框:<input type="email">

在这里插入图片描述

(3)、number : 输入框只能输入数字

属性:number

数字输入框:<input type="number" value="111">

在这里插入图片描述

(4)、tel : 常用于输入电话号

属性:tel

手机号输入框:<input type="tel" value="">

在这里插入图片描述

(5)、url : 用于输入网址

属性:url

url:<input type="url" value="">

在这里插入图片描述

(6)、file: 用于选择文件路径

属性:file

文件:<input type="file">

在这里插入图片描述

(7)、range:通常用于显示滑动条

属性:range

滑块:<input type="range" value="">

在这里插入图片描述

(8)、search:通常用于当作搜索栏

属性:search

搜索:<input type="search" value="">

在这里插入图片描述

(9)、radio:单选性别等

属性:radio
注意 :把input的name设置一样才能实现单选

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

在这里插入图片描述

(10)、checkbox:和上一个相反,这个是多选

属性:checkbox

爱好 : <input type="checkbox">打篮球
<input type="checkbox">踢足球
<input type="checkbox">看书

在这里插入图片描述

(11)、select 标签和option 标签组合

属性:select 和 option
注 :selected是默认显示

地区:<select name="名字"><option value="湖南">湖南</option><option value="湖北" selected>湖北</option><option value="广东">广东</option>
</select>

在这里插入图片描述

(12)、textarea 文本域:一般用于留言,会话等功能

属性:textarea

留言:<textarea value="很高兴认识你"></textarea>

在这里插入图片描述

(13)、submit 按钮:用于提交试题,个人资料等

属性:submit

提交:<input type="submit" value="提交按钮">

在这里插入图片描述

(14)、reset按钮 :用于重置

属性:reset

重置:<input type="reset" value="重置按钮">

在这里插入图片描述

(15)、button按钮:普通按钮

属性:button

按钮:<input type="button" value="普通按钮">

在这里插入图片描述

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

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

相关文章

Kubernetes实战(十二)-使用kubeconfig文件管理多套kubernetes(k8s)集群

1 概述 在生产环境中可能不止有一套kubernetes(k8s)集群&#xff0c;面对多套集群&#xff0c;运维人员可以使用kubeconfig文件管理多套kubernetes(k8s)集群&#xff0c;使用 kubeconfig 文件&#xff0c;可以组织集群、用户和命名空间&#xff0c;还可以定义上下文&#xff0…

深入理解模板引擎:解锁 Web 开发的新境界(上)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

Axure安装及面板各区域详解

目录 一、Axure简介 二、Axure安装及使用准备 2.1 Axure官网 2.2 Axure授权 2.3 Axure汉化 2.4 设置RP文件保存路径 三、Axure菜单栏的使用 3.1 新建项目 3.2 新建元件库 3.3 自动备份设置 3.4 页面画布网格设置 四、Axure工具栏 4.1 选择模式 4.1.1 相交选中 4…

【AI算力】关于国产算力的一些调研分析

随着英伟达卡被禁售&#xff0c;国产显卡市场逐渐崛起。以华为、曙光为第一梯队代表&#xff0c;壁仞、燧原、寒武纪等为第二梯队代表&#xff0c;场景覆盖从图像识别到大模型训练、推理&#xff0c;落地领域包括金融、安防、智能汽车、IOT、智能客服等行业 国内主流的GPU提供…

深度学习 Day15——P4猴痘病识别

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 文章目录 前言1 我的环境2 代码实现与执行结果2.1 前期准备2.1.1 引入库2.1.2 设置GPU&#xff08;如果设备上支持GPU就使用GPU,否则使用C…

前端食堂技术周刊第 108 期:StyleX 开源、Astro 4.0、Vitest v1、URL 设计最佳实践、INP

美味值&#xff1a;&#x1f31f;&#x1f31f;&#x1f31f;&#x1f31f;&#x1f31f; 口味&#xff1a;大红袍鲜奶茶 食堂技术周刊仓库地址&#xff1a;https://github.com/Geekhyt/weekly 大家好&#xff0c;我是童欧巴。欢迎来到前端食堂技术周刊&#xff0c;我们先来…

庙算兵棋推演平台配置

9月23开始&#xff0c;9月26完成。因为那时刚从大连回来&#xff0c;十一之后又一个紧急项目当项目负责人&#xff0c;所以隔了这么久才发出来。 我尝试进行制作平台AI&#xff0c;想在我的小平板上配好&#xff0c;最好还可以移植。于是我采用WSL&#xff08;windows自带的do…

VSCode中如何查看EDI报文?

VSCode是开发人员常用的一款软件&#xff0c;为了降低EDI报文的阅读门槛&#xff0c;知行的开发人员设计了EDI插件&#xff0c;可以在VSCode中下载使用。 如何打开一个EDI报文——VSCode EDI插件介绍 EDI插件下载流程 进入VSCode&#xff0c;打开Extensions&#xff0c;在搜索…

在Ubuntu K8s中创建vnc用于浏览器调试

拉取vnc镜像&#xff1a; ctr -n k8s.io image pull docker.io/dorowu/ubuntu-desktop-lxde-vnc:latest --platform:linux/amd64&#xff08;导出成镜像包&#xff09; ctr -n k8s.io image pull docker.io/dorowu/ubuntu-desktop-lxde-vnc:latest --platform:linux/amd64dep…

Acrobat Pro中不能使用有道词典取词翻译

编辑–>首选项–>安全性&#xff08;增强–>启动时启用保护模式&#xff08;预览&#xff09;&#xff0c;取消前面的勾即可

uniapp - 简单版本自定义tab栏切换

tab切换是APP开发最常见的功能之一&#xff0c;uniapp中提供了多种形式的tab组件供我们使用。对于简单的页面而言&#xff0c;使用tabbar组件非常方便快捷&#xff0c;可以快速实现底部导航栏的效果。对于比较复杂的页面&#xff0c;我们可以使用tab组件自由定义样式和内容 目录…

2023年医疗器械行业分析(京东医疗器械运营数据分析):10月销额增长53%

随着我国整体实力的增强、国民生活水平的提高、人口老龄化、医疗保障体系不断完善等因素的驱动&#xff0c;我国的医疗器械市场增长迅速。 根据鲸参谋电商数据分析平台的相关数据显示&#xff0c;今年10月份&#xff0c;京东平台上医疗器械市场的销量将近1200万&#xff0c;环比…

什么是rocketmq❓

在大规模分布式系统中&#xff0c;各个服务之间的通信是至关重要的&#xff0c;而RocketMQ作为一款分布式消息中间件&#xff0c;为解决这一问题提供了强大的解决方案。本文将深入探讨RocketMQ的基本概念、用途&#xff0c;以及在实际分布式系统中的作用&#xff0c;并对Produc…

SU渲染受到电脑性能影响大吗?如何提高渲染速度

一般3d设计师们在进行设计工作前都需要提供一台高配电脑&#xff0c;那么你这知道su渲染对电脑要求高吗&#xff1f;电脑带不动su怎么解决&#xff1f;su对电脑什么配件要求高&#xff1f;今天这篇文章就详细为大家带来电脑硬件对su建模渲染的影响&#xff0c;以及su渲染慢怎么…

Python基础期末复习 新手 2

虽然age 10在__init__方法中定义了一个局部变量age&#xff0c;但这个局部变量并不会影响类属性age的值。类属性是在类级别上定义的&#xff0c;不属于任何一个实例。因此&#xff0c;在创建实例s1和s2时&#xff0c;它们的age属性值都为类属性的初始值0。 尽管对类的属性值进…

cache教程 5.分布式节点的通信

0.对原教程的一些见解 其回顾完请求流程就是抽象了两个接口&#xff0c;PeerPicker和PeerGetter。这样操作&#xff0c;读者阅读时可能很难快速明白其含义&#xff0c;不好理解为什么就创建出两个接口&#xff0c;感觉会比较疑惑。原教程的评论中也有讨论这点。 本教程就先不创…

如何写好PPT报告

写好PPT的技巧和方法 PPT报告是现代工作和学习中常用的一种形式&#xff0c;它能够通过图文并茂的方式将信息传达给观众。然而&#xff0c;很多人在制作PPT报告时并不知道如何下手&#xff0c;容易出现混乱的情况。为了帮助大家写好PPT报告&#xff0c;下面总结了一些方法和…

Python爬取酷我音乐

&#x1f388; 博主&#xff1a;一只程序猿子 &#x1f388; 博客主页&#xff1a;一只程序猿子 博客主页 &#x1f388; 个人介绍&#xff1a;爱好(bushi)编程&#xff01; &#x1f388; 创作不易&#xff1a;喜欢的话麻烦您点个&#x1f44d;和⭐&#xff01; &#x1f388;…

pytest + yaml 框架 -59.用例失败重跑机制pytest-rerunfailures

前言 有些接口可能不太稳定&#xff0c;第一次跑的时候由于网络原因或者其它原因失败&#xff0c;但是重新跑2次又成功了。 对于这种需要重新跑几次的场景&#xff0c;可以使用用例失败重跑机制&#xff0c;需安装pytest-rerunfailures 插件。 场景示例 失败重跑需要依赖 py…

【Axure原型分享】3D多柱状图_中继器版

今天和大家分享3D多柱状图_中继器版的原型模板&#xff0c;鼠标移入时&#xff0c;对应区域的背景会高亮变色&#xff0c;并且显示对应柱状体的数据。那这个原型是用Axure原生元件制作的&#xff0c;样式交互都可以自行修改&#xff0c;图表数据在中继器表格里填写&#xff0c;…