HTML学习|初识表单post和get提交、文本框和单选框、按钮、多选框和下拉框、文本域和文件域、搜索框滑块和简单验证、表单的应用、表单初级验证

初识表单post和get提交

form标签是表单,method控制表单提交方式,get方式,表单填写的参数能够在跳转的url地址中看到,post方式是看不到的,action是向何处跳转表单数据

input标签,且type=text,是文本输入框,name设置的就是这个输入内容的参数名称

input标签,且type=password,是密码输入框,这个输入内容在页面上会变成保密的形式

input标签,且type=submit代表这是一个表单的提交按钮,value可以设置这个按钮的名称

input标签,且type=reset代表这是一个重置按钮,可以将表单输入的内容全部清除

文本框和单选框

文本框 

其中,文本输入框,也可通过value设置框中的默认值,maxlength可以设置文本框能输入的最多字符,size可以设置文本框的大小

单选框

input标签,且type=radio则代表是单选框,value代表的是选项的值,name代表的是参数名称,如果两个单选框的name一样,则在网页上勾选的时候,只能勾选其中一个

按钮、多选框、下拉框

按钮

按钮有如下四种按钮

多选框

input标签且type=checkbox的为多选框,value代表参数值,name代表参数名,页面勾选的时候即使name一样也能够勾选多个

无论是单选框还是多选框,在选项的后面加checked代表默认勾选

下拉框

select标签是下拉框,name代表参数名,option标签是一个个选项,value代表选项值,选项里加selected代表默认选项

文本域和文件域

文本域

textarea标签是文件域,name代表参数名称,cols和rows可设置文本域的宽高

文件域

input标签且type=file是文件域,name代表文件参数名

搜索框滑块和简单验证

搜索框

input标签,且type=search是搜索框,name是参数名,与文本框的区别就是在页面上,有个清除输入内容的按钮

滑块

input标签,且type=range是滑块,常用于音量的设置,name代表参数名,min和max分别代表滑块的最小值和最大值,step代表了滑块每拉取一下的变化步长

简单验证

邮箱验证

input标签且type=email,则输入的内容则会校验是否是邮箱格式

url验证

input标签且type=url,会校验输入内容是否符合url格式


数字验证

input标签且type=number,max和min设置数值能取的最大最小值,name代表参数名,step代表每次点击上或者下数字变化的步长

表单的应用

readonly

readonly代表该文本框默认值不能更改,只能看

disabled

disabled代表该选项不能够被选择

hidden

hidden可以让该输入框输入的参数或默认值在页面上不显示,但是提交的时候这个参数也会被携带

增强鼠标可用性

在一个文本上用label标签圈起来,然后for后面这个值代表如果点击这个文本要跳转到的输入框的id,比如我们设置一个id=mark的输入框,如果点击“你点我试试”,鼠标会默认选中这个输入框,方便后续输入内容

表单初级验证

placeholder

文本框后加placeholder可以设置文本框的提示内容

required

在文本框后加required,可以验证该文本框内容是否为空

pattern

在文本框后加pattern=“xxx”可以使用正则表达式来校验文本框输入内容的格式

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

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

相关文章

基于“PLUS模型+”生态系统服务多情景模拟预测实践技术应用

工业革命以来,社会生产力迅速提高,人类活动频繁,此外人口与日俱增对土地的需求与改造更加强烈,人-地关系日益紧张。此外,土地资源的不合理开发利用更是造成了水土流失、植被退化、水资源短缺、区域气候变化、生物多样性…

OceanBase 分布式数据库【信创/国产化】- OceanBase 配置项和系统变量概述

本心、输入输出、结果 文章目录 OceanBase 分布式数据库【信创/国产化】- OceanBase 配置项和系统变量概述前言OceanBase 数据更新架构OceanBase 配置项和系统变量概述配置项配置项分类配置项查询系统变量系统变量分类系统变量查询配置项与系统变量的区分OceanBase 分布式数据库…

命令行工具部署达梦数据库 DMDPC(BP 多副本架构)

解达梦数据库DPC集群的主要使用场景: DMDPC 关注和解决的是大数据、计算与存储分离、高可用、支持全部的 SQL 标准、拥有完整的事务处理能力和集群规模能够动态伸缩的业务场景: 大量的复杂查询操作要求优化器能够生成优良的执行计划,并且执…

【git】发生冲突后回滚提交

gerrit 冲突, 无法合并到主干 那么先回滚 参考这里的 reset 操作: 回滚 到上一个提交 $ git reset --soft HEAD~1 # 數字表示移動到 HEAD後面第幾個刚提交的会撤回, stash 刚刚提交的 然后去pull 最新的 修改冲突: 最后再…

MATLAB数值计算工具箱介绍

MATLAB是一个强大的数学计算平台,它提供了广泛的数值计算工具箱,这些工具箱覆盖了从基础的线性代数到复杂的数值分析和优化问题。以下是MATLAB中一些关键工具箱的详细介绍: 1. 线性代数工具箱(Linear Algebra Toolbox&#xff09…

Shell编程之条件语句和case语句

一.基本条件测试 (一)条件的格式 Shell根据命令执行后的返回值(即 $? 的值)来判断命令有无执行成功,当返回值为 0 时表示命令执行成功,返回值为非 0 时表示命令执行失败(1-255均表示失败&…

学习R语言第六天

文章目录 绘制图形的方式计算字符的数量的方式提取字符变量的方式根据名称查询前缀的方式转化大小写的方式大写小写的获取数据长度的方式生成一个序列的方式从1开始到10,每次增加2从1到3 重复2次将函数到数据框中的方式生成数据rnorm 生成30行数据,nrow是6列数据计算…

STM32、GD32驱动PCA9685控制舵机源码分享

一、PCA9685介绍 PCA9685是一种16通道PWM(脉宽调制)控制器芯片,由NXP Semiconductors公司生产。它具有高速I2C总线接口,可以通过I2C总线与微控制器或其他设备进行通信。PCA9685广泛应用于各种需要精确控制多路PWM信号的应用&…

npm install 卡在reify:rxjs: timing reifyNode的解决办法

今天要逆向跑一个electron,但是npm install一直卡在 reify:element-plus: timing reifyNode:node_modules/lodash Completed in 6664ms这里一动不动,一番研究之后发现可能跟用的镜像有关系,我原本是官方镜像,总感觉第三方镜像有一…

伪装目标检测论文阅读之Dual-SAM(CVPR-2024)

论文:link code:code Fantastic Animals and Where to Find Them:Segment Any Marine Animal with Dual SAM 摘要 作为水下智能的重要支柱,海洋动物分割(MAS)涉及对海洋环境中的动物进行分割。以往的方法在提取长范围上下文特征方面表现不佳…

Python | Leetcode Python题解之第77题组合

题目: 题解: class Solution:def combine(self, n: int, k: int) -> List[List[int]]:ans []path []def dfs(x):remain k - len(path)if not remain:ans.append(list(path))returnif n 1 - x > remain:dfs(x 1)path.append(x)dfs(x 1)path.…

如何在Python中处理图像的直方图均衡化?

在Python中,可以使用OpenCV和matplotlib库来处理图像的直方图均衡化。下面是一个简单的示例代码: import cv2 import numpy as np import matplotlib.pyplot as plt# 读取图像 image cv2.imread(image.jpg, 0)# 直方图均衡化 equ cv2.equalizeHist(im…

宁夏编程培训中心联络及介绍

版权宁夏编程培训中心 宁夏编程培训中心介绍 AI DuLuo:您好🤝 欢迎咨询宁夏编程培训中心,创始人账号 公司介绍及创始人介绍: 在职某地区阿里云计算机有限公司 国内,南非发明专利各一项,腾讯云阿里云专家&am…

vue视图不刷新强制更新数据this.$forceUpdate()

在vue中,更新视图数据,不刷新页面,需要强制更新数据才可以 前言 在对数据就行添加和删除时,发现页面视图不更新,排除发现需要强制更新才可以 点击添加或删除,新增数据和删除就行,但在不使用fo…

内容安全(AV)

防病毒网关(AV)简介 基于网络侧 识别 病毒文件,工作范围2~7层。这里的网关指的是内网和外网之间的一个关口,在此进行病毒的查杀。在深信服中就有一个EDR设备,该设备就是有两种部署,一个部署在网关&#xf…

C# 局部静态函数,封闭方法中的最佳选择

C# 局部静态函数,封闭方法中的最佳选择 简介特性 应用场景辅助计算递归与尾递归优化筛选与过滤操作查找与映射操作 生命周期静态局部函数 vs 普通局部函数性能封装性可读性 简介 C# 局部静态函数(Local Static Functions)是一种函数作用域内…

51单片机keil编程中遇到的问题(持续更新)

字符无法打印报错 查看特殊功能寄存器名字的时候也会报错,因为无法编译通过,导致头文件的定义内容无法查找 keil编译中 error C127: ‘xx’: invalid storage class 这种一般是在编写头文件或源文件时,在声明函数的结尾没有添加分号&…

在阿里云K8S容器中,部署websocket应用程序的总结

一、背景 有一个websocket应用程序,使用spring boot框架开发,http端口号是6005,提供的是websocket服务,所以它还监听一个8889端口的tcp协议。 现在要把它部署到阿里云的k8s容器里,本文着重描述service层的配置。 因…

深度解析GoLand map原理及实现,手撕源码!(一)——基本介绍,初始化,读

深度解析GoLand map原理及实现,手撕源码!(一)——基本介绍,初始化,读 一、map(1) map的初始化:(2) map的基本方法:(3) map的核心原理(4) map源码详解4.1 结构体4.1.1 hmap4.1.2 mape…

《intel开发手册卷1》学习笔记1

1、操作模式 IA-32架构支持三种基本操作模式:保护模式、实地址模式和系统管理模式。操作模式决定了哪些指令和体系结构功能是可访问的: 1)保护模式:该模式是处理器的自然状态。保护模式的功能之一是能够在受保护的多任务环境中直接执行“实地址模式”80…