html的表单标签(上):form标签和input标签

news2024/11/28 0:46:24

previewfile_1270178398

表单标签

表单是让用户输入信息的重要途径。
用表单标签来完成与服务器的一次交互,比如你登录QQ账号时的场景。

image-20240216200709856

image-20240216200729596

表单分成两个部分:

  • 表单域:包含表单元素的区域,用form标签来表示。
  • 表单控件:输入框,提交按钮等,用input标签来表示。

form标签

<form action="test.html">
	... [form 的内容]
</form>

描述了要把数据按照什么方式,提交到那个页面中。

input标签

是一个单标签,各种输入表单控件, 比如单行文本框,按钮, 单选框, 复选框.

  • type(必须有), 取值种类很多,比如button, checkbox, text, file, image, password, radio 等.
  • name: 给 input 标签起了个名字, 尤其是对于 单选按钮, 具有相同的 name 才能多选一.
  • value: input 中的默认值.
  • checked: 默认被选中(用于单选按钮和多选按钮) .
  • maxlength: 设定最大长度.

可以通过对type进行对应的取值,来控制input的类型

单行输入文本框

示例代码:

image-20240217225527522

运行效果:

image-20240217230307470

密码框

示例代码:

image-20240218121157249

运行效果:

image-20240218114436271

单选框

单选框之间必须具备相同的name属性, 才能实现多选一效果

示例代码:
image-20240218122817541

运行效果:

image-20240218121526698

性别<input type="radio" name="gender"><input type="radio" name="gender" checked="checked">

上述代码会默认选择加了checked="checked"的选项,即会默认选择女

性别<input type="radio" name="gender" checked="checked"><input type="radio" name="gender" checked="checked">

如果2个选项都加了checked="checked",默认选择那个选项,取决于浏览器,不同的浏览器有不同的选择。

复选框

示例代码:

image-20240218161728143

运行效果:

image-20240218161552115

普通按钮

按钮通常和 JS 代码搭配使用

示例代码:

image-20240218162436823

运行效果:
image-20240218162608025

提交按钮&清空按钮

提交按钮和清空按钮必须放到 form 标签内。
提交按钮通常情况下,将用户在前端提交的数据提交到服务器上,清空按钮点击后会将 form 内所有的用户输入内容重置。

image-20240218163847431

点击提交之后的效果
image-20240218163930993

重置的效果
image-20240218164004885

选择文件

点击选择文件, 会弹出对话框, 选择文件
示例代码:

image-20240218164652058

运行结果:
1.image-20240218164749448

2.image-20240218164822905

3.image-20240218164851907

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

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

相关文章

48 slab 的实现

前言 这里说的是 内核中分配小对象的一种内存分配方式 slab 呵呵 经典程度不必多说了, 内核使用的大多数数据结构 基本上是基于 slab 进行内存分配的 这里 我们来看一下 slab 如何分配对象 几个分配层级, c->free_list, c->page, c->partial, new_slab 1. 先…

【HarmonyOS】【DevEco ohpm ERROR: NOTFOUND package “@ohos/hypium“如何解决

参考 &#xff1a;&#xff08;无效&#xff09; 华为开发者论坛 DevEco创建项目时的错误解决_6 月 优质更文活动_路北路陈_InfoQ写作社区 解决&#xff1a; HormonyOS-DevEco Studio新建空项目ERROR解决_oh_modules\ohos\hypium-CSDN博客 将 .ohpm文件夹中的hypium文件夹复…

Openharmony - HDF驱动小示例和测试程序

By: fulinux E-mail: fulinux@sina.com Blog: https://blog.csdn.net/fulinus 喜欢的盆友欢迎点赞和订阅! 你的喜欢就是我写作的动力! 目录 1. 创建KHDF示例驱动1.1. 创建KHDF项目1.2. HDF驱动程序实现1.2.1. 驱动入口1.2.2. 实现Dispatch方法1.2.3. 硬件业务初始化与释放1.2…

(每日持续更新)信息系统项目管理(第四版)(高级项目管理)考试重点整理第10章 项目进度管理(六)

博主2023年11月通过了信息系统项目管理的考试&#xff0c;考试过程中发现考试的内容全部是教材中的内容&#xff0c;非常符合我学习的思路&#xff0c;因此博主想通过该平台把自己学习过程中的经验和教材博主认为重要的知识点分享给大家&#xff0c;希望更多的人能够通过考试&a…

Flink Catalog 解读与同步 Hudi 表元数据的最佳实践

博主历时三年精心创作的《大数据平台架构与原型实现&#xff1a;数据中台建设实战》一书现已由知名IT图书品牌电子工业出版社博文视点出版发行&#xff0c;点击《重磅推荐&#xff1a;建大数据平台太难了&#xff01;给我发个工程原型吧&#xff01;》了解图书详情&#xff0c;…

python-Scrapy框架入门1111111111111

此网站爬取江南大学官网新闻信息 https://news.jiangnan.edu.cn/yw.htm Scrapy安装 mac | Linux : pip install scrapy windows: pip install wheelpip install pywin32安装Twisted &#xff1a; pip install Twisted_iocpsupport-1.0.2-cp310-cp310-win_amd64.whl (该文件去…

使用Nginx或者Fiddler快速代理调试

1 背景问题 在分析业务系统程序问题时,存在服务系统环境是其它部门或者其它小组搭建或运维的,并且现在微服务时代,服务多且复杂,在个人机器上搭建起如此环境,要么费事费力,要么不具备充足条件。 急需有一种方法或者工具可以快速辅助调试定位分析问题。本文下面介绍代理方…

算法沉淀——多源 BFS(leetcode真题剖析)

算法沉淀——多源 BFS&#xff08;leetcode真题剖析&#xff09; 01.矩阵02.飞地的数量03.地图中的最高点04.地图分析 多源 BFS 是指从多个源点同时进行广度优先搜索的算法。在传统的 BFS 中&#xff0c;我们通常从一个起始点开始&#xff0c;逐层遍历所有的相邻节点。而在多…

IDEA-常用插件

1、Mybatis Log Free 当我们使用mybatis log在控制台输出sql 内容&#xff0c;输出内容将语句与参数分开打印&#xff0c;还需要手动将参数替换到指定位置。 使用对应插件后&#xff0c;自动将输出内容组装成完整的可直接执行的SQL 在插件市场 查看对应名称&#xff0c;并安装。…

KMPC++(Acwing)

代码&#xff1a; #include <iostream>using namespace std;const int N 100010, M 1000010;int n, m; int ne[N]; char s[M], p[N];int main() {cin >> n >> p 1 >> m >> s 1;for (int i 2, j 0; i < n; i ){while (j && p[…

Academic Inquiry|投稿状态分享(ACS,Wiley,RSC,Elsevier,MDPI,Springer Nature出版社)

作为科研人员&#xff0c;我们经常会面临着向学术期刊投稿的问题。一般来说&#xff0c;期刊的投稿状态会在官方网站上进行公示&#xff0c;我们可以通过期刊的官方网站或者投稿系统查询到我们投稿的论文的状态&#xff0c;对于不同的期刊在投稿系统中会有不同的显示。 说明&am…

APP广告变现有哪些途径?哪种变现效果好?

无论哪种类型的APP都可以通过接入广告实现商业化变现&#xff0c;作为互联网广告载体的APP&#xff0c;比线下传统广告位更具有优势&#xff0c;不受地域限制&#xff0c;可以让广告的覆盖面更广。通过丰富的广告形式&#xff0c;精准的目标用户的画像&#xff0c;可以更好实现…

lazada、速卖通卖家如何掌握自养号测评技巧打造高评价产品?

做跨境电商卖家都知道&#xff0c;国外的买家购物比较理性&#xff0c;也喜欢货比三家&#xff0c;所以店铺想要留住客户&#xff0c;就需要一些优质的产品来吸引他们。产品评价是卖家获取买家信任的重要途径&#xff0c;评价越高的产品&#xff0c;销量也就越好。 尤其是 Shop…

ClickHouse监控及备份

第1章 ClickHouse监控概述 第2章 Prometheus&Grafana的安装 第3章 ClickHouse配置 第4章 Grafana集成Prometheus 第5章 备份及恢复

佳能2580的下载手册

凡是和电子产品有关的产品其内部都开始不断地进行内卷&#xff0c;在不断地内卷背后&#xff0c;意味着科技更新和换代&#xff0c;自己也入手了一台佳能2580的打印机&#xff0c;一台相对比较老式的打印机&#xff0c;以此不断地自己想要进行打印的需要。 下载的基础步骤&…

应急响应实战笔记02日志分析篇(5)

第5篇:MySQL日志分析 常见的数据库攻击包括弱口令、SQL注入、提升权限、窃取备份等。对数据库日志进行分析&#xff0c;可以发现攻击行为&#xff0c;进一步还原攻击场景及追溯攻击源。 0x01 Mysql日志分析 general query log能记录成功连接和每次执行的查询&#xff0c;我们…

【算法】基础算法002之滑动窗口(二)

&#x1f440;樊梓慕&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》《C》《Linux》《算法》 &#x1f31d;每一个不曾起舞的日子&#xff0c;都是对生命的辜负 目录 前言 5.水果成篮&#xff…

jq 图片懒加载 + Vue-Lazyload

jq原生 图片 懒加载 <!DOCTYPE html> <html lang"zh-cn"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv"X-UA-Compati…

《2024巨量引擎日化行业白皮书》丨附下载

✦ ✦✦ ✦✦ ✦✦ ✦ 中国日化行业在2022年短暂承压之后&#xff0c;随着生活恢复常态&#xff0c;迎来新的发展契机&#xff0c;2023年呈回稳向上态势。以抖音为代表的内容电商是行业增长的主要驱动力&#xff0c;内容场和货架场互通互联&#xff0c;促进行业全域化释放潜能…

从零开始手写mmo游戏从框架到爆炸(十二)— 角色设定

导航&#xff1a;从零开始手写mmo游戏从框架到爆炸&#xff08;零&#xff09;—— 导航-CSDN博客 写了这么多的框架&#xff0c;说好的mmo游戏呢&#xff1f;所以我们暂时按下框架不表&#xff0c;这几篇我们设计英雄角色、怪物、技能和地图。本篇我们来对游戏角色…