前端必知必会-html表单元素

news2024/11/14 2:56:26

文章目录

  • HTML 表单元素
  • HTML `<form>` 元素
  • `<input>` 元素
  • `<label>` 元素
  • `<select>` 元素
  • <option> 元素定义一个可选择的选项。
  • `<textarea>` 元素
  • `<button>` 元素
  • `<fieldset>` 和 `<legend> `元素
  • `<datalist>` 元素
  • `<output>` 元素
  • HTML 表单元素
  • 总结


HTML 表单元素

本章介绍所有不同的 HTML 表单元素。

HTML <form> 元素

HTML 元素可以包含以下一个或多个表单元素:

  • <input>
  • <label>
  • <select>
  • <textarea>
  • <button>
  • <fieldset>
  • <legend>
  • <datalist>
  • <output>
  • <option>
  • <optgroup>

<input> 元素

最常用的表单元素之一是 <input> 元素。

<input> 元素可以以多种方式显示,具体取决于 type 属性。

示例

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">

<label> 元素

<label> 元素为多个表单元素定义一个标签。

<label> 元素对于屏幕阅读器用户很有用,因为当用户将焦点放在输入元素上时,屏幕阅读器会大声读出标签。

<label> 元素还可以帮助难以点击非常小的区域(例如单选按钮或复选框)的用户 - 因为当用户点击 <label> 元素内的文本时,它会切换单选按钮/复选框。

<label> 标签的 for 属性应等于 <input> 元素的 id 属性,以将它们绑定在一起。

<select> 元素

<select> 元素定义一个下拉列表:

示例

<label for="cars">选择汽车:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

元素定义一个可选择的选项。

默认情况下,选择下拉列表中的第一个项目。

要定义预选选项,请将 selected 属性添加到选项中:

示例

<option value="fiat" selected>Fiat</option>

可见值:
使用 size 属性指定可见值的数量:

示例

<label for="cars">选择汽车:</label>
<select id="cars" name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

允许多项选择:
使用 multiple 属性允许用户选择多个值:

示例

<label for="cars">选择汽车:</label>
<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

<textarea> 元素

<textarea> 元素定义多行输入字段(文本区域):

示例

<textarea name="message" rows="10" cols="30">
猫在花园里玩耍。
</textarea>

rows 属性指定文本区域中可见的行数。

cols 属性指定文本区域的可见宽度。

使用 CSS 定义文本区域的大小:

示例

<textarea name="message" style="width:200px; height:600px;">
猫在花园里玩耍。
</textarea>

<button> 元素

<button> 元素定义一个可点击的按钮:

示例

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

注意:始终为按钮元素指定 type 属性。不同的浏览器可能对按钮元素使用不同的默认类型。

<fieldset><legend> 元素

<fieldset> 元素用于将表单中的相关数据分组。

<legend> 元素为 <fieldset> 元素定义标题。

示例

<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>

上面的 HTML 代码在浏览器中的显示方式如下:
在这里插入图片描述

<datalist> 元素

<datalist> 元素为 <input> 元素指定预定义选项列表。

用户在输入数据时将看到预定义选项的下拉列表。

<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。

示例

<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>

<output> 元素

<output> 元素表示计算结果(如脚本执行的结果)。

示例
执行计算并在 <output> 元素中显示结果:

<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>

HTML 表单元素

标签说明
<form>定义 HTML 表单供用户输入
<input>定义输入控件
<textarea>定义多行输入控件(文本区域)
<label>定义 元素的标签
<fieldset>将表单中的相关元素分组
<legend>定义 元素的标题
<select>定义下拉列表
<optgroup>定义下拉列表中的一组相关选项
<option>定义下拉列表中的选项
<button>定义可点击按钮
<datalist>指定输入控件的预定义选项列表
<output>定义计算结果

总结

本文介绍了的html表单元素使用,如有问题欢迎私信和评论

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

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

相关文章

Aker ASA引领行业变革,旗下互联网投融资平台重磅起航

全球领先的海洋科技公司 Aker ASA 正式宣布,将于近期推出其全新的互联网海洋产业投融资平台。这一平台的推出标志着Aker ASA在海洋资源开发和投融资领域的又一重大进展,旨在为投资者提供创新、可靠的投资机会,同时推动海洋产业的可持续发展。 Aker ASA 作为行业内的领导者,以其…

开源AI智能名片O2O商城微信小程序在顾客价值链优化中的应用与探索

摘要&#xff1a;随着信息技术的飞速发展&#xff0c;顾客的消费行为模式正经历着前所未有的变革。在这一背景下&#xff0c;开源AI智能名片O2O商城微信小程序作为一种创新的营销与服务平台&#xff0c;正逐步成为企业连接顾客、优化顾客价值链的重要工具。本文旨在探讨开源AI智…

【IEEE出版】第五届大数据、人工智能与软件工程国际研讨会(ICBASE 2024,9月20-22)

第五届大数据、人工智能与软件工程国际研讨会&#xff08;ICBASE 2024&#xff09;将于2024年09月20-22日在中国温州隆重举行。 会议主要围绕大数据、人工智能与软件工程等研究领域展开讨论。会议旨在为从事大数据、人工智能与软件工程研究的专家学者、工程技术人员、技术研发人…

Echarts 横向条形图的右侧标签靠右显示对齐,不被遮挡

解决方案&#xff1a; 再添加一个y轴&#xff0c;隐藏刻度线即可。 配置如下&#xff1a; 在这里插入代码片yAxis: [{type: category,axisLine: {lineStyle: {color: #EFEFEF, // 轴线颜色width: 1, // 轴线线宽type: solid // 轴线线条类型&#xff0c;可选为 solid、dashed…

<数据集>遥感航拍船舶识别数据集<目标检测>

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;17575张 标注数量(xml文件个数)&#xff1a;17575 标注数量(txt文件个数)&#xff1a;17575 标注类别数&#xff1a;1 标注类别名称&#xff1a;[ship] 使用标注工具&#xff1a;labelImg 标注规则&#xff1a;对…

Python文献调研(四)QtDesigner的布局

一、新建项目&#xff1a; 1.打开pycharm&#xff0c;新建一个Python项目 &#xff08;1&#xff09;右键项目列表区&#xff0c;找到我们之前配置好的外部工具&#xff0c;点击Pyside6 QtDesigner 打开Qt Designer后会是这个界面&#xff1a; &#xff08;2&#xff09;此时…

XC8403B 30V降压芯片 耐压可达38V 适用24V降压 12V降压电路 3A大电流 替代RY8336

XC8403B是一款采用内部功率MOSFET的高频、同步、整流、降压、开关式转换器。XC8403 B提供不同频率和FB版本&#xff0c;可根据不同的应用进行选择。它提供了一种非常紧凑的解决方案&#xff0c;可以在很宽的输入电源范围内提供3A的连续输出电流&#xff0c;具有出色的负载和线路…

自动更换apk包名源码

系统通过对apk反编译&#xff0c;随机包名&#xff0c;随机签名&#xff0c;混淆代码等方式&#xff0c;回编译生成新的apk安装包通过系统智能自动处理&#xff0c;间隔5分钟&#xff08;可以自定义时间&#xff09;生成一个新包&#xff0c;通过对接对象云储存系统分发给不同的…

电力能源监控的未来技术趋势如何

电力能源监控的未来技术趋势是一个多元化且快速发展的领域&#xff0c;它涵盖了智能化、数字化、集成化以及可持续发展等多个方面。以下是对电力能源监控未来技术趋势的详细分析&#xff1a; 一、智能化与数字化 1、人工智能&#xff08;AI&#xff09;与机器学习&#xff1a…

手把手教你开发无人带货直播插件!

在当今这个数字化时代&#xff0c;直播带货已成为电商领域的一股不可忽视的力量&#xff0c;然而&#xff0c;随着市场竞争的加剧和消费者需求的多样化&#xff0c;如何高效、低成本地进行直播带货成为许多商家关注的焦点。 无人带货直播插件应运而生&#xff0c;它不仅降低了…

SpringBoot中华非遗传承网站-计算机毕设定制-附项目源码(可白嫖)48408

摘 要 非物质文化遗产是人类智慧活动的结晶&#xff0c;具有极高的文化价值&#xff0c;是一个民族历史文化的时间遗迹。我国拥有三千多年的历史文明&#xff0c;在非物质文化遗产的数量和质量上&#xff0c;在世界当中都是首屈一指的。根据有关数据显示&#xff0c;我国非物质…

【网络世界】传输层协议

&#x1f308;前言&#x1f308; 欢迎收看本期【网络世界】&#xff0c;本期内容讲解TCP/IP协议栈中的传输层协议&#xff0c;即UDP协议和TCP协议。包含了他们的协议格式&#xff0c;特点等。介绍他们的应用场景&#xff0c;最后对比TCP与UDP协议。此外&#xff0c;还将介绍套接…

台州网站建设实施方案

随着信息技术的不断发展&#xff0c;网站建设已成为企业发展的重要手段之一。台州作为一个经济发达的城市&#xff0c;网站建设已经成为提升企业形象、拓展市场、服务客户的重要途径。因此&#xff0c;台州网站建设实施方案显得尤为重要。 首先&#xff0c;台州网站建设实施方案…

学习记录2024年7月31日 编码器的参数:脉宽,电压输出、分辨率

一、编码器的脉宽&#xff0c;指的是脉冲信号高电平的持续时间。 对于方波信号来说&#xff0c;就是高电平的持续时间。 占空比&#xff0c;就是单个周期内&#xff0c;比如100Hz的信号&#xff0c;脉宽/周期时间占空比。 若脉宽是5ms&#xff0c;周期时间是10ms。占空比5ms…

pgvector: 30 倍构建向量嵌入索引

使用 pgvector 为 HNSW 并行构建索引 Postgres 最受欢迎的向量搜索扩展 pgvector 最近实现了并行索引构建功能&#xff0c;这将分层可导航小世界 (HNSW) 索引构建时间显著提高了 30 倍。 祝贺 Andrew Kane 和 pgvector 的贡献者发布此版本&#xff0c;这巩固了 Postgres 作为最…

通过知识管理提升财务卓越性

通过准确共享关键信息来降低运营风险、提高生产力并提高客户满意度。 Baklib 能为您提供什么帮助&#xff1f; 知识传输 无缝的知识转移可以让您的内部团队随时了解最新情况。这将帮助您的团队提高日常运营效率。 决策 对于每个银行或金融机构来说&#xff0c;决策都非常…

多任务协程处理的流程,看看是否和你想像的一样

import time import asyncioasync def func1():print("你好&#xff0c;我是第一个任务")await asyncio.sleep(3)print("你好&#xff0c;我是第二个任务")async def func2():print("你好&#xff0c;我是第3个任务")await asyncio.sleep(2)…

江科大/江协科技 STM32学习笔记P16

文章目录 一、PWM驱动LED呼吸灯1、打通PWM通路2、PWM.cTIM外设对应的库函数参考手册AFIO引脚重映射表 3、main.c 二、PWM驱动舵机1、PWM.c2、main.c3、Servo.c 三、PWM驱动直流电机1、Motor.c2、PWM.c3、main.c 一、PWM驱动LED呼吸灯 1、打通PWM通路 打通PWM通路&#xff0c;第…

使用Response.Write实现在页面的生命周期中前后台的交互

最近在做一个很大的查询&#xff0c;花时间很多&#xff0c; 用户会以为死掉了&#xff0c;就做了一个前后交互的&#xff0c;用于显示执行进度&#xff0c;在网上找了一下&#xff0c;这个比较合适。 主要是简单&#xff0c;大道至简 改进了一下&#xff1a;效果如下图 代码…

【干货】IP地址有免费的SSL证书嘛?怎么申请

IP地址没有免费的SSL证书&#xff0c;但可以通过一些证书颁发机构&#xff08;CA&#xff09;购买IP地址SSL证书。这类证书允许用户通过IP地址而非域名来建立安全连接&#xff0c;适用于没有域名的内部服务器、专用网络中的设备或其他无法使用域名的服务。 以下是申请IP地址SS…