当前位置: 首页 > 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 公众号…...

C++:std::is_convertible

C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验&#xff0c;以及大语言模型的分析能力&#xff0c;我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际&#xff0c;我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测&#xff0c;聊作存档。等到明…...

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)

🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...

多种风格导航菜单 HTML 实现(附源码)

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

聊一聊接口测试的意义有哪些?

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...

是否存在路径(FIFOBB算法)

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

作为测试我们应该关注redis哪些方面

1、功能测试 数据结构操作&#xff1a;验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化&#xff1a;测试aof和aof持久化机制&#xff0c;确保数据在开启后正确恢复。 事务&#xff1a;检查事务的原子性和回滚机制。 发布订阅&#xff1a;确保消息正确传递。 2、性…...