【前端 - HTML】第 6 课 - 表单标签

news2024/12/24 9:05:37

        欢迎来到博主 Apeiron 的博客,祝您旅程愉快 ! 时止则止,时行则行。动静不失其时,其道光明。


 

目录

1、缘起

2、表单标签

2.1、input 标签基本使用 

2.2、input 标签占位文本 

2.3、单选框 radio

2.4、上传文件 

2.5、多选框 - checkbox

2.6、下拉菜单 

2.7、文本域 

2.8、label 标签 

2.9、按钮 - button

2.10、无语义的布局标签 

2.11、字符实体 

3、总结 


1、缘起

        在 HTML 中,表单标签(<form>)用于创建用户与网页进行交互的输入表单。它是构建交互式网页的重要组件之一,提供了一种收集用户输入数据的机制。表单标签的作用如下:

①  数据收集:表单标签允许用户在网页中输入和提交数据。通过表单,用户可以输入文本、选择选项、上传文件等,将数据发送到服务器或进行本地处理。

②  用户交互:表单标签提供了各种表单元素(如输入框、下拉列表、单选按钮、复选框等),使用户能够与网页进行交互,提供信息、做出选择或执行特定操作。

③  数据传输:通过表单标签提交的数据可以通过 HTTP 协议发送到服务器端进行处理。服务器端可以接收表单数据,对数据进行验证、存储、处理或返回相应的结果。

④  客户端验证:表单标签支持一些基本的客户端验证功能,如输入字段的必填性、数据格式验证等。这可以提高用户输入的准确性,并减轻服务器端的验证负担。

⑤  界面布局:表单标签还可以用于组织和布局网页的其他元素。可以将表单元素和其他内容组合在一起,创建用户友好的界面。


2、表单标签

作用:收集用户信息

使用场景:

①  登录页面

②  注册页面

③  搜索区域


2.1、input 标签基本使用 

input 标签 type 属性值不同,则功能不同

<input  type = "...">

type 属性值说明
text文本框,用于输入单行文本
password密码框
radio单选框
checkbox多选框
file上传文件

示例代码: 

<body>
    <!-- 特点:输入什么就显示什么 -->
    文本框:<input type="text" placeholder="请输入用户名">
    <br><br>

    <!-- 特点:输入什么都是以 点 的形式显示 -->
    密码框:<input type="password" placeholder="请输入密码">
    <br><br>

    单选框:<input type="radio">
    <br><br>

    多选框:<input type="checkbox">
    <br><br>

    上传文件:<input type="file">
    
</body>


2.2、input 标签占位文本 

占位文本:提示信息(文本框和密码框都可以使用)

<input  type  = "..." placeholder = "提示信息">

示例代码: 

<body>
    <!-- 特点:输入什么就显示什么 -->
    文本框:<input type="text" placeholder="请输入用户名">
    <br><br>

    <!-- 特点:输入什么都是以 点 的形式显示 -->
    密码框:<input type="password" placeholder="请输入密码">
    <br><br>

    单选框:<input type="radio">
    <br><br>

    多选框:<input type="checkbox">
    <br><br>

    上传文件:<input type="file">
    
</body>


2.3、单选框 radio

常用属性:

属性名作用特殊说明
name控件名称控件分组,同组只能选中一个(单选功能)
checked默认选中属性名和属性值相同,简写为一个单词

<input  type = "radio"  name = "gender" checked> 男

<input  type = "radio"  name = "gender">女 

示例代码: 

<body>
        性别:
        <input type="radio" name = "gender" checked>男
        <input type="radio" name = "gender">女  
</body>


2.4、上传文件 

        默认情况下,文件上传表单控件只能上传一个文件,添加 multiple 属性可以实现 文件多选 功能。

<input  type = "file"  multiple>


2.5、多选框 - checkbox

多选框也叫 复选框

默认选中:checked

<input  type = "checkbox"  checked> 篮球

示例代码: 

<body>
        兴趣爱好:
        <input type="checkbox" checked>唱
        <input type="checkbox" checked>跳
        <input type="checkbox" checked>rap
        <input type="checkbox" checked>篮球
</body>


2.6、下拉菜单 

标签:select 嵌套 option ,select 是下拉菜单整体,option 是下拉菜单的每一项。

<select>
    <option></option>
    <option></option>
    <option selected></option>
    
    ......

</select>

示例代码: 

<body>
        城市:
        <select>
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
            <option selected>深圳</option>

        </select>
</body>


2.7、文本域 

作用:多行输入文本的表单控件

标签:textarea,双标签

 <textarea >默认提示文字</textarea>

示例代码: 

<body>
    <!-- 右下角有拖拽功能,未来都会被禁用;
      未来工作中,用 CSS 设置尺寸 -->
    <textarea >请输入评论</textarea>
</body>


2.8、label 标签 

作用:网页中,某个标签的说明文本

经验:用 label 标签绑定文字和表单控件的关系,增大表单控件的点击范围。 

使用 label 标签 - 增大点击范围 

①  写法一

        label 标签只包裹内容,不包裹表单控件,设置 label 标签的 for 属性值和表单控件的 id 属性值 相同。 

<input  type = "radio"  id = "man">

<label  for = "man">男</label>

②  写法二

        使用 label 标签 包裹文字和表单控件,不需要属性。

<label><input  type = "radio">女</label>

示例代码: 

<body>
     <input type="radio" name = "gender" id = "man">
     <label for="man">男</label>

     <label ><input type="radio" name = "gender">女</label>
</body>

        通过上述代码和图片可以看出,当没有使用 label 标签时,只能点击单选框进行选择;当使用 label 标签时,不仅能使用单选框进行选择,还可以点击“男”“女”字样进行选择,这就是 label 标签增大表单控件的点击范围 。 


2.9、按钮 - button

<button  type = " ">按钮</button>

type 属性值: 

type 属性值说明
submit提交按钮,点击后可以提交数据到后台(默认功能)
reset重置按钮,点击后将表单控件恢复默认值
button普通按钮,默认没有功能,一般配合 JavaScript 使用

示例代码: 

<body>
      <!-- form 表单区域 -->
      <!-- action="" 发送数据的地址 -->
      <form action="">
      用户名:
      <input type="text">
      <br><br>

      密码:
      <input type="password">
      <br><br>

      <!-- 如果省略 type 属性,功能是 提交 -->
      <button type = "submit">提交</button>
      <button type = "reset">重置</button>
      <button type = "button">普通按钮</button>
      </form>
</body>

注:form 标签管理整理整个表单,要使得按钮 button 标签能够使用,必须将其放在 form 标签下面。


2.10、无语义的布局标签 

作用:布局网页(划分网页区域,摆放内容)

①  div :独占一行

②  span :不换行

<div>div 标签,独占一行</div>

<span>span 标签,不换行</span>

示例代码: 

<body>
     <!-- div 大盒子 -->
     <div>这是 div 标签</div>
     <div>这是 div 标签</div>

     <!-- span 小盒子 -->
     <span>这是 span 标签</span>
     <span>这是 span 标签</span>
</body>


2.11、字符实体 

作用:在网页中 显示预留字符

显示结果描述实体名称
空格&nbsp;
<小于号&lt;
>大于号&gt
<body>
    <!-- 在代码中敲键盘的空格,网页只识别一个空格 -->
    &lt;&nbsp;判天地之美,析万物之理&nbsp;&gt;
</body>


3、总结 

        总结来说,表单标签在 HTML 中的作用是 创建交互式的用户界面,收集用户输入数据,并将数据发送到服务器进行处理。它是构建用户与网页交互的重要工具。

        本期的分享总结就到这里了,如果有疑问的小伙伴儿,我们在评论区交流嗷~~~,笔者必回,我们下期再见啦 !!

前端 - HTML 专栏系列将持续更新 ,,,,,,

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

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

相关文章

Vue.js中的动态组件和异步组件

Vue.js中的动态组件和异步组件 在Vue.js中&#xff0c;动态组件和异步组件是两个常用的技术&#xff0c;用于处理动态加载和渲染组件的需求。虽然它们都可以实现动态加载和渲染组件的功能&#xff0c;但它们的实现方式和使用方法有所不同。本文将详细介绍Vue.js中的动态组件和…

短视频账号矩阵系统技术开发难度之.框架底层逻辑

申请流程&#xff1a;注册官方开放平台账号----申请服务商-----关联应用----申请权限-----等待审核通过 接入开发------开发功能列表&#xff1a; 数据归纳箱&#xff08;账号数据对比概览内含视频总数、播放总数、点赞总数、分享总数、粉丝总数数据统计概览统计&#xff09;…

CMU15-445 2022 Fall 通关记录 —— Project 0

Project 0 Project #0 - C Primer | CMU 15-445/645 :: Intro to Database Systems (Fall 2022) — 项目 #0 - C 入门 | CMU 15-445/645 :: 数据库系统简介&#xff08;2022 年秋季&#xff09; 前期准备 为完成该项目做的一些准备&#xff1a; 创建个人项目FarewellYi/BusT…

【半监督医学图像分割 2023 CVPR】BCP

【半监督医学图像分割 2023 CVPR】BCP 论文题目&#xff1a;Bidirectional Copy-Paste for Semi-Supervised Medical Image Segmentation 中文题目&#xff1a;双向复制粘贴半监督医学图像分割 论文链接&#xff1a;https://arxiv.org/abs/2305.00673 论文代码&#xff1a;http…

EXCEL和VBA里的通配符和转义符

1 EXCEL里的通配符 1.1 EXCEL里常见通配符 通配符必须是英文半角的&#xff0c;中文输入下的不行&#xff01;* 可代表任意数量的字符&#xff1f; 可代表任一个的字符 1.2 使用举例 EXCEL的查找框&#xff0c;也可以使用 通配符只有部分内置函数可…

如何做架构设计?

也许您对软件设计存在一些疑惑&#xff0c;或者缺乏明确思路&#xff0c;那么本文将非常适合您。 1、设计很重要 我们可以看一下周边的事物&#xff0c;那些好的东西&#xff0c;他们并不会天然存在&#xff0c;都是被设计出来的&#xff0c;因此设计就是创造和改善事物的重要…

JavaSE03_流程控制语句

JavaSE-03 [流程控制语句] 第一章 流程控制 1.1 流程概述 在一个程序执行的过程中&#xff0c;每条语句的执行顺序对程序的结果是由直接影响的&#xff0c;也就是&#xff0c;语句的流程对运行结果有着直接的影响&#xff0c;所以&#xff0c;必须清楚知道每条语句的执行流程…

【Python】Python系列教程-- Python3 命名空间和作用域(二十九)

文章目录 前言作用域全局变量和局部变量global 和 nonlocal关键字 前言 往期回顾&#xff1a; Python系列教程–Python3介绍&#xff08;一&#xff09;Python系列教程–Python3 环境搭建&#xff08;二&#xff09;Python系列教程–Python3 VScode&#xff08;三&#xff09…

Vue.js 中的 v-bind 和 v-on 简写

Vue.js 中的 v-bind 和 v-on 简写 在 Vue.js 中&#xff0c;v-bind 和 v-on 是两个常用的指令&#xff0c;用于绑定属性和事件。在本文中&#xff0c;我们将介绍 v-bind 和 v-on 的简写形式&#xff0c;以及如何使用它们。 v-bind 简写形式 在 Vue.js 中&#xff0c;v-bind 用…

Java 进阶—死锁造成原因及其解决

今天我们来了解一下线程死锁&#xff0c;死锁很好理解&#xff0c;从字面上来看就是锁死了&#xff0c;解不开&#xff0c;在大街上看到一对卧龙凤雏的情侣&#xff0c;怎么说&#xff0c;你们给我锁死&#xff0c;不要分开去霍霍别人 之前我们不是说过&#xff0c;解决线程安…

GoogleTest之创建Mock

目录 MOCK_METHODmock方法的访问属性mock非虚函数mock自由函数Nice/Strict/Naggymock方法简化参数mock具体类的替代方法代理给fake mock是用来模拟对象&#xff0c;隔离边界的一种测试方法&#xff0c;以便在开发阶段不需要依赖第三方或其他依赖项可以进行独立的测试。 MOCK_ME…

MySQL调优系列(六)——查询优化

一、查询慢的原因 查询速率受网络、CPU、IO、上下文切换、系统调用、生成统计信息、锁等待时间等因素影响。 举个常见面试题&#xff1a; 一个表非常非常大&#xff0c;上亿级别的数据&#xff0c;性能会变慢嘛&#xff1f;如果表有索引 答&#xff1a;增删改会变慢。&#xf…

Python可视化分析项目高分课设

今天给大家分享一个基于python的django框架结合爬虫以及数据可视化和数据库的项目&#xff0c;该项目总体来说还是挺不错的&#xff0c;下面针对这个项目做具体介绍。 1&#xff1a;项目涉及技术&#xff1a; 项目后端语言&#xff1a;python 项目页面布局展现&#xff1a;前…

数据结构--队列

文章目录 队列基础队列的实现链表实现环形数组实现tail一直加的问题容量处理 队列的使用 队列基础 queue 是以顺序的方式维护的一组数据集合 相对于链表来说&#xff0c;队列操作数据的位置是固定的只能2端操作。 在一端添加数据&#xff0c;从另一端移除数据。习惯来说&#…

高完整性系统(3):Threat Modelling

文章目录 基础安全性质保密性&#xff08;Confidentiality&#xff09;完整性&#xff08;Integrity&#xff09;可用性&#xff08;Availability&#xff09;认证&#xff08;Authentication&#xff09;不可抵赖性&#xff08;Non-repudiation&#xff09;访问控制&#xff0…

从开源软件看动态内存分配

动态内存分配 我们通常在C里面动态分配内存&#xff0c;会写出下面这样的代码&#xff1a; struct header {size_t len;unsigned char *data; }; 随后为data malloc一段内存出来&#xff0c;那么还有其他办法吗&#xff1f; 那便是弹性数组&#xff01;在阐述本节之前&#xff…

数据安全有隐患?金仓数据60秒邀你闯关破题赢奖品

数字时代 数据成为宝贵资产 数据的安全 更是关乎行业可持续发展 关乎社会的稳定和国家战略 数据库作为 数据安全的首要防线 如何纵深防御 保障数据安全合规 满足新应用新场景下的安全防护要求 金仓数据60秒 发布多个视频为您详细剖析 同时&#xff0c;小编发起“闯关挑战”活动…

【Linux】14. 文件缓冲区

1. 文件缓冲区的引出 如上现象&#xff0c;在学习完文件缓冲区之后即可解释 2. 认识缓冲区 缓冲区的本质就是内存当中的一部分&#xff0c;那么是谁向内存申请的&#xff1f; 是属于谁的&#xff1f; 为什么要存在缓冲区呢&#xff1f; 道理是如此&#xff0c;在之前的学习过…

基于matlab仿真带有飞机的虚拟场景

一、前言 此示例演示如何通过 MATLAB接口使用空间鼠标。 开始此示例后&#xff0c;带有飞机的虚拟场景将显示在 Simulink 3D 动画查看器中。您可以使用空格鼠标在场景中导航平面。通过按下设备按钮 1&#xff0c;您可以在当前平面位置放置标记。 此示例需要空间鼠标或其他兼容设…

Neuralangelo AI - 视频生成3D模型

NVIDIA Research 宣布了 Neuralangelo&#xff0c;这是一种创新的 AI 模型&#xff0c;它利用神经网络的力量从 2D 视频剪辑中重建详细的 3D 结构。 Neuralangelo 能够生成逼真的建筑物、雕塑和其他现实世界物体的虚拟复制品&#xff0c;展示了 AI 在 3D 重建领域的非凡潜力。…