编程笔记 html5cssjs 022 HTML表单概要

编程笔记 html5&css&js 022 HTML表单概要

  • 一、<form> 元素
  • 二、HTML Form 属性
  • 小结

网页光是输出没有输入可不行,因为输出还是比输入容易,所有就先接触输出,后学习输入。html用来输入的东西叫“表单”。
HTML 表单用于搜集不同类型的用户输入。

一、 元素

HTML 表单用于收集用户输入。

元素定义 HTML 表单:
<form>.
form elements.
</form>

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

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

<input> 元素有很多形态,根据不同的 type 属性。
这是使用的类型:

类型	描述
text	定义常规文本输入。
radio	定义单选按钮输入(选择多个选择之一)
submit	定义提交按钮(提交表单)

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

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

注释:表单本身并不可见。还要注意文本字段的默认宽度是 20 个字符。
单选按钮输入
<input type="radio"> 定义单选按钮。
单选按钮允许用户在有限数量的选项中选择其中之一:

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

提交按钮
<input type="submit"> 定义用于向表单处理程序(form-handler)提交表单的按钮。
表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。
表单处理程序在表单的 action 属性中指定:

<form action="action_page.php">
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> 

Action 属性
action 属性定义在提交表单时执行的动作。
向服务器提交表单的通常做法是使用提交按钮。
通常,表单会被提交到 web 服务器上的网页。
在上面的例子中,指定了某个服务器脚本来处理被提交表单:
<form action="action_page.php">
如果省略 action 属性,则 action 会被设置为当前页面。
Method 属性
method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST):
<form action="action_page.php" method="GET">
或:
<form action="action_page.php" method="POST">
何时使用 GET?
您能够使用 GET(默认方法):
如果表单提交是被动的(比如搜索引擎查询),并且没有敏感信息。
当您使用 GET 时,表单数据在页面地址栏中是可见的:
action_page.php?firstname=Mickey&lastname=Mouse
注释:GET 最适合少量数据的提交。浏览器会设定容量限制。
何时使用 POST?
您应该使用 POST:
如果表单正在更新数据,或者包含敏感信息(例如密码)。
POST 的安全性更好,因为在页面地址栏中被提交的数据是不可见的。
Name 属性
如果要正确地被提交,每个输入字段必须设置一个 name 属性。

<form action="action_page.php">
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> 

<fieldset> 组合表单数据

元素组合表单中的相关数据 ` `元素为 `` 元素定义标题。
<form action="action_page.php">
<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> 

二、HTML Form 属性

HTML <form> 元素,已设置所有可能的属性,是这样的:

<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> 

下面是 <form> 属性的列表:

属性	描述
accept-charset	规定在被提交表单中使用的字符集(默认:页面字符集)。
action	规定向何处提交表单的地址(URL)(提交页面)。
autocomplete	规定浏览器应该自动完成表单(默认:开启)。
enctype	规定被提交数据的编码(默认:url-encoded)。
method	规定在提交表单时所用的 HTTP 方法(默认:GET)。
name	规定识别表单的名称(对于 DOM 使用:document.forms.name)。
novalidate	规定浏览器不验证表单。
target	规定 action 属性中地址的目标(默认:_self)。

小结

混个脸熟吧,先。后面慢慢就真熟了,熟练。

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

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

相关文章

安全与认证Week4

目录 本章需要理解的问题 历年题还出现 Web Security (TLS/SSL) 关于网络 使用网络会受到的威胁 各层安全协议 S/MIME、PGP&#xff08;后面和S/MIME一起出现&#xff09;、Kerberos、TLS/SSL 和 IP/IPSec 分别是&#xff1a; S/MIME (Secure/Multipurpose Internet Mail Exten…

cartographer切换地图显示问题,临时解决方案

注意:该方案只在2张地图的子图数量不同时才有效,即通过检测子图的不同来清除路径变量,是临时的解决方案,正确的思路应该再写一个话题或服务通知rviz更新数据 附代码 void SubmapsDisplay::processMessage(const ::cartographer_ros_msgs::SubmapList::ConstPtr& msg)…

DsPdf:GcPdf 7.0 for NET Crack

DsPdf:GcPdf 7.0 用于全面文档控制的功能丰富的 C# .NET PDF API 库 PDF 文档解决方案&#xff08;DsPdf&#xff0c;以前称为 GcPdf&#xff09;可让您快速、高效地生成文档&#xff0c;且无需依赖任何内存。 在 C# .NET 中生成、加载、编辑和保存 PDF 文档 支持多种语言的全…

VMWARE ESXi存储多路径策略修改

一、存储多路径介绍 VMware 路径选择插件 (PSP) 负责选择 I/O 请求的物理路径。插件是 VMware NMP 的子模块。NMP 根据设备类型为每个逻辑设备分配默认 PSP。每个PSP 启用并执行相应的路径选择策略。支持的路径选项有以下3种&#xff1a; VMW_PSP_MRU - 最近使用 它将选择在系…

安装Unity详细教程(如何获取免费个人版许可证)

文章目录 下载Unity Hub安装Unity Hub登录获取免费个人版许可证安装Unity编辑器卸载Unity编辑器 下载Unity Hub 首先&#xff0c;我们需要到Unity的官网下载Unity Hub&#xff1a;Unity CN 我们可以在Unity Hub上管理我们的编辑器版本和项目文件。 安装Unity Hub 然后安装Un…

科技智慧,产业链全覆盖:河南恩珅德农业的养殖业务优势

河南恩珅德农业以科技智慧和全产业链覆盖的优势&#xff0c;成功打造了一体化的养殖业务模式&#xff0c;为养殖者提供了全面的支持和优越的管理体验。以下是该企业养殖业务的核心优势&#xff1a; 1. 先进科技智慧 河南恩珅德农业充分利用先进的科技手段&#xff0c;引入智能…

PS 2024全新开挂神器Portraiture v4.1.2升级版,功能强大,一键安装永久使用

关于PS修图插件&#xff0c;相信大家都有安装过使用过&#xff0c;而且还不止安装了一款&#xff0c;比如最为经典的DR5.0人像精修插件&#xff0c;Retouch4me11合1插件&#xff0c;Portraiture磨皮插件&#xff0c;这些都是人像精修插件中的领跑者。 其中 Portraiture 刚刚升…

视频剪辑方法:掌握视频嵌套合并技术,释放无限创意

随着数字媒体的普及&#xff0c;视频剪辑已是创意表达的重要技巧。通过掌握视频嵌套合并技术&#xff0c;可以将多个视频片段融合在一起&#xff0c;创造出独特的视觉效果和故事叙述。现在一起看云炫AI智剪批量剪辑视频嵌套合并方法&#xff0c;释放无限创意。 准备视频素材&a…

【Unity】 HTFramework框架(四十七)编辑器日志中使用超链接的技巧

更新日期&#xff1a;2024年1月3日。 Github源码&#xff1a;[点我获取源码] Gitee源码&#xff1a;[点我获取源码] 索引 日志中使用超链接超链接-网络地址超链接-本地地址超链接-项目资源文件超链接-脚本对象 日志中使用超链接 在编辑器控制台Console中的日志是支持富文本的&…

前端开发个人简历范本(2024最新版-附模板)

前端开发工程师个人简历范本> 年龄 25岁 性别 男 毕业院校 XX大学 张三 学历 邮箱 leeywai-tools.cn 本科 专业 计算机科学与技术 个人梗概 拥有扎实的前端开发技能和丰富的实践经验 善于与团队合作&#xff0c;适应能力强&#xff0c;能够快速融入团队并贡献自…

工业相机如何实现实时和本地Raw格式图像和Bitmap格式图像的保存和相互转换(C#代码,UI界面版)

工业相机如何实现实时和本地Raw图像和Bitmap图像的保存和相互转换&#xff08;C#代码&#xff0c;UI界面版&#xff09; 工业相机图像格式工业相机实现Raw图像和Bitmap图像的保存和转换的技术背景在相机SDK中获取图像转换图像的代码分析工业相机回调函数里保存Bitmap图像数据工…

《动手学深度学习》学习笔记 第7章 现代卷积神经网络

本系列为《动手学深度学习》学习笔记 书籍链接&#xff1a;动手学深度学习 笔记是从第四章开始&#xff0c;前面三章为基础知识&#xff0c;有需要的可以自己去看看 关于本系列笔记&#xff1a; 书里为了让读者更好的理解&#xff0c;有大篇幅的描述性的文字&#xff0c;内容很…

Flutter中的Tree

一、Widget 组合类&#xff08;Composite Widgets&#xff09; 如Container、Scaffold、MaterialApp等&#xff0c;以及通过继承StatelessWidget和StatefulWidget的类。 代理类&#xff08;Proxy Widgets&#xff09; 如InheritedWidget&#xff0c;这是一种功能型组件&…

mysql聚簇索引和非聚簇索引

目录 InnoDB引擎MylSAM引擎聚簇索引的优点和缺点参考 聚簇索引和非聚簇索引的区别&#xff1a;叶节点是否存放一整行记录。 聚簇索引:将数据存储与索引放到了一块,索引结构的叶子节点保存了行数据。 非聚簇索引:将数据与索引分开存储&#xff0c;索引结构的叶子节点指向了数据对…

SpringBoot+ShardingSphereJDBC实战(读写分离,分库分表,垂直拆分、水平拆分)附源码

参考&#xff1a;https://www.51cto.com/article/747736.html https://blog.csdn.net/qq_41581588/article/details/126966665 源码地址&#xff1a;gitgitee.com:jackXUYY/springboot-example.git 读写分离测试 我们启用后缀名为dev的配置文件&#xff0c;如下&#xff0c;…

深入理解SqlSugar ORM框架的使用与实战

一、引言 SqlSugar 是一个轻量级的 ORM&#xff08;对象关系映射&#xff09;库&#xff0c;用于在 C# 中与 SQL 数据库进行交互。它提供了一个简单易用的 API&#xff0c;使得开发人员可以以对象的形式而不是原始 SQL 语句进行工作。在本文中&#xff0c;我们将通过实例代码的…

C++入门【18-C++ 指针】

C 指针 学习 C 的指针既简单又有趣。通过指针&#xff0c;可以简化一些 C 编程任务的执行&#xff0c;还有一些任务&#xff0c;如动态内存分配&#xff0c;没有指针是无法执行的。所以&#xff0c;想要成为一名优秀的 C 程序员&#xff0c;学习指针是很有必要的。 正如您所知…

nginx 一、安装与conf浅析

文章目录 一、安装nginxdocker方式安装linux方式安装Ubuntu 或 Debian 系统&#xff1a;CentOS 或 RHEL 系统&#xff1a; macOS 系统&#xff08;使用 Homebrew&#xff09;&#xff1a;Windows 系统&#xff1a; 二、nginx.conf浅析 Nginx&#xff08;发音为“engine-x”&…

椭圆中点算法

原理 椭圆的扫描转换与圆的扫描转换有相似之处&#xff0c;但也有不同&#xff0c;主要区别是椭圆弧上存在改变主位移方向的临界点。瞬时针绘制四分椭圆弧的中点算法&#xff0c;根据对称性可以绘制完整的椭圆。 四分椭圆弧 中心在原点&#xff0c;长半轴为 a a a、短半轴为…

01-03

利用模板类完成顺序表