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

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.mzph.cn/news/689246.shtml

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

相关文章

.net和jar包windows服务部署

一.NetCore 1.创建启动脚本run_instal.bat,例如程序文件为ApiDoc.exe set serviceName"Apidoc Web 01" set serviceFilePath%~dp0ApiDoc.exe set serviceDescription"ApiDoc 动态接口服务 web 01"sc create %serviceName% BinPath%serviceFilePath% sc c…

【Java EE初阶十四】网络编程TCP/IP协议(一)

1. 网络编程 通过网络&#xff0c;让两个主机之间能够进行通信->就这样的通信来完成一定的功能&#xff0c;进行网络编程的时候&#xff0c;需要操作系统给咱们提供一组API&#xff0c;通过这些API来完成编程&#xff1b;API可以认为是应用层和传输层之间交互的路径&#xf…

考研证件照可以自己用手机拍吗?考研证件照p过可以通过审核吗?考研证件照有什么要求

一、考研证件照可以自己用手机拍吗 现在的智能手机相机技术先进&#xff0c;大多都配备了高像素摄像头&#xff0c;使得自拍照片的质量有了大幅提升。相较于传统的证件照拍摄&#xff0c;使用手机自拍考研证件照理论上是可行的。然而&#xff0c;考研证件照需要满足一定的规定…

如何根据需求理解CPU、SoC和MCU的区别

在当今数字化的世界中&#xff0c;我们经常听到关于CPU、SoC和MCU的名词&#xff0c;它们都是计算机科学和电子工程领域中的重要组成部分。然而&#xff0c;这三者之间存在着明显的区别。本文将深入探讨CPU&#xff08;中央处理器&#xff09;、SoC&#xff08;系统芯片&#x…

阿里云服务器部署配置选择全攻略

阿里云服务器配置怎么选择&#xff1f;根据实际使用场景选择&#xff0c;个人搭建网站可选2核2G配置&#xff0c;访问量大的话可以选择2核4G配置&#xff0c;企业部署Java、Python等开发环境可以选择2核8G配置&#xff0c;企业数据库、Web应用或APP可以选择4核8G配置或4核16G配…

【正点原子STM32连载】 第五十一章 T9拼音输入法实验 摘自【正点原子】APM32E103最小系统板使用指南

1&#xff09;实验平台&#xff1a;正点原子APM32E103最小系统板 2&#xff09;平台购买地址&#xff1a;https://detail.tmall.com/item.htm?id609294757420 3&#xff09;全套实验源码手册视频下载地址&#xff1a; http://www.openedv.com/docs/boards/xiaoxitongban 第五…

Debezium发布历史137

原文地址&#xff1a; https://debezium.io/blog/2023/01/19/debezium-2-2-alpha1-released/ 欢迎关注留言&#xff0c;我是收集整理小能手&#xff0c;工具翻译&#xff0c;仅供参考&#xff0c;笔芯笔芯. Debezium 2.2.0.Alpha1 Released January 19, 2023 by Chris Cranfo…

PyTorch框架----torch.autograd

文章目录 一、Variable二、torch.autograd三、torch.autograd.backward(variables, grad_variables, retain_variablesFalse)四、自动求导机制1、从后向中排除子图2、自动求导如何编码历史信息 一、Variable Variable是PyTorch中的一个类&#xff0c;它封装了张量&#xff08;…

图像识别之ResNet(结构详解以及代码实现)

前言 在人工智能的浪潮中&#xff0c;深度学习已经成为了推动计算机视觉、自然语言处理等领域突破的关键技术。在这众多技术中&#xff0c;ResNet&#xff08;残差网络&#xff09;无疑是一个闪耀的名字。自从2015年Kaiming He等人提出ResNet架构以来&#xff0c;它不仅在图像…

前端的开发规范

作为一个程序员开发规范是相当重要的&#xff0c;因为遵守开发规范有很多好处&#xff1a; 规范的代码可以促进团队合作&#xff1b;规范的代码可以减少bug处理&#xff1b;规范的代码可以降低维护成本&#xff1b;规范的代码有助于代码审查&#xff1b;养成代码规范的习惯&am…

安全防御-第五次

新建NAT策略 新建NAT策略 双机热备 FW1 FW3 新建带宽策略 办公区限流

百度百家号旋转验证码识别研究

最近研究了一下图像识别&#xff0c;一直找到很好的应用场景&#xff0c;今天我就发现可以用百度的旋转验证码来做一个实验。没想到效果还挺好&#xff0c;下面就是实际的识别效果。 1、效果演示 2、如何识别 2.1准备数据集 首先需要使用爬虫&#xff0c;对验证码图片进行采…

引入成熟的Pytest自动化测试框架

虽然我们能使用脚本编写自动化测试框架&#xff0c;但没有必要重复找车轮子&#xff0c;引入成熟的自动化测试框架即可&#xff0c; Pytest是目前最成熟、功能最全面的Python测试框架之一&#xff0c;简单灵活、易于上手&#xff0c;可完全兼容其他测试框架如unitest&#xff…

Unittest+Selenium模块驱动自动化测试实战

UnittestSelenium自动化测试框架使用模块驱动测试模型将冗余的代码封装成类&#xff0c;且基于PageObject的自动化设计模式&#xff0c;通过分层的方式将页面对象、操作、业务分开处理。 1、首先创建自动化测试框架的文件模块架构&#xff0c;创建common、base、testcase、rep…

The Captainz NFT 概览与数据分析

作者&#xff1a;stellafootprint.network 编译&#xff1a;cicifootprint.network 数据源&#xff1a;The Captainz NFT Collection Dashboard The Captainz 是 Memeland 的旗舰系列&#xff0c;由 9,999 个实用性极强的 PFP 组成。持有者在 Memeland 宇宙中展开了一场神…

SG-9101CB(可编程+105℃晶体振荡器)

SG-9101CB 系列是一款高精度可编程性的晶体振荡器&#xff0c;能够在0.67 MHz至170 MHz的频率范围内以1ppm的步长精确调整频率。这款振荡器支持宽范围的电源电压&#xff08;1.62 V至3.63V&#xff09;&#xff0c;并提供使能&#xff08;OE&#xff09;或待机&#xff08;ST&a…

App启动优化笔记 1

app大致的启动流程。有Launcher进程,system_server进程,zygote进程,APP进程。 Launcher进程:启动activity来启动应用 system_server进程:(ams是其中的一个binder):发送一个socket消息给Zygote。 zygote进程:收到消息后,fork新的进程,---》app进程启动 APP进程:…

【复现】Panalog大数据日志审计系统 RCE漏洞_51

目录 一.概述 二 .漏洞影响 三.漏洞复现 1. 漏洞一&#xff1a; 四.修复建议&#xff1a; 五. 搜索语法&#xff1a; 六.免责声明 一.概述 Panalog大数据日志审计系统定位于将大数据产品应用于高校、 公安、 政企、 医疗、 金融、 能源等行业之中&#xff0c;针对网络流…

关于IOPS指标对性能的影响

IOPS (Input/OutputPer Second) IOPS 即每秒的输入输出量(或读写次数)&#xff0c;是衡量磁盘性能的主要指标之一。IOPS是指单位时间内系统能处理的I/O请求数量&#xff0c;一般以每秒处理的I/O请求数量为单位&#xff0c;I/O请求通常为读或写数据操作请求。随机读写频繁的应用…

【AGI视频】Sora的奇幻之旅:未来影视创作的无限可能

在五年后的未来&#xff0c;科技的发展为影视创作带来了翻天覆地的变化。其中&#xff0c;Sora视频生成软件成为了行业的翘楚&#xff0c;引领着全新的创作潮流。Sora基于先进的Transformer架构&#xff0c;将AI与人类的创造力完美结合&#xff0c;为观众带来了前所未有的视听盛…