前端进阶之HTML表单

news2024/11/26 9:56:24

前端之HTML表单

1.HTML表单的定义及概述

HTML 表单用于搜集不同类型的用户输入。

用<form> 元素定义HTML表单

例如：

<form>
 .
form elements
 .
</form>

1.1 HTML 表单包含表单元素：表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

<input> 元素

<input> 元素是最重要的表单元素。

<input>元素有很多形态，根据不同的 type 属性。

在这里插入图片描述

1.2 文本输入

<input type="text"> 定义用于文本输入的单行输入字段：

例如：

<!DOCTYPE html>
<html>
<body>

<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

<p>请注意表单本身是不可见的。</p>

<p>同时请注意文本字段的默认宽度是 20 个字符。</p>

</body>
</html>

结果如下
在这里插入图片描述

1.3 单选按钮输入

<input type="radio">定义单选按钮。

单选按钮允许用户在有限数量的选项中选择其中之一：

例如：

<!DOCTYPE html>
<html>
<body>

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form> 

</body>
</html>

在这里插入图片描述

1.4 提交按钮

<input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮。

表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。

表单处理程序在表单的 action 属性中指定：

<!DOCTYPE html>
<html>
<body>

<form action="/demo/demo_form.asp">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form> 

<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>

</body>
</html>

在这里插入图片描述

1.5 Action 属性

action 属性定义在提交表单时执行的动作。(跟1.4那个东西联合使用)

向服务器提交表单的通常做法是使用提交按钮。

通常，表单会被提交到 web 服务器上的网页。

在上面的例子中，指定了某个服务器脚本来处理被提交表单：

<form action="action_page.php">

1.6 Method 属性

method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：

<form action="action_page.php" method="GET">
<!--或：-->
<form action="action_page.php" method="POST">

GET（默认方法）：

如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。

当您使用 GET 时，表单数据在页面地址栏中是可见的：

注释：GET 最适合少量数据的提交。浏览器会设定容量限制。

POST：

如果表单正在更新数据，或者包含敏感信息（例如密码）。

POST 的安全性更好，因为在页面地址栏中被提交的数据是不可见的

1.7 Name 属性

如果要正确地被提交，每个输入字段必须设置一个 name 属性。

本例只会提交 “Last name” 输入字段：

<!DOCTYPE html>
<html>
<body>

<form action="/demo/demo_form.asp">
First name:<br>
<input type="text" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form> 

<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>

<p>first name 不会被提交，因为此 input 元素没有 name 属性。</p>

</body>
</html>

在这里插入图片描述

1.8 用 组合表单数据

<fieldset>元素组合表单中的相关数据

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

<!DOCTYPE html>
<html>
<body>

<form action="/demo/demo_form.asp">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form>

</body>
</html>

在这里插入图片描述

1.9 HTML Form 属性

HTML<form> 元素，已设置所有可能的属性，是这样的：（这个勾八有点像CSS统一设置的那种感觉奥）

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form elements
 .
</form>

在这里插入图片描述
后边再细讲。

2. HTML 表单属性

本节介绍 HTML<form> 元素的不同属性.

2.1 Action 属性

action 属性定义提交表单时要执行的操作。

通常，当用户单击“提交”按钮时，表单数据将发送到服务器上的文件中。

在下面的例子中，表单数据被发送到名为 “action_page.php” 的文件。该文件包含处理表单数据的服务器端脚本：

<!DOCTYPE html>
<html>
<body>

<h1>HTML 表单</h1>

<form action="/demo/html/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Bill"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Gates"><br><br>
  <input type="submit" value="提交">
</form> 

<p>如果您点击提交按钮，form-data 会被发送到名为 "/action_page.php" 的页面。</p>

</body>
</html>

在这里插入图片描述

2.2 Target 属性

target 属性规定提交表单后在何处显示响应。

target 属性可设置以下值之一：
在这里插入图片描述
例如：

<!DOCTYPE html>
<html>
<body>

<h1>form target 属性</h1>

<p>在提交这个表单后，将在新浏览器标签页中打开结果：</p>

<form action="/demo/html/action_page.php" target="_blank">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Bill"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Gates"><br><br>
  <input type="submit" value="Submit">
</form> 

</body>
</html>

在这里插入图片描述

2.3 Method 属性

method 属性指定提交表单数据时要使用的 HTTP 方法。

表单数据可以作为 URL 变量（使用 method=“get”）或作为 HTTP post 事务（使用 method=“post”）发送。

提交表单数据时，默认的 HTTP 方法是 GET。

GET方法的例子：

<!DOCTYPE html>
<html>
<body>

<h1>method 属性</h1>

<p>该表单会使用 GET 方法提交：</p>

<form action="/demo/html/action_page.php" target="_blank" method="get">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Bill"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Gates"><br><br>
  <input type="submit" value="Submit">
</form>

<p>提交后，请注意，表单值在新的浏览器标签页的地址栏中是可见的。</p>

</body>
</html>

在这里插入图片描述
POST方法的例子：

<!DOCTYPE html>
<html>
<body>

<h1>method Attribute</h1>

<p>该表单会使用 POST 方法提交：</p>

<form action="/demo/html/action_page.php" target="_blank" method="post">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Bill"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Gates"><br><br>
  <input type="submit" value="Submit">
</form>

<p>提交后，请注意，与 GET 方法不同，表单值在新浏览器的地址栏中不可见。</p>

</body>
</html>

关于 GET 的注意事项：

  • 以名称/值对的形式将表单数据追加到 URL
  • 永远不要使用 GET 发送敏感数据！（提交的表单数据在 URL 中可见！）
  • URL 的长度受到限制（2048 个字符）
  • 对于用户希望将结果添加为书签的表单提交很有用
  • GET 适用于非安全数据，例如 Google 中的查询字符串
    关于 POST 的注意事项：
  • 将表单数据附加在 HTTP 请求的正文中（不在 URL 中显示提交的表单数据）
  • POST 没有大小限制，可用于发送大量数据。
  • 带有 POST 的表单提交无法添加书签

2.4 Autocomplete 属性

autocomplete 属性规定表单是否应打开自动完成功能。（就是历史记录，记忆你上次输入的东西，就是网页的钥匙库）

启用自动完成功能后，浏览器会根据用户之前输入的值自动填写值。

例子：

<!DOCTYPE html>
<html>
<body>

<h1>form autocomplete 属性</h1>

<p>请填写并提交表单，然后重新加载页面，再次开始填写表单 - 查看 autocomplete 的工作原理。</p>

<p>然后，请尝试把 autocomplete 设置为 "off"。</p>

<form action="/demo/html/action_page.php" autocomplete="on">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="email">Email:</label>
  <input type="text" id="email" name="email"><br><br>
  <input type="submit">
</form>

</body>
</html>

这个结果就不演示了，自己运行一下就明白了

2.5 Novalidate 属性

novalidate 属性是一个布尔属性。

如果已设置，它规定提交时不应验证表单数据。

现在并不知道这个东西有啥用，先放着回头再说。

2.6 表单属性总结

在这里插入图片描述

3. HTML表单元素

3.1 <input>元素

最重要的表单元素是 元素。

<input>元素根据不同的 type 属性，可以变化为多种形态。

3.2 <select>元素（下拉列表）

<select>元素定义下拉列表：

<!DOCTYPE html>
<html>
<body>

<form action="/demo/demo_form.asp">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>

</body>
</html>

在这里插入图片描述
在这里插入图片描述

3.3 <textarea> 元素

<textarea>元素定义多行输入字段（文本域）

<!DOCTYPE html>
<html>
<body>

<h1>Textarea</h1>

<p>textarea 元素定义多行输入字段。</p>

<form action="/demo/html/action_page.php">
  <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
  <br><br>
  <input type="submit">
</form>

</body>
</html>

在这里插入图片描述

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

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

相关文章

postman如何导入证书

postman如何导入证书

1、打开postman&#xff0c;点击Settings。 2、添加证书。 3、填写要访问平台的URL路径及端口、证书文件、证书密码。 4、添加完之后即可立即调用postman。
阅读更多...
STM32项目分享：智能家居语音系统

STM32项目分享：智能家居语音系统

目录 一、前言 二、项目简介 1.功能详解 2.主要器件 三、原理图设计 四、PCB硬件设计 1.PCB图 2.PCB打板焊接图: 五、程序设计 六、实验效果 七、包含内容 项目分享 一、前言 项目成品图片&#xff1a; 哔哩哔哩视频链接&#xff1a; https://www.bilibili.com…
阅读更多...
C51学习归纳6 --- UART串口数据通信

C51学习归纳6 --- UART串口数据通信

这一部分我认为是十分重要的&#xff0c;没有了数据的传输&#xff0c;我们做的很多事情将是没有意义的。我们一般利用串口做两件事&#xff0c;一是单片机向电脑发送信息&#xff0c;二是单片机接收电脑的信息。 一、UART原理 TXD:发送信息通道,RXD: 接收信息通道。我发送你接…
阅读更多...
鸿蒙轻内核M核源码分析系列九 互斥锁Mutex

鸿蒙轻内核M核源码分析系列九 互斥锁Mutex

多任务环境下会存在多个任务访问同一公共资源的场景&#xff0c;而有些公共资源是非共享的临界资源&#xff0c;只能被独占使用。鸿蒙轻内核使用互斥锁来避免这种冲突&#xff0c;互斥锁是一种特殊的二值性信号量&#xff0c;用于实现对临界资源的独占式处理。另外&#xff0c;…
阅读更多...
问题：律师会见委托人的方式包括团体会见和（ ）。 #职场发展#笔记#学习方法

问题：律师会见委托人的方式包括团体会见和（ ）。 #职场发展#笔记#学习方法

问题&#xff1a;律师会见委托人的方式包括团体会见和&#xff08; &#xff09;。 参考答案如图所示
阅读更多...
Linux常见故障处理之df命令卡住不输出

Linux常见故障处理之df命令卡住不输出

一、背景说明 朋友咨询Linux系统下输入df -h命令后没有任何输出结果&#xff0c;博主的第一反应是/根分区磁盘空间满了&#xff0c;朋友说cd等其他命令可以执行。博主又猜测可能是有人误定义了命令别名&#xff0c;进一步确认命令卡住在等待输出页面。事后博主想起来可能是共享…
阅读更多...
CAN总线学习笔记-CAN帧结构

CAN总线学习笔记-CAN帧结构

数据帧 数据帧&#xff1a;发送设备主动发送数据&#xff08;广播式&#xff09; 标准格式的11ID不够用了&#xff0c;由此产生了扩展格式 SOF&#xff1a;帧起始&#xff0c;表示后面一段波形为传输的数据位 ID&#xff1a;标识符&#xff0c;区分功能&#xff0c;同时决定优…
阅读更多...
手机直连SpaceX星链，一场“酱油比鸡贵”的营销游戏

手机直连SpaceX星链，一场“酱油比鸡贵”的营销游戏

手机能支持卫星通话&#xff0c;在今天已经不算什么新闻。但手机直连卫星&#xff0c;近期确实引起了不少消费者的好奇。 最近有新闻爆出&#xff0c;马斯克的SpaceX利用运营商T-Mobile的网络&#xff0c;首次完成了通过星链&#xff08;Starlink&#xff09;卫星发送短信、视频…
阅读更多...
Java——break、continue和return

Java——break、continue和return

一、break break语句用于立即终止最内层的循环或switch语句。它是一种控制流语句&#xff0c;能够在满足特定条件时跳出循环或结束switch块的执行。 1、在循环中使用 1&#xff09;一般的 break break语句可以用于for、while和do-while循环中。当在循环中遇到break语句时&a…
阅读更多...
IP质量不够好，可以使用高质量的代理IP吗？

IP质量不够好，可以使用高质量的代理IP吗？

在当今互联网时代&#xff0c;IP代理是一个不可或缺的工具&#xff0c;但许多人可能对它的原理和应用感到困惑。IP代理涉及IP地址的使用和切换&#xff0c;旨在提供更好的隐私保护和访问控制。本文将介绍IP代理的工作原理以及为什么选择高质量的代理IP。 一、IP代理的基本原理…
阅读更多...
LeetCode LRU缓存

LeetCode LRU缓存

题目描述 请你设计并实现一个满足 LRU (最近最少使用) 缓存 约束的数据结构。 实现 LRUCache 类&#xff1a; LRUCache(int capacity) 以 正整数 作为容量 capacity 初始化 LRU 缓存int get(int key) 如果关键字 key 存在于缓存中&#xff0c;则返回关键字的值&#xff0c;…
阅读更多...
CarSim车辆运动轨迹绘制

CarSim车辆运动轨迹绘制

CarSim车辆运动轨迹绘制 CarSim中与车辆位置有关的信息分别为Xo和Yo 输出到Simulink中 导入到工作空间中保存&#xff0c;low_carsim_path.mat &#xff0c;绘制结果曲线&#xff0c;low_carsim_path_comp.m data csvread(low_two_path.csv,1,0); low_two_path_x data(:,1)…
阅读更多...
电商数据驱动的决策智慧：深度解析数据采集与应用||电商API接口接入与应用

电商数据驱动的决策智慧：深度解析数据采集与应用||电商API接口接入与应用

引言 在数字化时代&#xff0c;数据已成为电商企业最宝贵的资产之一。通过有效的数据采集&#xff0c;企业能够洞察市场动态、理解消费者需求、优化运营策略&#xff0c;从而在激烈的市场竞争中脱颖而出。本文将深入探讨电商数据采集的重要性、常用方法以及应用实践。 一、电商…
阅读更多...
教程 | Navicat 17 管理连接新方法

教程 | Navicat 17 管理连接新方法

Navicat 17 提供了比以往更多的连接数据库实例的方式。除了传统的连接字符串方式以外&#xff0c;Navicat 17 还支持 URI 连接&#xff0c;无论身在何处&#xff0c;都可以轻松地通过 URI 访问对象。另外&#xff0c;还有一个新的管理连接功能&#xff0c;即允许你通过一个以用…
阅读更多...
在github上创建（上传、关联）自已的项目

在github上创建（上传、关联）自已的项目

目录 创建一个github项目并进行开发。 1.github创建空项目 2. git clone 项目 3. 将项目关联 创建一个github项目并进行开发。 1.github创建空项目 右边的New 然后按步创建就行 2. git clone 项目 复制这个连接 然后在终端&#xff1a;git clone [刚才复制的连接] 3. 将…
阅读更多...
【代码随想录】【算法训练营】【第27天】 [39]组合总和 [40] 组合总和II [131]分割回文串

【代码随想录】【算法训练营】【第27天】 [39]组合总和 [40] 组合总和II [131]分割回文串

前言 思路及算法思维&#xff0c;指路 代码随想录。 题目来自 LeetCode。 day26&#xff0c; 休息的周末~ day 27&#xff0c;周一&#xff0c;库存没了&#xff0c;哭死~ 题目详情 [39] 组合总和 题目描述 39 组合总和 解题思路 前提&#xff1a;组合的子集问题&…
阅读更多...
[matlab]折线图之多条折线如何绘制实心圆作为标记点

[matlab]折线图之多条折线如何绘制实心圆作为标记点

使用MarkerFaceColor是标记点填充的颜色&#xff0c;b&#xff0c;表示blue&#xff0c;蓝色 plot(x, a, d--, MarkerFaceColor, b); % 绘制仿真结果的曲线如果一张图多条曲线那么每条曲线需要单独调用一次plot&#xff0c;每个plot间用hold on 连接 plot(x, a, d--, MarkerF…
阅读更多...
基于pytorch的车牌识别

基于pytorch的车牌识别

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 一、导入数据 from torchvision.transforms import transforms from torch.utils.data import DataLoader from torchvision import datase…
阅读更多...
VMware ESXi 8.0U2c macOS Unlocker OEM BIOS 集成网卡驱动 Marvell AQC 网卡定制版

VMware ESXi 8.0U2c macOS Unlocker OEM BIOS 集成网卡驱动 Marvell AQC 网卡定制版

VMware ESXi 8.0U2c macOS Unlocker & OEM BIOS 集成网卡驱动 Marvell AQC 网卡定制版 VMware ESXi 8.0U2c macOS Unlocker & OEM BIOS 集成网卡驱动和 NVMe 驱动 (集成驱动版) 发布 ESXi 8.0U2 集成驱动版&#xff0c;在个人电脑上运行企业级工作负载 请访问原文链…
阅读更多...
Python Virtualenv：创建独立的 Python 开发环境

Python Virtualenv：创建独立的 Python 开发环境

在当今软件开发的世界中&#xff0c;Python 是一种备受欢迎的编程语言&#xff0c;其简洁、易读和强大的特性吸引了无数开发者。然而&#xff0c;随着项目的增多和复杂度的提高&#xff0c;有效地管理 Python 项目所需的各种依赖项和库变得越来越重要。在这种情况下&#xff0c…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023