HTML+CSS - 表单交互(一)

news2025/7/17 2:41:51

1. 前言

​​​​​​​

Web 表单是用于和用户交互的强大工具——其常用于收集用户数据和控制用户界面。

web 表单是用户和 web 站点或应用程序之间交互的主要内容之一。它们允许用户输入数据,大多数情况下会将数据发送到 web 服务器进行处理和存储

2. form标签

嵌套在表单中的结构元素

2.1 <fieldset></fieldset>

在表单内部构造小组件的形式,可以想像为将表单内部不同功能区域进行分区

每个区域的名称由<legend></legend>进行控制

	<body>
		<form>
			<fieldset>
				<legend>OKOKOKOK</legend>
			<ul>
				<li>
					<label for='name'>Name:</label>
					<input type='text' id='name' name='user_name'>
				</li>
				<li>
					<label for='mail'>E-mail</label>
					<input type='email' id='mail' name='user_email'>
				</li>
				<li>
					<label for='msg'>Message</label>
					<textarea id='msg' name='user_message'></textarea>
				</li>
			</ul>
			</fieldset>
		</form>
	</body>

如上图所示,OKOKOK则是这个区域的名称, 囊括了Name,E-mail,Message等交互信息

理想情况下,长表单应该在拆分为多个页面,但是如果表单很长,却必须在单个页面上,那么将以不同的关联关系划分的分段,分别放在不同的 fieldset 里,可以提高可用性。

2.2 <label></label>

标签用于定义表单控件的标签,通常用于向用户描述输入字段的用途。通过将for属性与表单元素的id属性相关联,用户点击该标签时,浏览器会自动将焦点放到关联的输入字段上。

简单来说label有两个功能

- 补充说明交互区域的功能

- 当用户点击label所显示的文字时,光标会自动跳转至交互区域

<label for="name">Name:</label> <input type="text" id="name" name="user_name" />

3. 表单组件

3.1 文本框text

<input type="text" id="comment" name="comment" value="I'm a text field" />

name 属性定义了表单数据在提交到服务器时的,也就是该字段的标识符。服务器接收表单数据时,会以 name的值作为标识,并将输入的值与之关联。

value则是键值所对应的数值

id是为了CSS进行修饰处理

上述的例子在提交表单之后,在后台会得到

comment = 'I'm a text field';

3.2 密码password

<input type="password" id="pwd" name="pwd" />

其实质也是一种文本框 

会模糊输入到字段中的值(例如,用点或星号),这样它就不能被其他人读取。 

3.3 隐藏项目

<input type="hidden" id="timestamp" name="timestamp" value="1286705410" />

它被用于创建对用户不可见的表单部件,但在发送表单时,会与其他的表单数据一起被发送到服务器

3.4 选择项目

• 单选框

type设置为radio来创建单选按钮

<input type='radio' id='OK' name='meat' checked>

几个单选按钮可以连接在一起。如果它们的name属性共享相同的值,那么它们将被认为属于同一组的按钮。同一组中只有一个按钮可以同时被选;

• 复选框

type设置为checkbox以此实现复选框

<input type="checkbox" id="questionOne" name="subscribe" value="yes" checked />

相关的复选框元素应该使用具有相同值的name属性。包含 checked 属性使复选框在页面加载时自动被选中。点击复选框或其相关联的标签也将自动翻转复选框的状态(选中、取消选中)

在使用复选框时,最好使用fieldset与表格所嵌套的形式进行排列,直观整齐

<fieldset>
<legend></legend>
<ol>
<li>
<label for="peas">Peas</label>
<input type="checkbox" id="peas" name="vegetable" value="peas" />
</li>
<li>
<label for="peas">Peas</label>
<input type="checkbox" id="peas" name="meat" value="peas" />
</li>
</ol>
</fieldset>

3.5 按钮

在input中的按钮设置与button中的按钮设置,几乎等价对应

• Submit

将form中所交互的数据发送到服务器

<button type="submit">This is a <strong>submit button</strong></button>

<input type="submit" value="This is a submit button" />

• Reset

将所有表单小部件重新设置为默认value值

<button type="reset">This is a <strong>reset button</strong></button>

<input type="reset" value="This is a reset button" />

• Anonymous

自定义按钮,通过JavaScript进行自定义定制功能

<button type="button">This is an <strong>anonymous button</strong></button>

<input type="button" value="This is an anonymous button" />

• 图片按钮

<input type="image" alt="Click me!" src="my-img.png" width="80" height="30" />

src对应的链接图片,通过width与height设置图片的大小

通过图片进行表单发送,这个图片组件返回的是一个由X,Y组成的坐标值

文件选择器

定义type为file,使得用户将文件发送到服务器

通过设置不同属性进行文件传输的约束,例如accept属性约束传输文件类型,设置multiple可选择多个文件

<input type="file" accept="image/*;capture=camera" />
<input type="file" accept="video/*;capture=camcorder" />
<input type="file" accept="audio/*;capture=microphone" />

4. 其他类型

4.1 邮箱

<input type="email" id="email" name="email" />

用户需要输入一个合法的电子邮件地址,任何其他输入都会使得浏览器在表单提交时显示错误信息

4.2 查询

查询字段旨在用于在页面和应用程序上创建搜索框 

<input type="search" id="search" name="search" />

如若没有设定交互形式,本质与text格式一样,但显示方式不同

4.3 电话号码

创建一个专门用于输入电话号码的文本域

<input type="tel" id="tel" name="tel" />

4.4 网址

创建一个专门输入网址的字段

<input type="url" id="url" name="url" />

浏览器会在没有协议(例如 http:)输入或网址格式不对的情况下报告错误

4.5 数字

<input type="number" name="change" id="pennies" min="0" max="1" step="0.01" />

从 0 到 1 之间选择值得数字选择器,且单击一次按钮所增长或减少的值为 0.01

4.6 滑块组件

滑块组件常用于选择数字,但准确性肯定是不如直接输入数字,所以常用于选择精准度要求不那么高的数字信息

使用range进行滑块的声明

<label for="price">Choose a maximum house price: </label>
<input
  type="range"
  name="price"
  id="price"
  min="50000"
  max="500000"
  step="100"
  value="250000" />
<output class="price-output" for="price"></output>
min滑块所指示的数字最小值
max滑块所指示数字的最大值
step每移动滑块改变数字大小的范围

使用ouput实时更新滑块所显示的数字大小

注意,在现实生活中还需要使用Javascript真正的去实时更新数字大小 

4.7 时间模块

• datetime-local

使用户选择年-月-日-具体时间的信息

<input type="datetime-local" name="datetime" id="datetime" />

• month

用户选择年-月信息

<input type="month" name="month" id="month" />

• time

选择具体时间信息

<input type="time" name="time" id="time" />

• week

选择周信息,第xx年的第几周

<input type="week" name="week" id="week" />


时期同数字一样,也可以通过相关参数进行自定义化调整,例如min,max,step

4.8 颜色控制器

设定type为color,可以选择颜色控制器

<input type="color" name="color" id="color" />

5. 参考资料

https://developer.mozilla.org/zh-CN/docs/Learn/Forms/HTML5_input_types

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

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

相关文章

数据飞轮赋能科学决策:火山引擎 DataTester 升级 A/B 大模型评测

在数字化浪潮的推动下&#xff0c;企业数据化转型已成为不可逆转的时代趋势。随着企业对数据价值认知的深化&#xff0c;从优化数据管理到内部数据普惠&#xff0c;再到数据资产价值的充分挖掘&#xff0c;数据产品需求呈现爆发式增长。作为推动企业数智化升级的新范式&#xf…

数造科技入选中国信通院《高质量数字化转型产品及服务全景图》三大板块

9月24日&#xff0c;2024大模型数字生态发展大会暨“铸基计划”年中会议在北京召开。会上&#xff0c;中国信通院发布了2024年《高质量数字化转型产品及服务全景图&#xff08;上半年度&#xff09;》和《高质量数字化转型技术解决方案&#xff08;上半年度&#xff09;》等多项…

解决银河麒麟操作系统“/dev/root does not exist”错误的快速方法

解决银河麒麟操作系统“/dev/root does not exist”错误的快速方法 1、步骤2、注意 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 在安装系统时遇到“/dev/root does not exist”错误&#xff0c;通常是因为引导程序未正确设置启动设备。以…

golang学习笔记27-反射【重要】

本节也是GO核心部分&#xff0c;很重要。包括基本类型的反射&#xff0c;结构体类型的反射&#xff0c;类别方法Kind()&#xff0c;修改变量的值。 目录 一、概念&#xff0c;基本类型的反射二、结构体类型的反射三、类别方法Kind()四、修改变量的值 一、概念&#xff0c;基本…

Linux云计算 |【第四阶段】RDBMS1-DAY3

主要内容&#xff1a; 子查询&#xff08;单行单列、多行单列、单行多列、多行多列&#xff09;、分页查询limit、联合查询union、插入语句、修改语句、删除语句 一、子查询 子查询就是指的在一个完整的查询语句之中&#xff0c;嵌套若干个不同功能的小查询&#xff0c;从而一…

STM32 OLED

文章目录 前言一、OLED是什么&#xff1f;二、使用步骤1.复制 OLED.C .H文件1.1 遇到问题 2.统一风格3.主函数引用头文件3.1 oled.h 提供了什么函数 4.介绍显示一个字符的函数5. 显示十进制函数的讲解 三、使用注意事项3.1 配置符合自己的引脚3.2 花屏总结 前言 提示&#xff…

第L2周:机器学习|线性回归模型 LinearRegression:2. 多元线性回归模型

本文为365天深度学习训练营 中的学习记录博客原作者&#xff1a;K同学啊 任务&#xff1a; ●1. 学习本文的多元线形回归模型。 ●2. 参考文本预测花瓣宽度的方法&#xff0c;选用其他三个变量来预测花瓣长度。 一、多元线性回归 简单线性回归&#xff1a;影响 Y 的因素唯一&…

python15_转换为ASCII

转换为ASCII A A B 你好 C 66def str_to_ascii(s):# 如果输入是单个字符&#xff0c;直接返回其ASCII值if len(s) 1:return ord(s)# 否则返回每个字符的ASCII值列表return [ord(char) for char in s]def int_to_ascii(i):# 将整数转换为对应的ASCII字符return chr(i)if __…

气膜仓库出售:智能高效的新选择—轻空间

随着现代物流和仓储需求的不断增长&#xff0c;传统仓库模式已经难以满足市场的多样化需求。气膜仓库凭借其灵活性、高效性和智能化的特点&#xff0c;成为仓储领域的新宠&#xff0c;而现在&#xff0c;我们推出了全新方向——气膜仓库出售&#xff0c;为企业提供更加灵活的资…

hex 文件和 bin 文件剖析

目录 一、概述二、hex 文件三、bin 文件 在单片机开发中&#xff0c;hex 文件和 bin 文件是非常常见的两种烧写文件格式。比如在 Keil 中&#xff0c;编译好程序后&#xff0c;点击 Download 就可以把 hex 文件烧录到板子上。 而有时候在我们实现 IAP 时&#xff0c;有需要生成…

《动手学深度学习》笔记2.5——神经网络从基础→使用GPU (CUDA-单卡-多卡-张量操作)

目录 0. 前言 原书正文 1. 计算设备 (CPU和GPU) 补充&#xff1a;torch版本cuda报错的解决方案 2. 张量与GPU 3. 存储在GPU上 4. 复制&#xff08;多卡操作&#xff09; 5. 旁注 (CPU和GPU之间挪数据) 6. 神经网络与GPU 小结 0. 前言 课程全部代码&#xff08;pytorc…

Linux进程终止进程等待进程程序替换

目录 一、进程终止 1.1进程退出的场景 1.2进程常见的退出方法 ​1.3多进程的退出 ​1.4exit( )和_exit( ) 二、进程等待 2.1进程等待的必要性 2.2进程等待的方式 2.3获取子进程的statue 2.4非阻塞轮询 2.5进程等待的底层原理 三、进程程序替换 3.1单进程程序替换 …

踩坑Resilience4j @Bulkhead

先说问题情况 系统环境 java version: 17spring boot: 3.xspring cloud: 4.x 项目配置和代码 项目中使用了Spring Cloud Circuit Breaker <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-circuitbre…

Android 简单实现联系人列表+字母索引联动效果

效果如上图。 Main Ideas 左右两个列表左列表展示人员数据&#xff0c;含有姓氏首字母的 header item右列表是一个全由姓氏首字母组成的索引列表&#xff0c;点击某个item&#xff0c;展示一个气泡组件(它会自动延时关闭)&#xff0c; 左列表滚动并显示与点击的索引列表item …

Solidity智能合约调用其他合约的三种主要方式

在 Solidity 中&#xff0c;智能合约之间的交互非常重要。调用其他合约的功能可以增强合约的灵活性&#xff0c;使其能够执行跨合约操作&#xff0c;比如获取数据、转移资金或触发其他合约的功能。本文将详细介绍 Solidity 中调用其他合约的不同方式及其应用场景。 1. 合约间调…

【Unity踩坑】Unity更新Google Play结算库

一、问题描述&#xff1a; 在Google Play上提交了app bundle后&#xff0c;提示如下错误。 我使用的是Unity 2022.01.20f1&#xff0c;看来用的Play结算库版本是4.0 查了一下文档&#xff0c;Google Play结算库的维护周期是两年。现在需要更新到至少6.0。 二、更新过程 1. 下…

JAVA内存模型!=JVM内存模型

文章目录 前言JVM内存模型JAVA内存模型JAVA内存模型解释的问题可见性问题一致性问题 总结 前言 有很多JAVA开发人员&#xff0c;在被问起&#xff1a;“你知道Java内存模型吗&#xff1f;”&#xff0c;都会回答&#xff1a;“知道&#xff0c;JAVA内存模型分为方法区、堆、……

悟透自己、悟透生活、悟透人生(此文无价)

很多人都会有这样的疑问&#xff1a;“为什么听了很多道理&#xff0c;却依然没有过好这一生&#xff1f;” 古人给出了这样的回答。 王阳明曾说&#xff1a;“知行合一。” 老子则言&#xff1a;“知人者智&#xff0c;自知者明。” 可见&#xff0c;一切问题的根源都出在了我…

CSDN 的 GIt 是没东西吗

虽然说吧 CSDN 的博客也就那样&#xff0c;记得去年的时候 CSDN 出了一个 Git 代码库&#xff0c;被骂得要死&#xff0c;基本上是从外面搬了一堆代码回来。 这回 CSDN 又玩了个新东西&#xff0c;干脆你可以把你的博客文章同步到你在 CSDN 开的代码库上了。 如何同步 在 CS…

数据增强之imgaug的使用

包的导入 path = r"D:\\" # sometimes = lambda aug: iaa.Sometimes(0.5, aug) img = cv2.imread("D:\\photo\\test.jpg") img = cv2.resize(img,(128,128)) # img = cv2.cvtColor(img,cv2.COLOR_RGBA2GRAY) cv2.imwrite(path+"img.jpg",img)随…