前端进阶之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 用户体…
阅读更多...
GeoJson格式简单说明（2024-06-06）

GeoJson格式简单说明（2024-06-06）

一个典型的时空“点”数据&#xff08;可理解为轨迹点&#xff09;格式如下&#xff1a; {"type": "Feature","geometry": {"type": "Point","coordinates": [125.6, 10.1]},"properties": {"nam…
阅读更多...
JAVA学习-练习试用Java实现“简化路径”

JAVA学习-练习试用Java实现“简化路径”

问题&#xff1a; 给定一个字符串 path &#xff0c;表示指向某一文件或目录的 Unix 风格 绝对路径 &#xff08;以 / 开头&#xff09;&#xff0c;请将其转化为更加简洁的规范路径。 在 Unix 风格的文件系统中&#xff0c;一个点&#xff08;.&#xff09;表示当前目录本身…
阅读更多...
海南聚广众达电子商务咨询有限公司引领抖音电商新风尚

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

在数字化浪潮汹涌澎湃的今天&#xff0c;电商行业正迎来前所未有的发展机遇。作为电商领域的一颗璀璨明星&#xff0c;海南聚广众达电子商务咨询有限公司凭借其专业的抖音电商服务&#xff0c;成功吸引了众多商家的目光&#xff0c;成为了业界的一匹黑马。 海南聚广众达电子商…
阅读更多...
如何成功申请消防设施工程乙级资质？关键步骤详解

如何成功申请消防设施工程乙级资质？关键步骤详解

1. 自我评估与准备 条件核对&#xff1a;首先确认企业是否满足乙级资质的注册资本、技术团队、工程经验等硬性要求。团队组建&#xff1a;确保拥有足够数量且符合条件的专业技术人员&#xff0c;特别是关键岗位如主要技术负责人、注册消防工程师等。资料收集&#xff1a;提前准…
阅读更多...
【全开源】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"><…
阅读更多...
springboot整合ENC加密解密

springboot整合ENC加密解密

以redis为例&#xff0c;连数据库、连mq操作也一样 步骤 1: 添加Jasypt依赖 在Maven项目的pom.xml中添加如下依赖&#xff1a; <dependency><groupId>com.github.ulisesbocchio</groupId><artifactId>jasypt-spring-boot-starter</artifactId>…
阅读更多...
超长正整数的加法

超长正整数的加法

一、引言 在计算机科学中&#xff0c;整数加法是一个基础且重要的操作。然而&#xff0c;当面对超长正整数&#xff08;即超出计算机内置整数类型表示范围的整数&#xff09;时&#xff0c;传统的整数加法方法便不再适用。超长正整数通常使用字符串或数组来表示&#xff0c;每…
阅读更多...
k8s AIOps

k8s AIOps

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

Android RecycleView触摸事件记录

文章目录 一、前言二、onFilterTouchEventForSecurity三、addOnItemTouchListener四、参考链接 一、前言 在开发中有时候需要对RecycleView的触摸事件进行拦截和处理&#xff0c;RecyclView本身事件比较复杂&#xff0c;直接使用View的事件体系不能完成特定业务。比如区分滑动…
阅读更多...
Full Stack Programming Further Web Programming COSC2758

Full Stack Programming Further Web Programming COSC2758

1. Overview (you must read thisfirst) In this assignment, you will develop a Full Stack Web Application to complete the front‐end prototype built from assignment 1. You are required to use the following stacks:  Frontend: ReactJS or ReactTS  Mid…
阅读更多...
iOS开发中copy on write

iOS开发中copy on write

Copy-On-Write&#xff08;写时复制&#xff09;是一种内存管理技术&#xff0c;在iOS开发中被广泛使用。下面是一些常见的使用场景&#xff1a; 不可变对象的复制&#xff1a;当对一个不可变对象执行复制操作时&#xff0c;实际上只会创建该对象的引用计数副本&#xff0c;而不…
阅读更多...
沉淀：心灵的宁静之道

沉淀：心灵的宁静之道

在这个信息爆炸的时代&#xff0c;我们常常被繁杂的事务淹没。每日忙碌的工作、应接不暇的社交活动、纷至沓来的琐事&#xff0c;让人难以静下心来。最近&#xff0c;我也深感疲惫和迷茫&#xff0c;仿佛被生活的巨浪推着前行&#xff0c;却无暇思考方向。 沉淀&#xff0c;是一…
阅读更多...
【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…
阅读更多...
c++ 左右值与引用折叠

c++ 左右值与引用折叠

C 增加了一个新的类型&#xff0c;右值引用&#xff0c;记作“&&” 左值&#xff1a;是指在内存中有明确的地址&#xff0c;我们可以找到这块地址的数据&#xff08;可取地址&#xff09; 右值&#xff1a;只提供数据&#xff0c;无法找到地址&#xff08;不可取地址&…
阅读更多...
分布式防止重复请求或者高并发防止重复提交

分布式防止重复请求或者高并发防止重复提交

1&#xff1a;自定义注解JRepeat package com.huan.study.mybatis.config;import java.lang.annotation.*;/*** 防止重复提交的注解**/ Retention(RetentionPolicy.RUNTIME) Target({ElementType.METHOD}) Documented public interface JRepeat {/*** 超时时间** return*/int …
阅读更多...
通过龙讯旷腾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;并登…
阅读更多...
最新文章

Copyright @ 2022~2023