前端HTML入门基础5（表单）

前端HTML入门基础5（表单）

  • 表单-基本结构
  • 文本框和密码框
  • 单选框和复选框
  • 隐藏域
  • 确认按钮
  • 重置按钮
  • 普通按钮
  • 文本域
  • 下拉框
  • 禁用表单控件
  • label标签
  • fieldset与legend的使用

表单-基本结构

在HTML中，表单（Forms）是一种允许用户与网页交互的界面元素，常用于收集用户输入、提交数据到服务器等。以下是一些关于HTML表单的基本知识和常用元素：

  1. <form> 标签:

    • <form> 是定义 HTML 表单的标签。通常，表单包含输入元素，如文本字段、复选框、单选按钮、提交按钮等。
    • target 用于控制表单提交后，如何打开页面，常用值如下：
      -self：在本窗口打开
      -blank:在新窗口打开
    • action 属性定义了当用户提交表单时，数据发送到的服务器端脚本的 URL。用于指定表单的提交地址（与后端相连）
    • method 属性定义了数据传送的方式，通常有 GET 和 POST 两种。

  2. 输入类型 (Input Types):

    • <input> 标签用于收集用户输入，其类型由 type 属性定义。常见的类型包括 text、password、checkbox、radio、submit、email、date 等， name：用于指定提交数据的名字（与后端沟通） 。
    • <textarea> 用于创建多行的文本输入区域。
    • <button> 可以作为表单的提交按钮，通过 type="submit" 来指定。

  3. 标签和字段集 (Labels and Fieldsets):

    • <label> 标签为输入元素提供文本描述，提高可访问性。
    • <fieldset> 标签用于对表单中的一组相关元素进行分组。

  4. 选择菜单 (Select Menus):

    • <select> 和 <option> 标签用于创建下拉选择菜单。<select> 是菜单容器，而 <option> 定义菜单中的每个选项。

  5. 表单验证 (Form Validation):

    • HTML5 引入了一些新的输入类型（如 email、url）和属性（如 required、pattern），这些可以帮助在客户端进行基本的表单验证。

  6. 提交和重置 (Submit and Reset):

    • <input type="submit"> 创建一个提交按钮，用户点击后会提交表单数据。
    • <input type="reset"> 创建一个重置按钮，用户点击后会清除表单中所有输入字段的值。

  7. 编码 (Encoding):

    • 当使用 POST 方法提交表单时，通常建议在 <form> 标签中添加 enctype 属性，以指定数据编码方式，例如 enctype="multipart/form-data" 用于文件上传。

  8. HTML5 新特性:

    • HTML5 提供了一些新的输入类型，如 number、range、color、date、time、datetime-local、month、week、email、tel、search 等，以及新的表单属性，如 autofocus、autocomplete、placeholder、multiple 等。

  9. 表单布局 (Form Layout):

    • 使用 CSS 可以对表单进行样式化和布局设计，以提高用户体验。

  10. 无障碍性 (Accessibility):

    • 确保所有表单元素都有相关的 <label>，并且使用 name 和 id 属性明确关联标签和输入元素，这对于屏幕阅读器用户非常重要。

正确设计和实现HTML表单对于确保良好的用户体验和数据的准确收集至关重要。
例如：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>欧买噶的第2个网页</title>
</head>
<body>
<form action="https://www.baidu.com/s"><input type="text" name="wd"><button>去百度搜索</button>
</form>
<hr>
<form action="https://search.jd.com/search" target="_self"><input type="text" name="keyword"><button>去京东搜索</button>
</form>
</body>
</html>`

在这里插入图片描述
输入要搜索的东西，点击按钮则会跳转到百度和京东。

特备注意action标签网址最后的/s,/search

文本框和密码框

  1. 输入框 (Input Box)：允许用户输入文本信息，是最基础的表单元素。通过标签的type="text"定义。
  2. 密码框(Password Field)：与文本输入类似，但会隐藏输入的内容。使用input type="password"创建。

单选框和复选框

<input type="radio" name="sex" value="female" checked>女
<input type="radio" name="sex" value="male">男
<!--
name属性：数据的名称，注意，想要单选的效果，多个radio的name属性值要保持一致。
value属性：提交的数据值
checke属性：让单选的按钮默认选中
--><input type="checkbox" name="b=hobby" value="drink">喝酒
<input type="checkbox" name="b=hobby" value="smoke">抽烟
<input type="checkbox" name="b=hobby" value="perm">烫头
<!-- 
name属性：数据的名称
value属性：提交的数据值
checke属性：让单选的按钮默认选中
-->

在这里插入图片描述

隐藏域

 <input type="hidden" name="tag" value="100">name属性：指定数据的名称value属性：指定的真正提交的数据

显而易见就是能隐藏起来的看不见的，一般用于防止恶意书写脚本批量的执行一些功能

确认按钮

第一种写法

  <input type="submit" value="点我提交表单">

第二种写法

  <button>点我提交表单</button>

重置按钮

  <input type="reset" value="点我重置"><button type="reset">点我重置</button>

重置一般会恢复默认项

普通按钮

  <input type="button" value="普通按钮"><button type="button">普通按钮</button><br>

文本域

  <textarea name="msg" rows="22" cols="3">我是文本域</textarea>

文本域 在HTML中通常用于收集用户较长的文本输入，如留言、评论或者是文章内容等。

  • 标签定义：在HTML中，<textarea>标签用于定义一个可以输入多行文本的控件。与单行文本输入框（<input type="text">）不同，<textarea>可以容纳更多的文本内容，并且支持换行。
  • 常用属性：
    • rows：指定文本域显示的行数。
    • cols：指定文本域显示的列数。
    • placeholder：提供给用户提示信息，当文本域为空时显示。
    • disabled：设定后，文本域将不可编辑。
    • readonly：设定后，文本域可读但不可编辑。
    • required：表单提交时，该字段必须填写。
  • 样式调整：通过CSS可以改变<textarea>的大小、边框样式、背景颜色等外观属性。
  • 使用场景：文本域常见于需要用户提供较多文字的场景，例如留言板、评论提交、在线调查问卷或任何需要详细描述的地方。
  • 浏览器支持：<textarea>作为标准HTML元素，得到现代浏览器的广泛支持。

在实际应用中，开发者会根据具体需求设置适当的rows和cols属性以确保用户体验，同时可能会配合JavaScript进行更复杂的数据处理和验证。此外，随着HTML5的发展，<textarea>也支持新的属性和事件，使得它更加强大和灵活。

下拉框

<select name="place"><option value="01" selected>河南</option><option value="02">陕西</option><option value="03">兰州</option><option value="04">武汉</option><option value="05">南京</option>
</select>

在这里插入图片描述
默认河南（selected）

禁用表单控件

<!-- 禁用单个控件：要禁用特定的输入字段，
只需在该输入元素的标签中添加disabled属性。
例如，
<input type="text" name="lname" disabled>
会创建一个禁用的文本输入框。<button type="button" disabled>普通按钮</button><button disabled type="button" >普通按钮</button>
-->

input textarea button select option 都可以设置disabled属性

label标签

关联元素：

<form><label for="username">用户名：</label><input type="text" id="username" name="username"><br><label for="password">密码：</label><input type="password" id="password" name="password"><br><input type="submit" value="登录">
</form>

在上面的示例中，我们创建了一个简单的登录表单，包括用户名和密码输入框以及一个提交按钮。通过使用

如何将表单空间放置在

<form><label for="username">用户名<input type="text" id="username" name="username"></label><br><label for="password">密码<input type="password" id="password" name="password"></label><br><input type="submit" value="登录">
</form>

在上面的示例中，我们将用户名和密码输入框放置在

请注意，虽然将表单空间放置在

fieldset与legend的使用

fieldset和legend是HTML中用于创建表单的标签。

fieldset标签用于将表单元素分组，通常与legend标签一起使用。legend标签用于为fieldset提供标题或描述。

以下是fieldset和legend的使用示例：

<form><fieldset><legend>个人信息</legend>姓名：<input type="text" name="name"><br>年龄：<input type="number" name="age"><br>性别：<input type="radio" name="gender" value="male">男<input type="radio" name="gender" value="female">女</fieldset><br><fieldset><legend>联系方式</legend>邮箱：<input type="email" name="email"><br>电话：<input type="tel" name="phone"><br></fieldset><br><input type="submit" value="提交">
</form>

在这里插入图片描述

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

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

相关文章

嵌入式实时操作系统的调度机制与优化

嵌入式实时操作系统的调度机制与优化

大家好&#xff0c;今天给大家介绍嵌入式实时操作系统的调度机制与优化&#xff0c;文章末尾附有分享大家一个资料包&#xff0c;差不多150多G。里面学习内容、面经、项目都比较新也比较全&#xff01;可进群免费领取。 嵌入式实时操作系统的调度机制与优化 一、引言 嵌入式实…
阅读更多...
最前沿・量子退火建模方法(1) : subQUBO讲解和python实现

最前沿・量子退火建模方法(1) : subQUBO讲解和python实现

前言 量子退火机在小规模问题上的效果得到了有效验证&#xff0c;但是由于物理量子比特的大规模制备以及噪声的影响&#xff0c;还没有办法再大规模的场景下应用。 这时候就需要我们思考&#xff0c;如何通过软件的方法怎么样把大的问题分解成小的问题&#xff0c;以便通过现在…
阅读更多...
远程桌面防火墙是什么？

远程桌面防火墙是什么？

远程桌面防火墙&#xff0c;是一种针对远程桌面应用的安全防护工具。它可以在保证远程桌面连接的便利性和高效性的对网络连接进行安全性的保护&#xff0c;防止未经授权的访问和潜在的安全风险。 远程桌面防火墙的主要功能是对远程桌面连接进行监控和管理。它通过识别和验证连接…
阅读更多...
cron表达式使用手册

cron表达式使用手册

cron表达式 我们在使用定时调度任务的时候&#xff0c;最常用的就是cron表达式。通过cron表达式来指定任务在某个时间点或者周期性执行。 范围&#xff1a; 秒&#xff08;0-59&#xff09;&#xff08;可选&#xff09; 分&#xff08;0-59&#xff09; 时&#xff08;0-…
阅读更多...
ansible的常见用法

ansible的常见用法

目录 ##编辑hosts文件 ##copy模块##复制过去 ##fetch模块##拉取 ##shell模块 ##好用 ##command模块## ##file模块### ##cron模块### ##crontab 计划任务 ##下载好时间插件 ##script模块 ##yum模块## ##yum下载源配置文件 /etc/yum.repos.d/CentOS-Base.repo ##ser…
阅读更多...
Linux 使用 ifconfig 报错：Failed to start LSB: Bring up/down networking

Linux 使用 ifconfig 报错：Failed to start LSB: Bring up/down networking

一、报错信息 在运行项目时报错数据库连接失败&#xff0c;我就想着检查一下虚拟机是不是 Mysql 服务忘了开&#xff0c;结果远程连接都连接不上虚拟机上的 Linux 了&#xff0c;想着查一下 IP 地址看看&#xff0c;一查就报错了&#xff0c;报错信息&#xff1a; Restarting…
阅读更多...
LeetCode34：在排序数组中查找元素的第一个和最后一个位置（Java）

LeetCode34：在排序数组中查找元素的第一个和最后一个位置（Java）

目录 题目&#xff1a; 题解&#xff1a; 方法一&#xff1a; 方法二&#xff1a; 题目&#xff1a; 给你一个按照非递减顺序排列的整数数组 nums&#xff0c;和一个目标值 target。请你找出给定目标值在数组中的开始位置和结束位置。 如果数组中不存在目标值 target&…
阅读更多...
Netty学习——高级篇2 Netty解码技术

Netty学习——高级篇2 Netty解码技术

接上篇&#xff1a;Netty学习——高级篇1 拆包 、粘包与编解码技术&#xff0c;本章继续介绍Netty的其他解码器 1 DelimiterBasedFrameDecoder分隔符解码器 DelimiterBasedFrameDecoder 分隔符解码器是按照指定分隔符进行解码的解码器&#xff0c;通过分隔符可以将二进制流拆分…
阅读更多...
粘性定位应用

粘性定位应用

现象&#xff1a;当页面滑动到某个位置时&#xff0c;图片吸顶。 思路&#xff1a;创建一个father背景。包含内容和需要吸顶的背景图 当滚轮运动距离大于800px时&#xff0c;将吸顶图的position设置为sticky&#xff0c;距离顶部改为0px。 html代码&#xff1a; <!DOCTYPE …
阅读更多...
基于PyTorch神经网络进行温度预测——基于jupyter实现

基于PyTorch神经网络进行温度预测——基于jupyter实现

导入环境 import numpy as np import pandas as pd import matplotlib.pyplot as plt import torch import torch.optim as optim import warnings warnings.filterwarnings("ignore") %matplotlib inline读取文件 ### 读取数据文件 features pd.read_csv(temps.…
阅读更多...
Linux第90步_异步通知实验

Linux第90步_异步通知实验

“异步通知”的核心就是信号&#xff0c;由“驱动设备”主动报告给“应用程序”的。 1、添加“EXTI3.c” #include "EXTI3.h" #include <linux/gpio.h> //使能gpio_request(),gpio_free(),gpio_direction_input(), //使能gpio_direction_output(),gpio_get_v…
阅读更多...
有序二叉树的增删改查（源代码讲解）

有序二叉树的增删改查（源代码讲解）

有序二叉树的相关实体类 TreeNode类 二叉树结点类&#xff0c;包含三个属性&#xff1a;value&#xff0c;leftChild&#xff0c;rightChild 有序二叉树类就包括这样一个根节点 剩下的getter和setter方法&#xff0c;有参无参构造&#xff0c;toString方法都是老生长谈&…
阅读更多...
Redis入门到通关之Hash命令

Redis入门到通关之Hash命令

文章目录 ⛄介绍⛄命令⛄RedisTemplate API❄️❄️添加缓存❄️❄️设置过期时间(单独设置)❄️❄️添加一个Map集合❄️❄️提取所有的小key❄️❄️提取所有的value值❄️❄️根据key提取value值❄️❄️获取所有的键值对集合❄️❄️删除❄️❄️判断Hash中是否含有该值 ⛄…
阅读更多...
阐述嵌入式系统的基本组成：硬件层、驱动层、操作系统层和应用层

阐述嵌入式系统的基本组成：硬件层、驱动层、操作系统层和应用层

大家好&#xff0c;今天给大家介绍阐述嵌入式系统的基本组成&#xff1a;硬件层、驱动层、操作系统层和应用层&#xff0c;文章末尾附有分享大家一个资料包&#xff0c;差不多150多G。里面学习内容、面经、项目都比较新也比较全&#xff01;可进群免费领取。 嵌入式系统是一种能…
阅读更多...
Java集合（一）--Map（2）

Java集合（一）--Map（2）

ConcurrentHashMap与HashTable 底层实现 在JDK1.7时&#xff0c;底层采用的是分段数组&#xff0b;链表的形式&#xff0c;在JDK1.8之后&#xff0c;采用的是与HashMap相同的形式&#xff0c;数组链表/红黑树。而HashTable采用的是数组链表的形式。 如何实现线程安全 Concu…
阅读更多...
如何访问远程服务器？

如何访问远程服务器？

在现代技术时代&#xff0c;随着信息化的快速发展&#xff0c;远程访问服务器已经成为了不可或缺的一种需求。无论是企业还是个人用户&#xff0c;都需要通过远程访问来管理、传输和获取数据。本文将介绍一种名为【天联】的工具&#xff0c;它能够通过私有通道进行远程服务器访…
阅读更多...
vscode配置c\c++及美化

vscode配置c\c++及美化

文章目录 vscode配置c\c及美化1.安装vscode2.汉化3.安装c\c插件4.安装mingw5.配置mingw6. 运行c代码6.1 创建代码目录6.2 设置文件配置6.3 创建可执行任务&#xff1a;task.json6.4 编译执行6.5 再写其他代码6.6 运行多个c文件 7. 运行c文件8.调式代码8.1 创建launch.json8.2 修…
阅读更多...
【排序 贪心】3107. 使数组中位数等于 K 的最少操作数

【排序 贪心】3107. 使数组中位数等于 K 的最少操作数

算法可以发掘本质&#xff0c;如&#xff1a; 一&#xff0c;若干师傅和徒弟互有好感&#xff0c;有好感的师徒可以结对学习。师傅和徒弟都只能参加一个对子。如何让对子最多。 二&#xff0c;有无限多1X2和2X1的骨牌&#xff0c;某个棋盘若干格子坏了&#xff0c;如何在没有坏…
阅读更多...
Springboot+Vue项目-基于Java+MySQL的母婴商城系统(附源码+演示视频+LW)

Springboot+Vue项目-基于Java+MySQL的母婴商城系统(附源码+演示视频+LW)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &…
阅读更多...
常用组合逻辑电路模块(5)：加法器

常用组合逻辑电路模块(5)：加法器

半加器和全加器 半加器 半加&#xff1a;只考虑两个加数本身&#xff0c;不考虑低位进位的加法运算。实现半加运算的逻辑电路称为半加器。 其对应真值表为&#xff1a; 由真值表可得逻辑表达式&#xff1a; 逻辑电路和框图如下&#xff1a; 其中&#xff0c;CO为进位输出端&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023