前端进阶之HTML表单

前端之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.mzph.cn/pingmian/23884.shtml

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

相关文章

探索Adobe XD：高效UI设计软件的中文入门教程

探索Adobe XD：高效UI设计软件的中文入门教程

在这个数字化世界里&#xff0c;创意设计不仅是为了吸引观众的注意&#xff0c;也是用户体验的核心部分。强大的设计工具可以帮助设计师创造出明亮的视觉效果&#xff0c;从而提高用户体验。 一、Adobe XD是什么&#xff1f; Adobe XD是一家知名软件公司 Adobe Systems 用户体…
阅读更多...
海南聚广众达电子商务咨询有限公司引领抖音电商新风尚

海南聚广众达电子商务咨询有限公司引领抖音电商新风尚

在数字化浪潮汹涌澎湃的今天&#xff0c;电商行业正迎来前所未有的发展机遇。作为电商领域的一颗璀璨明星&#xff0c;海南聚广众达电子商务咨询有限公司凭借其专业的抖音电商服务&#xff0c;成功吸引了众多商家的目光&#xff0c;成为了业界的一匹黑马。 海南聚广众达电子商…
阅读更多...
【全开源】CRM管理客户关系系统源码

【全开源】CRM管理客户关系系统源码

CRM&#xff1a;助力企业高效管理客户关系 全面解决企业销售团队的全流程客户服务难题&#xff0c;旨在助力企业销售全流程精细化、数字化管理&#xff0c;全面解决企业销售团队的全流程客户服务难题&#xff0c;帮助企业有效盘活客户资源、量化销售行为&#xff0c;合理配置资…
阅读更多...
vue2+elementui,动态生成的表单校验

vue2+elementui,动态生成的表单校验

话不多,先上一段视频,看看是不是你们需要的效果 elementui动态生成表单校验 附上代码 <template><div class"home"><div class"home-box"><!-- <menuHtml></menuHtml> --><div class"home-div"><…
阅读更多...
k8s AIOps

k8s AIOps

k8s AIOps 主要介绍下k8sgpt 官站 github 介绍 k8sgpt 是一个用于扫描Kubernetes集群、诊断和分级问题的工具。它以简单的英语呈现问题&#xff0c;并将站点可靠性工程&#xff08;SRE&#xff09;的经验编码到其分析器中。通过AI丰富问题的解释&#xff0c;k8sgpt帮助提取最…
阅读更多...
【C++】初识C++

【C++】初识C++

【C】初识C 文章概括关键字&#xff08;C98&#xff09;命名空间命名空间的定义命名空间的特性 输入与输出C中的输入输出输入输出的命名空间 缺省参数函数重载引用引用的概念引用的特性引用地使用场景引用做参数引用做返回值 常引用常引用的俩个例子 引用与指针的区别 内联函数…
阅读更多...
web端中使用vue3 实现 移动端的上拉滚动加载功能

web端中使用vue3 实现 移动端的上拉滚动加载功能

需要再web端实现上拉加载 纯属web端的东西 类似这样的功能效果 能够在web端实现滚动分页 overflow-y: scroll;首先给这个大盒子 一个 css 样式 支持滚动 再给固定高度 这个盒子里的内容就能立马滚动起来 给这个盒子一个ref 的属性 以及 有原生滚动事件 scroll const handle…
阅读更多...
通过龙讯旷腾PWmat发《The Journal of Chemical Physics》 ：基于第一性原理分子动力学热力学积分的离子溶剂化自由能计算

通过龙讯旷腾PWmat发《The Journal of Chemical Physics》 ：基于第一性原理分子动力学热力学积分的离子溶剂化自由能计算

背景导读 离子溶解是电化学中一个重要的过程。电化学反应中许多重要的参数&#xff0c;例如电化学还原电位、无限稀释活度系数、亨利定律溶解常数和离子溶解度等&#xff0c;都与离子的溶剂化能有关。然而&#xff0c;由于测量技术和数据处理的困难&#xff0c;离子溶剂化能的…
阅读更多...
vCenter7.0安装部署

vCenter7.0安装部署

vCenter7.0安装部署 一、准备环境二、创建新的虚拟机1.创建虚拟机2.第3-5步可直接默认安装并同意许可协议。3.其他设置4.第一阶段直接点完成即可 三、进入第二阶段安装&#xff08;输入ip&#xff1a;5480进入安装界面&#xff09; 一、准备环境 准备一台exsi&#xff0c;并登…
阅读更多...
MySQL之查询性能优化(九)

MySQL之查询性能优化(九)

查询性能优化 MySQL查询优化器的局限性 UNION的限制 有时&#xff0c;MySQL无法将限制条件从外层"下推"到内层&#xff0c;这使得原本能够限制部分返回结果的条件无法应用到内层查询的优化上。如果希望UNION的各个子句能够根据LIMIT只取部分结果集&#xff0c;或者…
阅读更多...
项目沟通管理

项目沟通管理

目录 1.概述 2.项目沟通的重要性和必要性 2.1.项目沟通的重要性 2.2.项目沟通的必要性 2.3.具体措施 3.三个过程 3.1.规划沟通管理 3.2.管理沟通 3.3.监督沟通 3.4.对应过程组 4.应用场景 4.1.十个应用场景 4.2.新产品开发项目需要与多个部门协调沟通 5.总结 1.概…
阅读更多...
调节效应多元统计回归

调节效应多元统计回归

什么是调节效应&#xff0c;给个例子说明一下: 背景 假设我们有一个国家的经济数据&#xff0c;我们希望研究产业数字化是否调节了环境规制对产业结构调整的影响。 步骤 1. 假设检验 原假设 (H0)&#xff1a; 产业数字化对环境规制与产业结构调整之间的关系没有调节作用。…
阅读更多...
银河麒麟V10_系统如何自定义添加桌面右键菜单选项

银河麒麟V10_系统如何自定义添加桌面右键菜单选项

本篇博客取自《银河麒麟桌面操作系统软件适配常见问题指导手册》官网可以下载。 环境 系统版本 适用系统&#xff1a;V10&#xff08;SP1&#xff09;适用架构&#xff1a;X86、ARM、MIPS 其他版本和架构可做参考。 解决方案 使用下面的这个demo 编译就可以看到效果 peony…
阅读更多...
每日一题——Python实现PAT甲级1063 Set Similarity（举一反三+思想解读+逐步优化）

每日一题——Python实现PAT甲级1063 Set Similarity（举一反三+思想解读+逐步优化）

一个认为一切根源都是“自己不够强”的INTJ 个人主页&#xff1a;用哲学编程-CSDN博客专栏&#xff1a;每日一题——举一反三Python编程学习Python内置函数 Python-3.12.0文档解读 目录 我的写法 优点 改进建议 时间复杂度分析 空间复杂度分析 总结 我要更强 优化方…
阅读更多...
【C语言】指针（4）

【C语言】指针（4）

一、回顾 在这之前&#xff0c;我们学习了很多关于指针的内容&#xff0c;我们先在这里简单的回顾一下。 1、一级指针 int* p; -- 整形指针-指向整形的指针 char* p; ... void* p;... ... 2、二级指针 int** p; char** p; ... 3、数组指针 -- 指向数组的指针 int (*p)[ ]…
阅读更多...
3038. 相同分数的最大操作数目 I(Rust模拟击败100%Rust用户)

3038. 相同分数的最大操作数目 I(Rust模拟击败100%Rust用户)

题目 给你一个整数数组 nums &#xff0c;如果 nums 至少 包含 2 个元素&#xff0c;你可以执行以下操作&#xff1a; 选择 nums 中的前两个元素并将它们删除。 一次操作的 分数 是被删除元素的和。 在确保 所有操作分数相同 的前提下&#xff0c;请你求出 最多 能进行多少次…
阅读更多...
Python | Leetcode Python题解之第136题只出现一次的数字

Python | Leetcode Python题解之第136题只出现一次的数字

题目&#xff1a; 题解&#xff1a; class Solution:def singleNumber(self, nums: List[int]) -> int:return reduce(lambda x, y: x ^ y, nums)
阅读更多...
Vue07-MVVM模型

Vue07-MVVM模型

一、MVVM模型的定义 M&#xff1a;模型&#xff08;model&#xff09;&#xff1a;对应data中的数据&#xff1b;V&#xff1a;视图&#xff08;view&#xff09;&#xff1a;模版&#xff1b;VM&#xff1a;视图模型&#xff08;ViewModel&#xff09;Vue的实例对象。 Vue.js…
阅读更多...
WSDM2022推荐系统相关论文整理（一）

WSDM2022推荐系统相关论文整理（一）

2022年第15届国际网络搜索与数据挖掘会议WSDM在2022年2月21日到25日于线上举行&#xff0c;共收到了786份有效投稿&#xff0c;最终录取篇数为159篇&#xff0c;录取率为20.23%。作为主流的搜索与数据挖掘会议&#xff0c;论文的话题主要侧重于搜索、推荐以及数据挖掘领域&…
阅读更多...
第二证券炒股知识：北交所的股票是a股吗？是主板吗？

第二证券炒股知识：北交所的股票是a股吗？是主板吗？

北交所的股票是a股&#xff0c;但不属于主板&#xff0c;是一个单独的板块。 A股主板是在上海证券买卖所或许深圳证券买卖所上市的公司&#xff0c;主板通常是大盘股&#xff0c;多为商场占有率高、规划大、盈余安稳良好的大型企业。沪市主板以600、601或603最初&#xff0c;深…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023