html之为什么使用表单,常用表单元素使用?

文章目录

  • 一、为什么使用表单呢?
  • 二、常用表单元素使用
  • 三、总结


一、为什么使用表单呢?

为什么使用表单呢,使用表单是为了更好的收集用户数据,并且安全

二、常用表单元素使用

1、password密码框
密码框:会隐藏数据,以防给他人看见

<input type="password">

运行结果:
在这里插入图片描述

2、text文本框
文本框:定义用于文本输入的单行输入字段

<input type="text">

运行结果:
在这里插入图片描述

3、button普通按钮
普通按钮:普通按钮在form标签里会提交数据。此时普通按钮在form里面就会有提交的功能和提交按钮功能一样。

<input type="button">

运行结果:
在这里插入图片描述

4、submit提交按钮
提交按钮:提交表单的按钮

<input type="submit" value="提交">

运行结果:
在这里插入图片描述

5、file文件域
文件域:选择文件的地方

<input type="file">

运行结果:
在这里插入图片描述

7、checkbox复选框
复选框:可以多选

<input TYPE="checkbox">

运行结果:
在这里插入图片描述

8、radio单选按钮
checked默认选中
单选按钮:允许用户在有限数量的选项中选择其中之一

<input type="radio" checked>

运行结果:
在这里插入图片描述

9、textarea文本域
文本域:一般存放很多数据的

<textarea rows="" cols="每行中的字符数"" ></textarea>

运行结果:
在这里插入图片描述

10、select下拉框
selected为默认选中
下拉框:只能选择一项,但有多项可选

<select><option>1</option><option selected>2</option><option>3</option></select>

运行结果:
在这里插入图片描述

11、reset重置按钮
重置按钮:重置文件,重新输入

<input type="reset" value="重置">

运行结果:
在这里插入图片描述

12、number数字框
数字框:只能输入数字的框

<strong>数字框</strong>
<input type="number">

运行结果:
在这里插入图片描述

13、size长度宽度
长度宽度:设置文本框的宽度长度

<input type="text" size="长度">

运行结果:
在这里插入图片描述

三、总结

作用关键单词
文本框text
密码框password
普通按钮button
提交按钮submit
文件域file
重置按钮reset
数字框number
下拉框select option
下拉框默认选中selected
复选框checkbox
数字框最小min
数字框最大max
文本框最大输入maxlength
长度宽度size

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

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

相关文章

网络摄像头爆破实战

*** 重要说明&#xff1a;仅用于交流网络安全测试技术&#xff0c;并唤起大家对网络安全的重视&#xff0c;如用本文的技术干违法的事情&#xff0c;博主概不负责。*** 文章目录 前言1. 发现摄像头2. 发现端口3. 确定品牌信息4. 确定RTSP地址5. 获取视频流6. 获取密码7. 再次获…

flutter学习-day20-使用SafeArea组件处理各机型的安全距离

&#x1f4da; 目录 介绍分析示例和效果图特殊情况 1. 介绍 安全区域&#xff0c;指的是移动端设备的可视窗口范围。处于安全区域的内容不受圆角、刘海屏、iPhone 小黑条、状态栏等的影响&#xff0c;也就是说&#xff0c;我们要做好适配&#xff0c;必须保证页面可视、可操作…

【资源】stable diffusion常用checkpoint

翻墙下载实在太慢了&#xff0c;还不稳定&#xff0c;就把常用的一些checkpoint传网盘了&#xff0c;需要自取~ clip-vit-large-patch14 脸书&#xff1a;openai/clip-vit-large-patch14 Hugging Face 链接&#xff1a;https://pan.baidu.com/s/1dg3XQmcYMoHtNKLqlrBVzQ?p…

亚马逊鲲鹏系统全自动化操作注册下单更快捷

亚马逊鲲鹏系统的强大崛起&#xff0c;让买家号的注册、养号、下单留评等繁琐任务迎来了一场全新的自动化革命。这一创新性软件系统的横空出世&#xff0c;为广大亚马逊卖家提供了一种高效、智能的解决方案&#xff0c;成功摆脱了繁重的手动操作。 在这一系统中&#xff0c;买家…

安卓恢复指南:五种安卓数据恢复软件推荐

我们的手机随身携带。我们抓住他们快速拍照、发送消息并保持娱乐。有时我们对它们过于冒险&#xff0c;将它们扔在混凝土或水中&#xff0c;安装我们不应该安装的软件&#xff0c;然后将它们留在电影中或公园的长椅上。 如果您要在任何地方丢失重要数据&#xff0c;很可能是在…

【Qt-数据库】

Qt编程指南 ■ SQLite■ CSV■ JSON ■ SQLite Qt 提供了很多操作数据库的类&#xff0c; SQLite 是非常小的&#xff0c;是轻量级的&#xff0c;完全配置时小于 400KiB&#xff0c;省略可选功能配置时小于 250KiB。 SQLite 是一个进程内的库&#xff0c;实现了自给自足的、无…

Cesium问题汇总

引入图片报错&#xff0c;Error loading image for billboard: [object Event] 解决方法&#xff1a;可以import或require引入一下再应用

C# WPF上位机开发(扩展上位机之外的技能)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 如果把c# wpf只是看成是一个做界面的框架&#xff0c;那确实有点狭隘了。单独的上位机软件&#xff0c;如果不需要上下游的支持&#xff0c;没有与…

hive中struct相关函数总结

目录 hive官方函数解释示例实战 hive官方函数解释 hive官网函数大全地址&#xff1a;添加链接描述 Return TypeNameDescriptionstructstruct(val1, val2, val3, …)Creates a struct with the given field values. Struct field names will be col1, col2, …structnamed_str…

linux中top参数详解

top命令是Linux下常用的性能分析工具&#xff0c;能够实时显示系统中各个进程的资源占用状况&#xff0c;类似于Windows的任务管理器 top参数详解 第一行&#xff0c;任务队列信息&#xff0c;同 uptime 命令的执行结果 系统时间&#xff1a;07:27:05 运行时间&#xff1a;up …

Oracle查询重复数据取第二行,好用来删除重复数据

Oracle查询重复数据取第二行&#xff0c;好用来删除重复数据 SELECT * FROM ( SELECT e.* , ROW_NUMBER() over(PARTITION BY product_category_id,model_size_id ORDER BY product_category_id,model_size_id) rn FROM equ_check_rules e ) s WHERE rn 2;

微信小程序的bindtap和catchtap的区别

一. 事件 1.事件是视图层到逻辑层的通讯方式。 2. 事件可以将用户的行为反馈到逻辑层进行处理。 3. 事件可以绑定在组件上&#xff0c;当达到触发事件&#xff0c;就会执行逻辑层中对应的事件处理函数。 二. 如何使用事件 1. 简单来说就是将事件绑定到组件上面&#xff0c;bi…

Plantuml之序列图语法介绍(十七)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

阿里云服务器华北3(张家口)暂时无法办理经营性ICP许可证

阿里云服务器的华北 3&#xff08;张家口&#xff09;地域暂时无法办理经营性ICP许可证&#xff0c;如有经营性ICP业务请勿选择此地域。如果需要办理经营性ICP业务的用户&#xff0c;不需要选择华北3&#xff08;张家口&#xff09;地域&#xff0c;可以选择华北2&#xff08;北…

springboot对接WebSocket实现消息推送

1.修改pom文件 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency> 2.增加配置WebSocketConfig.java import org.springframework.context.annotation.Bean…

实训4---硬件部分---点灯实验--按键控制灯实验--uart串口实验

目录 三、硬件部分 【1】点灯实验 【2】按键控制灯实验 【3】uart串口实验 核心代码&#xff1a; 实验视频 实现流水灯 uart串口实验 三、硬件部分 GPIO 【1】点灯实验 1.首先找到要点的灯&#xff0c;在板子上看到对应的白色丝印&#xff0c;比如绿灯D10.然后打开底板…

服务器数据恢复-raid6离线磁盘强制上线后分区打不开的数据恢复案例

服务器数据恢复环境&#xff1a; 服务器上有一组由12块硬盘组建的raid6磁盘阵列&#xff0c;raid6阵列上层有一个lun&#xff0c;映射到WINDOWS系统上使用&#xff0c;WINDOWS系统划分了一个GPT分区。 服务器故障&分析&#xff1a; 服务器在运行过程中突然无法访问。对服务…

【开题报告】基于SpringBoot的篮球社团管理系统设计与实现

1.研究背景 基于Spring Boot的篮球社团管理系统设计与实现的选题背景可以从以下几个方面展开&#xff1a; 社团管理需求&#xff1a; 在大学校园和社区中&#xff0c;篮球社团是一个非常活跃的组织形式&#xff0c;拥有众多会员和参与者。然而&#xff0c;传统的社团管理方式…

(二)MaterializedMySQL具体实施步骤举例

要将 MySQL 中的 test 数据库实时同步到位于同一台服务器&#xff08;IP 地址为 192.168.197.128&#xff09;上的 ClickHouse&#xff0c;您可以使用 MaterializedMySQL 引擎。以下是详细的步骤&#xff1a; 1. 准备工作 确保您的 MySQL 和 ClickHouse 服务都在运行&#xf…

四种NAT的网络结构

四种NAT的网络结构 引言1 完全圆锥型NAT2 IP限制圆锥型NAT3 Port限制圆锥型NAT4 对称型NAT5 总结 引言 NAT是将内网地址映射转换为外网地址的一种地址转换方式&#xff0c;这节省了有限的IP地址资源。一般来讲&#xff0c;分为对称型NAT和圆锥形NAT&#xff0c;其中圆锥形NAT又…