【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.xdnf.cn/news/1550750.html

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

相关文章

elementUI表格中某个字段(state)使用计算属性进行转换为对应中文显示

代码案例&#xff1a; <template><el-table:data"tableData"style"width: 100%"><el-table-columnprop"date"label"日期"width"180"/><el-table-columnprop"name"label"姓名"wid…

通信工程师笔记

第一章 1.支撑网是使业务网正常运行,增强网络功能,提供全网服务质量以满足用户要求的网络。 2.常见的有线通信线路包括&#xff08;1&#xff09;双绞线&#xff0c;&#xff08;2&#xff09;同轴电缆&#xff0c;&#xff08;3&#xff09;光纤等&#xff0c;无线通信线路是…

哈希-01-数据分类处理

文章目录 1. 题目描述2. 思路3. 代码 1. 题目描述 信息社会&#xff0c;有海量的数据需要分析处理&#xff0c;比如公安局分析身份证号码、 QQ 用户、手机号码、银行帐号等信息及活动记录。 采集输入大数据和分类规则&#xff0c;通过大数据分类处理程序&#xff0c;将大数据…

【Preference Learning】Reasoning with Language Model is Planning with World Model

arxiv: https://arxiv.org/abs/2305.14992 问题背景&#xff1a;当前LLM推理受到几个关键因素的限制&#xff1a; &#xff08;1&#xff09;LLM缺乏世界模型&#xff08;一种人类就有的对环境的心理表征&#xff0c;可以模拟行动以及活动对外部世界状态的影响&#xff09;去…

TVS/ESD管应用问题点

TVS管全称是Transient Voltage Suppressor&#xff0c; 即瞬态抑制器二极管&#xff0c; 其主要为硅材料&#xff0c; 是 二极管的一种引申工艺器件。 根据其应用的定义&#xff0c; 更多为涉及浪涌等大功率方面的测试&#xff0c; 因 此TVS管主要指SMAJ、 SMBJ及其以上封装&a…

9.29学习

1.线上问题rebalance 因集群架构变动导致的消费组内重平衡&#xff0c;如果kafka集内节点较多&#xff0c;比如数百个&#xff0c;那重平衡可能会耗时导致数分钟到数小时&#xff0c;此时kafka基本处于不可用状态&#xff0c;对kafka的TPS影响极大 产生的原因 ①组成员数量发…

数据库软题1-数据模型+数据库三级模式两级映像

一、数据模型 (一)常见的数据模型 题1-二维表-关系模型 二、三级模式两级映像 (一) 外模式/模式/内模式 <>视图/基本表/文件 题1-三级模式与数据库的三对应 题2-三级模式与数据库的三对应 题3-视图是虚拟表 解析&#xff1a;视图是从一个或几个基本表&#xff08;或视…

ZYNQ中 PL 使用 PS 端晶振实现流水灯

ZYNQ中 PL 使用 PS 端晶振实现流水灯 Create Block Design 点击 Create Block Design, 然后点击 OK: 添加 IP 核 点击 Diagram 中的 号: 在 IP 核的搜索框中输入 ZYNQ, 找到 ZYNQ7 Processing System 的 IP 核,双击之: Viavado 会把 ZYNQ 的 IP 加到我们的 Block Design 中…

企业如何提升知识产权管理效率?

随着企业规模的扩大和创新活动的增加&#xff0c;知识产权管理日益复杂。有效的知识产权管理不仅能够保护企业的创新成果&#xff0c;还能为企业带来巨大的商业价值。然而&#xff0c;许多企业在知识产权管理方面面临着效率低下的问题&#xff0c;管理效率的提升成为企业亟需解…

交换机支持的以太网协议大全

在现代网络架构中,以太网协议是基础设施的核心组成部分,而交换机作为以太网网络的关键设备,其支持的协议种类繁多。理解这些协议的功能和应用场景对于网络管理员和工程师而言至关重要,因为这些协议决定了网络的性能、稳定性和安全性。 以太网协议的发展经历了从最初的10Mb…

使用apipost工具导入通过swag生成的golang接口文档步骤

1.通过swag init 生成docs接口文档 见使用swag init --parseDependency生成api文档报错解决办法 2.导入操作 ok,操作完成

NB_IOT类产品的通信功能生产测试方案

01 物联网行业中存在的问题 在产品的生产流程中&#xff0c;NB 产品的 Socket 通信测试是一个至关重要的环节。Socket 通信作为一种常用的网络通信方式&#xff0c;对于 NB 产品的性能和稳定性有着直接的影响。 在这个阶段&#xff0c;测试人员会精心设计一系列的测试用例&a…

基于OpenCV的实时年龄与性别识别(支持CPU和GPU)

关于深度实战社区 我们是一个深度学习领域的独立工作室。团队成员有&#xff1a;中科大硕士、纽约大学硕士、浙江大学硕士、华东理工博士等&#xff0c;曾在腾讯、百度、德勤等担任算法工程师/产品经理。全网20多万粉丝&#xff0c;拥有2篇国家级人工智能发明专利。 社区特色…

NineData云原生智能数据管理平台新功能发布|2024年9月版

本月发布 3 项更新&#xff0c;其中重点发布 3 项。 重点发布 数据复制 - 新增 Oracle 到 Kafka 复制链路 数据复制功能新增支持将 Oracle 中的数据复制到 Kafka&#xff0c;实现数据的实时流转和分发&#xff0c;支持全量和增量。 数据复制 - 新增库表分组复制 创建复制任务…

网上很好看的动态音频效果是怎么做的?只需两个步骤实现动态音乐效果!

网上很好看的动态音频效果是怎么做的&#xff1f;只需两个步骤实现动态音乐效果&#xff01;大家听音乐的时候&#xff0c;有没看到别人桌面上会有一些音频效果&#xff0c;随着音乐的节奏而跳动。 其实这是用了一些桌面插件&#xff0c;来显示音频效果&#xff0c;咱们这期就…

【小程序】微信小程序课程 -4 项目实战

目录 1、 效果图 2、创建项目 2.1 创建小程序端 2.1.1 先创建纯净项目 2.1.2 删除components 2.1.4 删除app.json红色部分 2.1.5 删除index.json红色部分 2.1.6 删除index.wxss全部内容 2.1.7 删除index.wxml全部内容 2.1.8 app.json创建4个页面 2.1.9 app.json添加…

学习大模型新人必看,大语言模型(LLM)入门学习路线图

Github项目上有一个大语言模型学习路线笔记&#xff0c;它全面涵盖了大语言模型的所需的基础知识学习&#xff0c;LLM前沿算法和架构&#xff0c;以及如何将大语言模型进行工程化实践。这份资料是初学者或有一定基础的开发/算法人员入门活深入大型语言模型学习的优秀参考。这份…

淘宝api上货软件)一刻工具箱,一天上几万不出现爬虫违规,更新开放类目错放功能,淘宝电商必备软件!

天猫淘宝抖音上货神器&#xff0c;助力电商快速铺货 在当今这个信息爆炸、电商飞速发展的时代&#xff0c;如何快速有效地将产品铺货到各大电商平台&#xff0c;成为每一位电商从业者都需要面对的问题。 通过电商API接口能为电商从业者打造的综合辅助工具&#xff0c;支持天猫、…

E34.【C语言】位段练习题

1.题目 分析下列代码中位段在内存中的排布(已知测试平台为VS2022) struct S {int a : 2;int b : 5;int c : 10;int d : 30; };int main() {struct S s { 0 };return 0; } 有关位段的知识点见64.【C语言】再议结构体(下)文 2.提示 VS满足:由低地址向高地址存储,按浪费空间…