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.mfbz.cn/a/605132.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

恋爱中的Java多线程:从单身到共舞的浪漫指南(一)

引言:孤独的线程,寂寞的码农 开篇小剧场: ​ 深夜,孤独的程序猿凯叔接到新任务:优化程序性能,探索多线程。这一任务成了他跳出孤独、寻求生活并行美好的契机。从简单的Thread类到复杂的线程池管理&#xff…

基于二维CS-SCHT变换和扩频方法的彩色图像水印嵌入和提取算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 ............................................................. % figure; % subplot(121);…

GitLab使用记录

GitLab 文章目录 1. 常用命令1.1 配置邮箱 用户名1.2 查看配置1.3 基本语法 2. 连接gitlab3. 直接拉去项目 1. 常用命令 1.1 配置邮箱 用户名 git config --global user.name ShangzheChen git config --global user.email 735511377qq.com1.2 查看配置 cat ~/.gitconfig这…

SpringCloud微服务之Eureka、Ribbon、Nacos详解

SpringCloud微服务之Eureka、Ribbon、Nacos详解 1、认识微服务1.1、单体架构1.2、分布式架构1.3、微服务1.4、SpringCloud 2、服务拆分与远程调用2.1、服务拆分的原则2.2、服务拆分示例2.2、提供者与消费者 3、Eureka注册中心3.1、Eureka的结构和作用3.2、搭建eureka-server3.2…

图像处理:图像噪声添加

文章目录 前言一、高斯噪声二、椒盐噪声三、泊松噪声四、斑点噪声五、指数噪声六、均匀噪声总结 前言 本文主要介绍几种添加图像噪声的方法,用于数据增强等操作。 以下图为例。 一、高斯噪声 高斯噪声就是给图片添加一个服从高斯分布的噪声,可以通过调…

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

题目&#xff1a; 题解&#xff1a; class Solution {List<Integer> temp new ArrayList<Integer>();List<List<Integer>> ans new ArrayList<List<Integer>>();public List<List<Integer>> combine(int n, int k) {List&l…

Java | Leetcode Java题解之第78题子集

题目&#xff1a; 题解&#xff1a; class Solution {List<Integer> t new ArrayList<Integer>();List<List<Integer>> ans new ArrayList<List<Integer>>();public List<List<Integer>> subsets(int[] nums) {dfs(0, nums…

Pikachu 靶场 CSRF 通关解析

前言 Pikachu靶场是一种常见的网络安全训练平台&#xff0c;用于模拟真实世界中的网络攻击和防御场景。它提供了一系列的实验室环境&#xff0c;供安全专业人士、学生和爱好者练习和测试他们的技能。 Pikachu靶场的目的是帮助用户了解和掌握网络攻击的原理和技术&#xff0c;…

scala速通(精简版)

1.变量和常量 var name [:VariableType] value // variable val name [:ConstantType] value // constant1.声明变量时&#xff0c;类型可以省略 2.类型定义后就不能修改言 3.变量声明必须有初始值 4.变量&#xff0c;常量分别用var&#xff0c;val声明修饰 2.标识符命名…

Google Pixel4手机刷机+Root+逆向环境详细教程

Google Pixel4手机刷机Root逆向环境配置详细教程 刷机工具下载 Windows10、Google Pixel4手机当前安卓10系统、adb工具、要刷的谷歌原生的Android11最新刷机包、安装google usb驱动、美版临时twrp-3.6.0_11-0-flame.img和美版永久twrp-installer-3.6.0_11-0-flame.zip、Magis…

webservice和TCP类型接口测试

1.webservice类型接口 1.1.webservice类型接口介绍 Web服务&#xff08;WebService&#xff09;是一种基于网络的应用程序接口&#xff08;API&#xff09;&#xff0c;可通过网络来进行通信和交互。它们使用标准化的协议和格式来进行通信&#xff0c;最常见的是使用XML&#…

Jmeter页面汉化和字体显示过小调整

在频繁解压使用Jmeter的时候&#xff0c;经常会遇到需要将页面的英文调整为中文&#xff0c;页面文字和编辑区域内容文字显示较小的问题&#xff0c;记录一下方便以后查阅。 1.页面汉化 Jmeter在解压启动之后页面显示是英文&#xff0c;如果需要修改为中文&#xff0c;可以修改…

【Python】在Windows Server上部署Flask后端服务器

想要在Windows Server上部署flask应用&#xff0c;当然不能只下一个anaconda配完环境之后直接启动py文件&#xff0c;这样的话后台会有一段警告&#xff1a; * Serving Flask app app* Debug mode: off WARNING: This is a development server. Do not use it in a production …

【氮化镓】GaN功率器件在转换器设计中的挑战

I. 引言(INTRODUCTION) 宽带隙(WBG)器件的重要性: 引言部分首先强调了宽带隙(WBG)器件在高频、高效率电力电子技术中的关键作用。这些器件,包括碳化硅(SiC)和氮化镓(GaN),相较于传统的硅功率器件,具有显著的优势。宽带隙半导体材料的高击穿场强允许设计更薄的漂…

了解内存函数

✨✨欢迎&#x1f44d;&#x1f44d;点赞☕️☕️收藏✍✍评论 个人主页&#xff1a;秋邱博客 所属栏目&#xff1a;C语言 前言 内存函数不止malloc、calloc、realloc、free还有memcpy、memmove、memset、memcmp。前四个的头文件是<stdlib.h>,后四个的头文件是<strin…

HTML学习|网页基本信息、网页基本标签、图像标签、超链接标签、列表标签、表格标签、媒体元素、页面结构分析、iframe内联框架

网页基本信息 DOCTYPE是设置使用什么规范&#xff0c;网页整个信息都在html标签中&#xff0c;head标签里包含字符集设置&#xff0c;网页介绍等信息&#xff0c;title标签是网页的名称&#xff0c;网页的主干都在body标签中 网页基本标签 标题标签 h1~h6都是标题标签&#x…

【项目实战】使用Yolov8 + tesseract 实现身份证信息解析(OCR) + 输入可为图片或者pdf + 完整代码 + 整体方案 + 全网首发

本项目可用于实验,毕业设计参考等。整体效果如下所示: 说明:图片来源于网络,如有侵权,请联系作者删除。 目录 一 数据集制作

WPF之多种视图切换

1&#xff0c;View切换&#xff0c;效果呈现 视图1 视图2 视图3 2&#xff0c;在Xaml中添加Listview控件&#xff0c;Combobox控件。 <Grid ><Grid.RowDefinitions><RowDefinition Height"143*"/><RowDefinition Height"30"/>&l…

Ubuntu 下串口工具:Minicom、CuteCom 和 Screen

在 Ubuntu 中&#xff0c;对于串口通信工具的选择&#xff0c;虽然没有一个绝对的 “最好用” 的排名&#xff0c;但根据用户反馈和工具的流行程度&#xff0c;Minicom、CuteCom 和 Screen 这三个工具通常被认为是较为受欢迎和实用的。 一、简介&#xff1a; Minicom&#xff…

一款功能强大的网络安全综合工具-PotatoTool

一、 简介 这款工具是一款功能强大的网络安全综合工具&#xff0c;旨在为安全从业者、红蓝对抗人员和网络安全爱好者提供全面的网络安全解决方案。它集成了多种实用功能&#xff0c;包括解密、分析、扫描、溯源等&#xff0c;为用户提供了便捷的操作界面和丰富的功能选择。 二…
最新文章