【HTML5】html5开篇基础(5)

1.❤️❤️前言~🥳🎉🎉🎉

Hello, Hello~ 亲爱的朋友们👋👋,这里是E绵绵呀✍️✍️。

如果你喜欢这篇文章,请别吝啬你的点赞❤️❤️和收藏📖📖。如果你对我的内容感兴趣,记得关注我👀👀以便不错过每一篇精彩。

当然,如果在阅读中发现任何问题或疑问,我非常欢迎你在评论区留言指正🗨️🗨️。让我们共同努力,一起进步!

加油,一起CHIN UP!💪💪

🔗个人主页:E绵绵的博客
📚所属专栏:

1. JAVA知识点专栏

        深入探索JAVA的核心概念与技术细节

2.JAVA题目练习

        实战演练,巩固JAVA编程技能

3.c语言知识点专栏

        揭示c语言的底层逻辑与高级特性

4.c语言题目练习

        挑战自我,提升c语言编程能力

5.Mysql数据库专栏

        了解Mysql知识点,提升数据库管理能力

6.html5知识点专栏

         学习前端知识,更好的运用它

📘 持续更新中,敬请期待❤️❤️

2.表单 

在 HTML 中,一个完整的表单通常由表单域、表单控件(也称为表单元素)和提示信息3个部分构成。

3.表单域 

表单域是一个包含表单元素的区域,
在 HTML标签中 ,<form>标签用于定义表单域,以实现用户信息的收集和传递<form>会把它范围内的表单元素信息提交给服务器,
 

<form action=“url地址”method="提交方式”name="表单域名称">
各种表单元素控件
</form>
  • action 属性指定表单提交数据的服务器 URL。
  • method 属性指定 HTTP 请求方法,常用的值为 GETPOST

我们现在暂时不用表单域提交数据给服务器,只需要学会写 form等标签即可.等之后学习服务器编程阶段才会学习到该知识点。

4.表单控件

在英文单词中,input是输入的意思,而在表单元素中<input>标签用于收集用户信息在 <input>标签中,<input>标签是一个单标签。包含一个type属性,根据不同的type属性值,输入字段拥有很多种形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮等)。


<input type="属性值" />

 文本输入控件

单行文本输入框(<input type="text">)用于接收用户输入的单行文本,如用户名、地址等。
密码输入框(<input type="password">)用于输入密码,输入的内容不可见。

选择控件 

单选按钮(<input type="radio">)用户只能选择一个选项,通常用于性别、是/否等单选情况。
​
复选按钮(<input type="checkbox">)用户可以选择多个选项,通常用于兴趣爱好、服务条款同意等。​

按钮控件

提交按钮(<input type="submit">用于提交表单的数据到指定的服务器端。
重置按钮(<input type="reset">)用于重置表单中所有的输入,使其恢复到初始状态。
普通按钮(<input type="button">)不会提交表单,通常用于与 JavaScript 交互触发事件
文件选择框(<input type="file">)
用于上传文件,如图片、文档等

 input标签常用属性

name属性

name是每个表单元素都有的属性值,主要给后台人员使用,方便后台人员识别并处理数据。

除此以外我们还要注意在选择控件中其name属性必须要相同,这样单选按钮才能实现单选功能(否则就能多选),复选按钮也同理。

value属性 

value属性在文本输入控件中设置和按钮控件中设置都可以将其value值显示出来。 而选择控件是不显示的。

<body><form action="php.jdg" method="get" name="第一个表格"><input type="text" value="请输入"><br />按钮: <input type="checkbox" value="请输入"><br /><input type="reset" value="重置按钮"></form>
</body>


所以value在选择控件中是不设置的。

checked属性

规定此 Input 元素首次加载时应当被选中,应用于选择控件中。

<body><form>按钮: <input type="checkbox" checked="checked">
</form>
</body>

maxlength属性

适用于文本输入控件,它能决定文本输入控件中输入字段的最大长度。

<label>标签 

 <label>标签为input元素定义标注,<label>标签用于绑定一个表单元素, 当点击<label>标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验.

 下面是一个使用<label>的示例:

<input type="text" id="username">
<label for="username">请输入用户名:</label>

 在这个例子中,点击"请输入用户名:"文本会使<input>元素获得焦点。

核心:<label>标签的 for 属性应当与相关元素的id 属性相同,

<select>标签 

<select> 标签用于创建下拉列表,用户可以从中选择一个选项。它通常用于表单中,每个选项通过 <option> 标签定义。

1.<select>中至少包含1对<option>
2.在<option>中定义selected=“selected"时,当前项即为默认选中项,

<body><form><form><label for="cars">选择一款汽车:</label><select id="cars"><option>沃尔沃</option><option selected="selected">萨博</option><option>梅赛德斯</option><option>奥迪</option></select></form></form>
</body>

 <textarea>标签 

在表单元素中,<textarea>标签是用于定义多行文本输入的控件使用多行文本输入控件,可以输入更多的文字,该控件常见于留言板,评论。

  通过<textarea>标签可以轻松地创建多行文本输入框

<textarea rows="3" cols="20">
文本内容 <!-- 该文本内容会默认显示在输入框中 -->
</textarea>

cols=“每行中的字符数”,rows=“显示的行数”,我们在实际开发中不会使用,都是用 CSS 来改变大小,

 5.提示信息

这个最简单,根本不需要标签,在form标签内填入适当的文字就可以当作提示信息用了。

6.额外知识点

以上的标签都可以独立存放,不需要特定放在form中。form的作用只是能把这些元素信息给提交到服务器,没有form就提交不了。

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

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

相关文章

vue-live2d看板娘集成方案设计使用教程

文章目录 前言v1.1.x版本&#xff1a;vue集成看板娘&#xff08;暂不使用&#xff0c;在v1.2.x已替换&#xff09;集成看板娘实现看板娘拖拽效果方案资源备份存储 当前最新调研&#xff1a;2024.10.2开源方案1&#xff1a;OhMyLive2D&#xff08;推荐&#xff09;开源方案2&…

【设计模式】软件设计原则——接口隔离迪米特

接口隔离原则引出 接口隔离原则 定义&#xff1a;用多个专门的接口,不使用单一的总接口,客户端不应该依赖它不需要的接口; 一个类对另一个类的依赖,应该建立在最小接口上;如果有一个大接口,里面有很多方法,如果使用一个类实现该接口,所有的类都要实现&#xff0c;导致代码冗余;…

android 全面屏最底部栏沉浸式

Activity的onCreate方法中添加 this.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); Android 系统 Bar 沉浸式完美兼容方案自 Android 5.0 版本&#xff0c;Android 带来了沉浸式系统 ba - 掘金 (juejin.cn)https://juejin.cn/post/7075578…

【HTTP(3)】(状态码,https)

【认识状态码】 状态码最重要的目的&#xff0c;就是反馈给浏览器:这次请求是否成功&#xff0c;若失败&#xff0c;则出现失败原因 常见状态码: 200:OK&#xff0c;表示成功 404:Not Found&#xff0c;浏览器访问的资源在服务器上没有找到 403:Forbidden&#xff0c;访问被…

【每天学个新注解】Day 15 Lombok注解简解(十四)—@UtilityClass、@Helper

UtilityClass 生成工具类的注解 将一个类通过注解变成一个工具类&#xff0c;并没有什么用&#xff0c;本来代码中的工具类数量就极为有限&#xff0c;并不能达到减少重复代码的目的 1、如何使用 加在需要委托将其变为工具类的普通类上。 2、代码示例 例&#xff1a; Uti…

基于Java,SpringBoot,Vue智慧校园健康驿站体检论坛请假管理系统

摘要 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以很好地为人们提供服务。针对信息管理混乱&#xff0c;出错率高&#xff0c;信息安全性差&#xf…

景区+商业,如何实现1+1>2?

景区商业&#xff0c;如何实现11&#xff1e;2&#xff1f; 近两年&#xff0c;随着旅游业的蓬勃发展&#xff0c;旅游热潮持续升温&#xff0c;游客的消费观念也在逐步升级。为了适应这一趋势&#xff0c;各大景区纷纷着手打造具有鲜明特色的文旅项目&#xff0c;希望能够吸引…

C++ | Leetcode C++题解之第457题环形数组是否存在循环

题目&#xff1a; 题解&#xff1a; class Solution { public:bool circularArrayLoop(vector<int>& nums) {int n nums.size();auto next [&](int cur) {return ((cur nums[cur]) % n n) % n; // 保证返回值在 [0,n) 中};for (int i 0; i < n; i) {if …

cherry-markdown开源markdown组件详细使用教程

文章目录 前言开发定位目标调研技术方案前提工作量安排数据库表设计实现步骤1、引入依赖2、实现cherry-markdown的vue组件&#xff08;修改上传接口路径&#xff09;3、支持draw.io组件4、支持展示悬浮目录toc前端使用&#xff1a;编辑状态使用cherry-markdown的vue组件前端使用…

解决npm安装不了element库(目前未解决。。。)

根据您提供的错误信息&#xff0c;安装 element-plus 时出现了一些问题。这些错误主要可以分为两类&#xff1a;权限问题和网络问题。以下是一些解决这些问题的建议&#xff1a; 1. 解决权限问题 您遇到的 EPERM: operation not permitted 错误通常与文件系统权限有关。尝试以…

Stable Diffusion绘画 | 插件-Deforum:动态视频生成(中篇)

本篇文章重点讲解参数最多的 关键帧 模块。 「动画模式」选择「3D」&#xff1a; 下方「运动」Tab 会有一系列参数&#xff1a; 以下4个参数&#xff0c;只有「动画模式」选择「2D」才会生效&#xff0c;可忽略&#xff1a; 运动 平移 X 让镜头左右移动&#xff1a; 大于0&a…

卷积神经网络(CNN)的计算量和参数怎么准确估计?

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 1. 卷积层&#xff08;Convolutional Layer&#xff09; a) 计算量估计&#xff1a; 卷积层的 FLOPs 2 * H_out * W_out * C_in * C_out * K_h * K_w 详细解释&#xff1a; H_out, W_out&#xff…

YOLO11改进|注意力机制篇|引入HAT超分辨率重建模块

目录 一、HAttention注意力机制1.1HAttention注意力介绍1.2HAT核心代码 二、添加HAT注意力机制2.1STEP12.2STEP22.3STEP32.4STEP4 三、yaml文件与运行3.1yaml文件3.2运行成功截图 一、HAttention注意力机制 1.1HAttention注意力介绍 HAT模型 通过结合卷积特征提取与多尺度注意…

推荐 uniapp 相对好用的海报生成插件

插件地址&#xff1a;自定义canvas样式海报 - DCloud 插件市场 兼容性也是不错的&#xff1a;

MySQL基础篇 - 事务

01 事务的简介 【1】什么是事务&#xff1a;事务是一组操作集合&#xff0c;要么同时操作成功&#xff0c;要么同时操作失败。 【2】对于MySQL数据库来说默认一条SQL语句就是一个事务&#xff0c;且事务是默认自动提交的。 我们可以把多条SQL语句设置成一个事务&#xff0c;使…

java:pdfbox 删除扫描版PDF中文本水印

官网下载 https://pdfbox.apache.org/download.html下载 pdfbox-app-3.0.3.jar cd D:\pdfbox 运行 java -jar pdfbox-app-3.0.3.jar java -jar pdfbox-app-3.0.3.jar Usage: pdfbox [COMMAND] [OPTIONS] Commands:debug Analyzes and inspects the internal structu…

Spring Boot技术栈:打造高效在线商城

2 相关技术 2.1 Springboot框架介绍 Spring Boot是由Pivotal团队提供的全新框架&#xff0c;其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置&#xff0c;从而使开发人员不再需要定义样板化的配置。通过这种方式&#xff0c;Spring…

重学SpringBoot3-集成Redis(一)

更多SpringBoot3内容请关注我的专栏&#xff1a;《SpringBoot3》 期待您的点赞&#x1f44d;收藏⭐评论✍ 重学SpringBoot3-集成Redis&#xff08;一&#xff09; 1. 项目初始化2. 配置 Redis3. 配置 Redis 序列化4. 操作 Redis 工具类5. 编写 REST 控制器6. 测试 API7. 总结 随…

vSAN01:vSAN简介、安装、磁盘组、内部架构与调用关系

目录 传统的共享存储vSAN存储OSA的系统要求vSAN安装vSAN集群vSAN skyline healthvSAN与HA磁盘组混合磁盘架构全闪磁盘架构 vSAN对象vSAN内部架构 传统的共享存储 通过隔离的存储网络使得不同的ESXi主机访问独立的存储设备。需要前期投入较高的资金单独采购存储、网络可以单独规…

【Windows】自定义显示器的分辨率

背景 由于本人更新驱动导致2个显示器里面&#xff0c;有一个显示器的分辨率只剩下2个可以调节 这样就导致2个显示器分辨率不同&#xff0c;更新了多次驱动都修复不了&#xff0c;所以想着看能不能自定义分辨率 工具下载 显示器自定义分辨率工具 或者百度搜索 Custom Resolu…