编程笔记 html5cssjs 023 HTML表单属性

编程笔记 html5&css&js 023 HTML表单属性

  • Action 属性
  • Target 属性
  • Method 属性
  • Autocomplete 属性
  • Novalidate 属性
  • 所有 `<form>` 属性的列表

表单和其他HTML元素一样,拥有很多属性,不同的属性值,就呈现不同的表单效果或功能。本节介绍 HTML<form> 元素的不同属性。

Action 属性

action 属性定义提交表单时要执行的操作。通常,当用户单击“提交”按钮时,表单数据将发送到服务器上的文件中。
在下面的例子中,表单数据被发送到名为 “action.js” 的文件。该文件包含处理表单数据的服务器端脚本:

实例
提交后,将表单数据发送到 “action.js”:

<form action="/action.js"><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>

提示:如果省略 action 属性,则将 action 设置为当前页面。

Target 属性

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

target 属性可设置以下值之一:

值	描述
_blank	响应显示在新窗口或选项卡中。
_self	响应显示在当前窗口中。
_parent	响应显示在父框架中。
_top	响应显示在窗口的整个 body 中。

framename 响应显示在命名的 iframe 中。默认值为 _self,这意味着响应将在当前窗口中打开。
此处,提交的结果将在新的浏览器标签中打开:

<form action="/action.js" target="_blank">

Method 属性

method 属性指定提交表单数据时要使用的 HTTP 方法。
表单数据可以作为 URL 变量(使用 method=“get”)或作为 HTTP post 事务(使用 method=“post”)发送。
提交表单数据时,默认的 HTTP 方法是 GET。

<form action="/action.js" method="get">
<form action="/action.js" method="post">

Autocomplete 属性

autocomplete 属性规定表单是否应打开自动完成功能。
启用自动完成功能后,浏览器会根据用户之前输入的值自动填写值。

<form action="/action.js" autocomplete="on">

Novalidate 属性

novalidate 属性是一个布尔属性。
如果已设置,它规定提交时不应验证表单数据。

<form action="/action_page.php" novalidate>

所有 <form> 属性的列表

属性	描述
accept-charset	规定用于表单提交的字符编码。
action	规定提交表单时将表单数据发送到何处。
autocomplete	规定表单是否应打开自动完成(填写)功能。
enctype	规定将表单数据提交到服务器时应如何编码(仅供 method="post")。
method	规定发送表单数据时要使用的 HTTP 方法。
name	规定表单名称。
novalidate	规定提交时不应验证表单。
rel	规定链接资源和当前文档之间的关系。
target	规定提交表单后在何处显示接收到的响应。

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

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

相关文章

复试 || 就业day03(2024.01.03)项目一

文章目录 前言scikit-learn实现简单线性回归scikit-learn实现多元线性回归&#xff08;二元&#xff09;总结 前言 &#x1f4ab;你好&#xff0c;我是辰chen&#xff0c;本文旨在准备考研复试或就业 &#x1f4ab;本文内容来自某机构网课&#xff0c;是我为复试准备的第一个项…

基于Vue开发的一个仿京东电商购物平台系统(附源码下载)

电商购物平台项目 项目完整源码下载 基于Vue开发的一个仿京东电商购物平台系统 Build Setup # csdn下载该项目源码压缩包 解压重命名为sangpinghui_project# 进入项目目录 cd sangpinghui_project# 安装依赖 npm install# 建议不要直接使用 cnpm 安装以来&#xff0c;会有各…

知识图谱 vs GPT

简介&#xff1a; 当我们谈论知识图谱时&#xff0c;我们指的是一种结构化的知识表示形式&#xff0c;是一种描述真实世界中事物及其关系的语义模型&#xff0c;用于描述实体之间的关系。它通过将知识组织成图形结构&#xff0c;提供了一种更全面、准确和智能的信息处理方式。知…

每日一题(LeetCode)----二叉树--二叉树的层平均值

每日一题(LeetCode)----二叉树–二叉树的层平均值 1.题目&#xff08;637. 二叉树的层平均值&#xff09; 给定一个非空二叉树的根节点 root , 以数组的形式返回每一层节点的平均值。与实际答案相差 10-5 以内的答案可以被接受。 示例 1&#xff1a; 输入&#xff1a;root […

微信小程序开发会务管理系统解决方案

随着移动通讯业务以及信息技术的快速发展&#xff0c;移动端的应用 (APP)的功能越来越多样越来越受欢迎。微信、支付宝以及各大手机品牌开始着手于“小程序”“轻应用”的开发化&#xff0c;在信息技术较为发达、社交软件较为集中的当今社会中&#xff0c;使用微信小程序开发程…

【SpringBoot框架篇】34.使用Spring Retry完成任务的重试

文章目录 简要1.为什么需要重试&#xff1f;2.添加maven依赖3.使用Retryable注解实现重试4.基于RetryTemplate模板实现重试 简要 Spring实现了一套重试机制&#xff0c;功能简单实用。Spring Retry是从Spring Batch独立出来的一个功能&#xff0c;已经广泛应用于Spring Batch,…

Redis 数据一致性

概述 当我们在使用缓存时&#xff0c;如果发生数据变更&#xff0c;那么你需要同时操作缓存和数据库&#xff0c;而它们两个又分属不同的系统&#xff0c;因此无法做到同时操作成功或失败&#xff0c;因此在并发读写下很可能出现缓存与数据库数据不一致的情况 理论上可以通过…

分布式高级知识点

分布式一致性算法: Paxos Paxos 是一种分布式一致性算法,用于在分布式系统中达成共识。它可以保证,即使在存在节点故障的情况下,系统也能就某个值达成一致。 Paxos 算法的基本思想是,首先选出一个协调者(leader)。协调者负责向其他节点发送提案(proposal)。其他节点收…

python封装接口自动化测试套件 !

在Python中&#xff0c;我们可以使用requests库来实现接口自动化测试&#xff0c;并使用unittest或pytest等测试框架来组织和运行测试套件。以下是一个基本的接口自动化测试套件封装示例&#xff1a; 首先&#xff0c;我们需要安装所需的库&#xff1a; pip install requests …

pytest conftest通过fixture实现变量共享

conftest.py scope"module" 只对当前执行的python文件 作用 pytest.fixture(scope"module") def global_variable():my_dict {}yield my_dict test_case7.py import pytestlist1 []def test_case001(global_variable):data1 123global_variable.u…

大华web SDK使用记录

用于开发项目中免登录前端摄像头播放页面&#xff0c;使用WEB无插件开发包V1.1.R1509191.230712 1.sdk提供2个通道&#xff0c;1个是视频流通道&#xff0c;基于websocket&#xff0c;使用PalyerControl对象&#xff1b;1个是云台控制通道&#xff0c;基于ajax&#xff0c;使用…

pythonPandas二:数据读取与写入

Pandas提供了各种函数和方法来实现数据读取和写入的操作。下面我将详细介绍Pandas中常用的数据读取和写入的方法。 数据读取&#xff1a; 从CSV文件读取&#xff1a;可以使用pd.read_csv()函数来读取CSV文件&#xff0c;并将其转换为DataFrame对象。 df pd.read_csv(data.csv…

qt 异常汇总

1. C2338 No Q_OBJECT in the class with the signal (编译源文件 ..\..\qt\labelme-master\src\mainwindow.cpp mainwindow头文件中的类没有Q_OBJECT宏定义&#xff0c;或者其子类或者其他依赖没有Q_OBJECT宏定义。 全部qt类都要写上Q_OBJECT. 2. C2385 对connect的访…

【c++】vector的特性及使用

目录 一、vector的介绍及使用 1、vector迭代器的使用 2、vector的空间增长 3、vector的迭代器失效问题 二、vector的深度剖析与模拟实现 一、vector的介绍及使用 1、vector迭代器的使用 vector的迭代器就是原生态指针。vector的迭代器使用方法与string的迭代器使用方法相…

【CANopen】关于STM32中CanFestival的pdo应用

系列文章目录 文章目录 系列文章目录一、发送1、同步传输2、异步传输 二、接收 使用STM32F407单片机 pdo属于过程数据用来传输实时数据&#xff0c;即单向传输&#xff0c;无需接收节点回应。 一、发送 分为同步传输和异步传输。 1、同步传输 分为循环传输&#xff08;周期…

【12】ES6:模块化

一、JavaScript 模块化 JavaScript 模块化是一种组织和管理 JavaScript 代码的方法&#xff0c;它将代码分割为独立的模块&#xff0c;每个模块都有自己的作用域&#xff0c;并且可以导出和导入功能。模块化可以提高代码的可维护性、可重用性和可扩展性。 在JavaScript中&…

【vue/uniapp】使用 uni.chooseImage 和 uni.uploadFile 实现图片上传(包含样式,可以解决手机上无法上传的问题)

引入&#xff1a; 之前写过一篇关于 uview 1.x 版本上传照片 的文章&#xff0c;但是发现如果是在微信小程序的项目中嵌入 h5 的模块&#xff0c;这个 h5 的项目使用 u-upload 的话&#xff0c;图片上传功能在电脑上正常&#xff0c;但是在手机的小程序上测试就不会生效&#x…

漏洞复现--海康威视IP网络对讲广播系统远程命令执行

免责声明&#xff1a; 文章中涉及的漏洞均已修复&#xff0c;敏感信息均已做打码处理&#xff0c;文章仅做经验分享用途&#xff0c;切勿当真&#xff0c;未授权的攻击属于非法行为&#xff01;文章中敏感信息均已做多层打马处理。传播、利用本文章所提供的信息而造成的任何直…

职场革命:六款AI助手改写工作效率的故事

引言 在数字化时代&#xff0c;AI助手正快速成为职场的革命者。这些智能助手不仅仅是效率的提升者&#xff0c;它们更是创新的驱动力&#xff0c;重新定义了我们的工作方式。从自动化PPT创建到智能邮件优化&#xff0c;它们的影响深远且多元。本文将深入探讨六款不同领域的AI助…

三维模型数据的几何坐标变换的点云重建并行计算技术方法分析

三维模型数据的几何坐标变换的点云重建并行计算技术方法分析 倾斜摄影三维模型数据的几何坐标变换与点云重建并行计算技术的探讨主要涉及以下几个方面&#xff1a; 1、坐标系定义与转换&#xff1a;在进行坐标变换前&#xff0c;需要确定各个参考系的定义并实现坐标系之间的转…