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

news2024/11/19 17:30:44

初识表单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.coloradmin.cn/o/1655313.html

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

相关文章

Vue 3.3 编译宏 vue3.3新增了一些语法糖和宏,包括泛型组件、defineSlots、defineEmits、defineOptions

Vue 3.3新增了一些语法糖和宏&#xff0c;包括泛型组件、defineSlots、defineEmits、defineOptions defineProps 父组件传参 <template><Child name"my"></Child> </template> <script setup lang"ts"> import Child fro…

Java设计模式-工厂

Java设计模式中&#xff0c;工厂模式主要包括普通工厂模式以及抽象工厂模式&#xff0c;普通工厂模式是用于制造输出不同类型的对象&#xff0c;抽象工厂模式是用于制造输出不同类型的普通工厂&#xff0c;本文主要描述工厂模式的基本用法。 如上所示&#xff0c;使用普通工厂模…

牛客网刷题 | BC81 KiKi求质数个数

目前主要分为三个专栏&#xff0c;后续还会添加&#xff1a; 专栏如下&#xff1a; C语言刷题解析 C语言系列文章 我的成长经历 感谢阅读&#xff01; 初来乍到&#xff0c;如有错误请指出&#xff0c;感谢&#xff01; 描述 KiKi知道了什么是质…

android基础-多线程

多线程&#xff1a; 创建子线程&#xff0c;子线程不允许直接更新UI&#xff0c;试想下如果多个线程去更新UI&#xff0c;则会造成资源错乱&#xff0c;如果枷锁就会使得代码冗余复杂。 android异步处理&#xff1a; 另一种异步多线程方法 doInBackground是在子线程中。

【线性代数】俗说矩阵听课笔记

基础解系的概念 31线性相关&#xff0c;线性无关&#xff0c;拓展与证明 n个m维向量在n<m时可能线性相关也可能线性无关&#xff0c;线性无关时可以构成某个m维空间的一组基。m不小于n时&#xff0c;秩小于n则线性相关。 n个m维向量在n>m时可一定线性相关。低维向量一定…

运行Spring Boot项目失败?显示java: 无法访问org.springframework.boot.SpringApplication,让我来看看~

idea项目运行报错截图&#xff1a; &#xff08;1&#xff09;查看错误提示“类文件具有错误的版本 61.0, 应为 52.0”&#xff0c;61.0对应的是jdk17&#xff0c;52.0对应1.8。 通过这个网址可以查询版本&#xff1a; https://stackoverflow.com/questions/9170832/list-of-ja…

[C/C++] -- 代理模式

代理模式是一种结构型设计模式&#xff0c;允许一个对象&#xff08;代理&#xff09;控制另一个对象的访问。代理对象通常充当客户端和实际目标对象之间的中间人&#xff0c;从而控制对目标对象的访问&#xff0c;可以在访问前后进行一些额外的处理。 代理模式的优点包括&…

线程的组成、执行特点、创建的两种方式

线程的组成&#xff1a; cpu时间片 运行内存&#xff1a;栈、堆 线程的逻辑代码 线程执行的特点&#xff1a; 抢占式执行&#xff0c;结果随机&#xff0c;效率高&#xff0c;可以防止单一线程长时间独占CPU 在单核cpu中&#xff0c;宏观上同时执行&#xff0c;微观上顺序…

C++:纯虚函数

在 C 中&#xff0c;纯虚函数&#xff08;pure virtual function&#xff09;是一个在基类中声明为纯虚函数的虚函数&#xff08;如果对虚函数不了解可以去我上一篇文章&#xff1a;C:虚函数&#xff09;。它在基类中没有默认实现&#xff0c;而是要求派生类提供实现。通过声明…

stm32f103zet6_RTC_1_介绍

RTC简介 实时时钟是一个独立的定时器。 RTC模块拥有一组连续计数的计数器&#xff0c;在相应软件配置下&#xff0c;可 提供时钟日历的功能。 修改计数器的值可以重新设置系统当前的时间和日期。 RTC模块和时钟配置系统(RCC_BDCR寄存器)处于后备区域&#xff0c;即在系统复…

初学java

注意点 1.使用关键字long的时候&#xff0c;在其赋值的时候要在后面加上大写或者小写的l&#xff0c;个人推荐大写&#xff0c;小写与数‘1’难区分。 2.函数的名字要与文件夹的名字相同&#xff0c;并且文件夹后面一定要有.java。例如这个的名字是Main,函数就得用这个&#x…

SwiGLU激活函数

SwiGLU激活函数已经成为LLM的标配了。它是GLU的变体&#xff0c;公式如下&#xff1a; SwiGLU ⁡ ( x , W , V , b , c , β ) Swish ⁡ β ( x W b ) ⊗ ( x V c ) \operatorname{SwiGLU}(x, W, V, b, c, \beta)\operatorname{Swish}_\beta(x Wb) \otimes(x Vc) SwiGLU(x,…

Linux中的简单操作 ls/tar/pwd/cd/mkdir/touch 等

目录 前言 安装和卸载软件包 ls 查看指定路径下的文件和文件夹 tar 解压缩/压缩命令 pwd 查看当前路径 cd 改变目录 mkdir 创建目录 递归创建 rm rmdir 删除文件或目录 touch 创建文件 ll、echo、重定向符&#xff08;>,>>&#xff09; ll echo 重定向符…

VS编辑器下使用MFC完成水果销售系统

背景&#xff1a; 项目11&#xff1a;水果销售管理系统 &#xff08;2周&#xff09; &#xff08;一&#xff09;实验目的 通过该实验&#xff0c;使学生掌握windows程序设计的基本方法。以水果销售管理为背景&#xff0c;熟练应用数据库技术和第三方插件的嵌入技术&…

安卓自定义View

部分效果如下&#xff1a; 完整项目地址&#xff1a;https://download.csdn.net/download/qq_41733851/89282771?spm1001.2101.3001.9500

elk + filebeat 8.4.3 收集nginx日志(docker部署)

ELK filebeat docker部署 一、 elasticsearch部署1、运行elasticsearch临时配置容器2、拷贝文件目录到本地3、检查elasticsearch.yml4、删除之前elastic&#xff0c;运行正式容器5、docker logs记录启动日志 二、部署kibana1、运行kibana临时配置容器2、docker拷贝配置文件到本…

日志审计系统在提高网络安全方面具有哪些重要的作用

随着信息技术的飞速发展&#xff0c;我们正处于一个高度互联、数据驱动的网络时代。在这个时代&#xff0c;日志审计系统作为网络安全和信息管理的重要工具&#xff0c;发挥着至关重要的作用。下面德迅云安全就详细介绍下关于日志审计系统在当今网络时代的重要性。 一、什么是日…

Encoder——Decoder工作原理与代码支撑

神经网络算法 &#xff1a;一文搞懂 Encoder-Decoder&#xff08;编码器-解码器&#xff09;_有编码器和解码器的神经网络-CSDN博客这篇文章写的不错&#xff0c;从定性的角度解释了一下&#xff0c;什么是编码器与解码器&#xff0c;我再学习笔记补充的时候&#xff0c;讲一下…

LeetCode—随机链表的复制(深拷贝)

一.题目 二.思路分析 1.将拷贝节点插入到原节点后面 拷贝节点和原节点建立了一个关联关系 2.深拷贝 3.将新节点拿下来尾插形成新链表&#xff0c;恢复原链表 三.参考代码 /*** Definition for a Node.* struct Node {* int val;* struct Node *next;* struct No…

感应关盖垃圾桶项目

1.功能描述 检测靠近时&#xff0c;垃圾桶自动开盖并伴随滴一声&#xff0c;2秒后关盖 发生震动时&#xff0c;垃圾桶自动开盖并伴随滴一声&#xff0c;2秒后关盖 按下按键时&#xff0c;垃圾桶自动开盖并伴随滴一声&#xff0c;2秒后关盖 2.硬件说明 SG90舵机&#xff0c;超声…