当前位置: 首页 > news >正文

【零基础入门前端系列】—表单(七)

【零基础入门前端系列】—表单(七)

一、什么是表单

表单在Web网页中用来给访问者填写信息,从而采集客户信息端,使得网页具有交互功能。一般是将表单设计在一个HTML文档中,当用户填写完信息后做提交操作,于是表单的内容就从客户端的浏览器传到服务器上,经过服务器的ASP或PHP等处理后,再将用户所需要的信息传送到客户端的浏览器上,这样网页就具有了交互性
在这里插入图片描述

在这里插入图片描述

🎈get和post的区别

1、数据的提交方式,get把提交的数据url可以看到,post看不到

2、get一般是用于提交少量的数据,post用于提交大量的数据

计算机中的位:二进制数系统中,每个0或1就是一个位,位是数据存储的最小单位。其中8位为一个字节。计算机中的CPU位数指的是CPU一次性能处理的最大位数。例如32位计算机的CPU一次最多能处理32位数据。
在这里插入图片描述

二、表单元素

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
表单元素的属性

  • type:表单元素的类型
  • name:表单元素的名称
  • checked:默认被选中,配合单选按钮和多选按钮使用
  • selected:默认显示 配合option使用
  • disabled:禁用
  • readonly:只读

三、HTML5新增type类型

在这里插入图片描述

  <form action="" method="post"><p>邮箱:<input type="email"></p><p>网址:<input type="url"></p><p>搜索:<input type="search"></p><p>数字:<input type="number" min="0" max="100" value="85" step="5"></p><p>范围(滑块): <input type="range" min="0" max="100" value="20" step="10"></p><p>颜色:<input type="color"></p><p>电话:<input type="tel"></p><p>日期:<input type="date"></p><p>周:<input type="week"></p><p>月:<input type="month"></p></form>

在这里插入图片描述

四、HTML5新增属性

(一)、autofocus属性

autofocus属性规定在页面加载时,自动获取焦点
注意:autofocus属性适用于所有input标签的类型

 Username: <input type="text" name="username" autofocus>

(二)、multiple属性

  • 该属性规定输入域中可以选择多个值
  • 注意:该属性适用于以下类型的input标签:email和file
  <input type="email" multiple>

(三)、placeholder属性

该属性提供一种提示(hint),描述输入域所期待的值

用户名:<input type="text" placeholder="请输入用户名">

在这里插入图片描述

(四)、required属性

required属性规定必须在提交之前写入域(不能为空)

Name: <input type="text" name="username" required>

在这里插入图片描述

相关文章:

【零基础入门前端系列】—表单(七)

【零基础入门前端系列】—表单&#xff08;七&#xff09; 一、什么是表单 表单在Web网页中用来给访问者填写信息&#xff0c;从而采集客户信息端&#xff0c;使得网页具有交互功能。一般是将表单设计在一个HTML文档中&#xff0c;当用户填写完信息后做提交操作&#xff0c;于…...

Linux安装python3

Linux安装python3一.介绍二.下载三.配置1.文件夹2.安装依赖3.安装4.配置4.1python关系4.2配置测试-映射python3文件4.2.1 不用设置默认python3为默认版本4.2.2 将python3设置默认版本一.介绍 因为我的Centos7虚拟机里面只有python2.7.5&#xff0c;我想安装一个python3但是还要…...

怎么通过中级职称有窍门吗?

中级职称评审对人才加薪、升职自然不必说&#xff0c;更重要的是职称证书对于公司和企业同样具有重要的价值和意义&#xff0c;因此只要是说公司办理资质或者有项目招投标的公司对于人才参加中级职称评审毫无疑问会给予大力支持&#xff0c;既然工程师职称有这么多的好处&#…...

SAP ABAP根据事务码查找增强最直接的方法

下面是为任意事务代码查找用户出口的步骤&#xff1a; 方法一&#xff1a; 第 1 步&#xff1a;使用 事务代码&#xff1a;SE93。输入您要搜索用户出口的 事务代码。 在我们的场景中&#xff0c;我们将使用 CO11N。 第 2 步&#xff1a;点击显示&#xff1a; 第 3 步&#xf…...

HTTP协议——详细讲解

目录 一、HTTP协议 1.http 2.url url的组成&#xff1a; url的保留字符&#xff1a; 3.http协议格式​编辑 ①http request ②http response 4.对request做出响应 5.GET与POST方法 ①GET ②POST 7.HTTP常见Header ①Content-Type:: 数据类型(text/html等)在上文…...

echonet-dynamic代码解读

1 综述 一共是这些代码&#xff0c;我们主要看echo.py&#xff0c;segmentation.py&#xff0c;video.py&#xff0c;config.py。 2 配置文件config.py 基于配置文件设置路径。 """Sets paths based on configuration files."""import conf…...

大气温室气体浓度不断增加,导致气候变暖加剧,随之会引发一系列气象、生态和环境灾害怎样解决?

大气温室气体浓度不断增加&#xff0c;导致气候变暖加剧&#xff0c;随之会引发一系列气象、生态和环境灾害。如何降低温室气体浓度和应对气候变化已成为全球关注的焦点。海洋是地球上最大的“碳库”,“蓝碳”即海洋活动以及海洋生物&#xff08;特别是红树林、盐沼和海草&…...

字符串内存分配

涉及三块区域&#xff1a;栈&#xff0c;堆&#xff0c;字符串常量池&#xff08;jdk1.7之前在方法区&#xff0c;jdk1.7之后在堆中&#xff09; 关于字符串常量池到底在不在堆中&#xff1a; jdk1.6及以前&#xff0c;方法区独立存在&#xff08;不在堆里面&#xff09;&…...

CHI协议通道概念

通道定义为一组结点之间的通信信号。CHI协议定义了四种通道&#xff0c;请求REQ、响应RSP、侦听SNP和数据DAT。 RN结点上CHI协议通道信号组包括&#xff1a; 请求发送端信号&#xff0c;RN结点发送读/写等请求&#xff0c;从不接收请求响应接收端信号&#xff0c;RN结点接收来…...

XQuery 简介

XQuery 简介 解释 XQuery 最佳方式是这样讲&#xff1a;XQuery 相对于 XML 的关系&#xff0c;等同于 SQL 相对于数据库表的关系。 XQuery 被设计用来查询 XML 数据 - 不仅仅限于 XML 文件&#xff0c;还包括任何可以 XML 形态呈现的数据&#xff0c;包括数据库。 您应该具备的…...

Spring的Bean的生命周期与自动注入细节

1. Bean的生命周期 通过一个LifeCycleBean和一个MyBeanPostProcessor来观察Bean的生命周期: 构造(实例化)->依赖注入(前后处理)->初始化(前后处理)->销毁 LifeCycleBean Component public class LifeCycleBean {private static final Logger log LoggerFactory.g…...

谷粒商城:订单中心概念解析

1、订单中心 电商系统涉及到 3 流&#xff0c;分别时信息流&#xff0c;资金流&#xff0c;物流&#xff0c;而订单系统作为中枢将三者有机的集 合起来。 订单模块是电商系统的枢纽&#xff0c;在订单这个环节上需求获取多个模块的数据和信息&#xff0c;同时对这 些信息进行加…...

快递员配送手机卡,要求当面激活有“猫腻”吗?

咨询&#xff1a;快递员配送手机卡&#xff0c;要求当面激活有“猫腻”吗&#xff1f;有些朋友可能在网上看到了一些关于快递小哥激活会采集信息的文章&#xff0c;所以觉得让快递小哥激活流量卡并不安全&#xff0c;其实&#xff0c;哪有这么多的套路&#xff0c;只要你自己在…...

Sage X3 ERP的称重插件帮助食品和化工企业实现精细化管理

目录 需要称重插件管理的行业客户 Sage X3 ERP称重插件管理的两个关键单位 Sage X3 ERP称重插件的特色 Sage X3 ERP称重插件管理的重要性 需要称重插件管理的行业客户 术语“实际重量”表示在销售和运输时捕获的物品重量。生产销售家禽、肥料、钢材或任何其他需要跟踪实…...

【笔试强训】Day_01

目录 一、选择题 1、 2、 3、 4、 5、 6、 7、 8、 9、 10、 二、编程题 1、组队竞赛 2、删除公共字符 一、选择题 1、 以下for循环的执行次数是&#xff08;&#xff09; for(int x 0, y 0; (y 123) && (x < 4); x); A 、是无限循环 B 、循环次…...

字节跳动青训营--前端day9

文章目录前言PC web端一、 前端Debug的特点二、 前端Debug的方式1. 浏览器动态修改元素和样式2. Console3. Sorce Tab4. NetWork5. Application6. Performancee7. Lighthouse移动端调试IOSAndroid通过代理工具调试前言 仅以此文章记录学习。 PC web端 一、 前端Debug的特点 …...

如何把模糊的照片还原?

在我们工作和学习中&#xff0c;经常需要各种各样的照片&#xff0c;方便我们需要时可以使用。比如写文档就需要添加图片、或者上传文章、视频等都需要使用图片。由于网络上的图片质量都不一样&#xff0c;难免会遇到不能满足自己的需求。如果是遇到了模糊的照片&#xff0c;如…...

29-Golang中的切片

Golang中的切片基本介绍切片在内存中的形式切片使用的三种方式方式一&#xff1a;方式二&#xff1a;方式三&#xff1a;切片使用的区别切片的遍历切片注意事项和细节说明append函数切片的拷贝操作string和slice基本介绍 1.切片是数组的一个引用&#xff0c;因此切片是引用类型…...

闲聊一下开源

今天看了下中国开源开发者报告&#xff0c;感觉收货不少&#xff0c;针对里面的内容&#xff0c;我也加入一些自己的理解&#xff0c;写下来和大家一起闲聊一下。 AI 时至今日&#xff0c;我说一句AI已经在我国几乎各个行业都能找到应用&#xff0c;应该没人反对吧&#xff1…...

用这4招优雅的实现Spring Boot 异步线程间数据传递

Spring Boot 自定义线程池实现异步开发相信大家都了解&#xff0c;但是在实际开发中需要在父子线程之间传递一些数据&#xff0c;比如用户信息&#xff0c;链路信息等等 比如用户登录信息使用ThreadLocal存放保证线程隔离&#xff0c;代码如下&#xff1a; /*** author 公众号…...

CasRel开源镜像部署教程:适配低显存(12GB)GPU的轻量级方案

CasRel开源镜像部署教程&#xff1a;适配低显存&#xff08;12GB&#xff09;GPU的轻量级方案 1. 前言&#xff1a;为什么选择这个方案 如果你正在处理文本数据&#xff0c;想要自动提取人物、地点、事件之间的关系&#xff0c;那么关系抽取技术就是你需要的工具。CasRel作为…...

数智驱动 人才筑基——拔尖创新人才与卓越工程师培养论坛举行

3月22日&#xff0c;第二届高等院校新工科人才培养暨产教融合发展大会在北京举行。大会以“科技创新 智造未来”为主题&#xff0c;来自全国各地的本科院校、职业院校、行业企业以及媒体等1000余位嘉宾参会。22日下午&#xff0c;数智驱动 人才筑基——拔尖创新人才与卓越工程师…...

机器人路径规划算法之VFH算法详解+MATLAB代码实现

目录 一、 运作原理&#xff1a;三步把地图变成方向 1. 建图&#xff1a;构建直方图网格&#xff08;Histogram Grid&#xff09; 2. 降维&#xff1a;生成极坐标直方图&#xff08;Polar Histogram&#xff09; 3. 决策&#xff1a;代价函数与山谷选择 二、 算法演进&…...

基于WebSocket与Protobuf协议的抖音直播间实时数据采集方案

基于WebSocket与Protobuf协议的抖音直播间实时数据采集方案 【免费下载链接】DouyinLiveWebFetcher 抖音直播间网页版的弹幕数据抓取&#xff08;2024最新版本&#xff09; 项目地址: https://gitcode.com/gh_mirrors/do/DouyinLiveWebFetcher 技术背景与挑战 在当今直…...

Greasy Fork:开源用户脚本平台的价值探索与实践指南

Greasy Fork&#xff1a;开源用户脚本平台的价值探索与实践指南 【免费下载链接】greasyfork An online repository of user scripts. 项目地址: https://gitcode.com/gh_mirrors/gr/greasyfork 一、价值定位&#xff1a;重新定义浏览器增强体验 1.1 开源平台的核心价值…...

从4G到RedCap:手把手教你升级老旧工业设备的无线通信模块(附功耗测试数据)

从4G到RedCap&#xff1a;工业设备无线通信模块升级实战指南 在工业物联网快速发展的今天&#xff0c;老旧设备的通信模块升级成为许多工厂面临的现实挑战。传统4G模块虽然稳定可靠&#xff0c;但面对5G时代RedCap技术带来的低功耗、低成本优势&#xff0c;升级改造已成为提升设…...

如何高效访问优质内容?bypass-paywalls-chrome-clean工具全方位使用指南

如何高效访问优质内容&#xff1f;bypass-paywalls-chrome-clean工具全方位使用指南 【免费下载链接】bypass-paywalls-chrome-clean 项目地址: https://gitcode.com/GitHub_Trending/by/bypass-paywalls-chrome-clean 在信息爆炸的数字时代&#xff0c;大量优质内容被…...

Windows虚拟控制器驱动完全指南:如何用ViGEmBus实现游戏设备模拟

Windows虚拟控制器驱动完全指南&#xff1a;如何用ViGEmBus实现游戏设备模拟 【免费下载链接】ViGEmBus Windows kernel-mode driver emulating well-known USB game controllers. 项目地址: https://gitcode.com/gh_mirrors/vi/ViGEmBus 你是否曾因游戏只支持特定手柄而…...

Llama-3.2V-11B-cot镜像免配置:内置模型加载进度条与超时重试机制

Llama-3.2V-11B-cot镜像免配置&#xff1a;内置模型加载进度条与超时重试机制 1. 项目概述 Llama-3.2V-11B-cot是基于Meta Llama-3.2V-11B-cot多模态大模型开发的高性能视觉推理工具&#xff0c;专为双卡4090环境深度优化。这个工具解决了传统大模型部署中的多个痛点&#xf…...

【PyCon 2024核心议题首发】:CPython 3.13 asyncio重构内幕——原生任务取消语义、零拷贝Socket API与异步GC优化前瞻

第一章&#xff1a;PyCon 2024与CPython 3.13异步演进全景图PyCon 2024于五月在匹兹堡圆满落幕&#xff0c;其核心议题之一正是CPython 3.13的异步能力跃迁。作为首个将async/await语义深度融入解释器底层的Python版本&#xff0c;3.13引入了原生协程调度优化、零拷贝内存视图支…...