HTML form All In One

  1. action + method

  2. onsubmit, submit event

action + method


<form action="" method="get" class="form-example">
<div class="form-example">
<label for="name">Enter your name: </label>
<input type="text" name="name" id="name" required>
</div>
<div class="form-example">
<label for="email">Enter your email: </label>
<input type="email" name="email" id="email" required>
</div>
<div class="form-example">
<input type="submit" value="Subscribe!">
</div>
</form>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form

dialog

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog


<!-- Simple pop-up dialog box containing a form -->
<dialog id="favDialog">
<form method="dialog">
<p><label>Favorite animal:
<select>
<option></option>
<option>Brine shrimp</option>
<option>Red panda</option>
<option>Spider monkey</option>
</select>
</label></p>
<menu>
<button value="cancel">Cancel</button>
<button id="confirmBtn" value="default">Confirm</button>
</menu>
</form>
</dialog> <menu>
<button id="updateDetails">Update details</button>
</menu> <output aria-live="polite"></output>

https://caniuse.com/#search=dialog

idempotent 幂等

一个HTTP方法是幂等的,指的是同样的请求被执行一次与连续执行多次的效果是一样的,服务器的状态也是一样的。

换句话说就是,幂等方法不应该具有副作用(统计用途除外)。

在正确实现的条件下,GET,HEAD,PUT和DELETE 等方法都是幂等的, 而 POST 方法不是。

所有的 safe 方法也都是幂等的。

https://developer.mozilla.org/en-US/docs/Glossary/Idempotent

onsubmit, submit event

target.onsubmit = functionRef;

<form id="form">
<p id="error" hidden>Please fill out all fields.</p> <label for="city">City</label>
<input type="text" id="city" required> <button type="submit">Submit</button>
</form>
<p id="thanks" hidden>Your data has been received. Thanks!</p>
const form = document.getElementById('form');
const error = document.getElementById('error');
const city = document.getElementById('city');
const thanks = document.getElementById('thanks'); city.oninvalid = invalid;
form.onsubmit = submit; function invalid(event) {
error.removeAttribute('hidden');
} function submit(event) {
form.setAttribute('hidden', '');
thanks.removeAttribute('hidden'); // For this example, don't actually submit the form
event.preventDefault();
}

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onsubmit


<form id="form">
<label>Test field: <input type="text"></label>
<br><br>
<button type="submit">Submit form</button>
</form>
<p id="log"></p>
function logSubmit(event) {
log.textContent = `Form Submitted! Time stamp: ${event.timeStamp}`;
event.preventDefault();
} const form = document.getElementById('form');
const log = document.getElementById('log');
// onsubmit
form.addEventListener('submit', logSubmit);

HTMLFormElement

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit

React

onSubmit


import React, {useState} from "react"; const SearchForm = (props) => {
const {
datas: {
query,
},
methods: {
setQuery,
search,
},
} = props;
return (
<>
<form className="form" onSubmit={search}>
<label className="label" htmlFor="query">
Movie Name
</label>
<input className="input" type="text" name="query"
placeholder="i.e. Jurassic Park"
value={query}
onChange={(e) => setQuery(e.target.value)}
/>
<button className="button" type="submit">Search</button>
</form>
</>
);
} export default SearchForm;

refs







xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


HTML form All In One的更多相关文章

  1. form表单验证-Javascript

    Form表单验证: js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等.完整代码如下: <!DOCTYPE html PUBLIC &qu ...

  2. Form 表单提交参数

    今天因为要额外提交参数数组性的参数给form传到后台而苦恼了半天,结果发现,只需要在form表单对应的字段html空间中定义name = 后台参数名 的属性就ok了. 后台本来是只有模型参数的,但是后 ...

  3. s:form标签

    2017-01-07 17:43:18 基本的用法 <!-- Action类必须有一个无参的构造器,因为在执行action方法之前,拦截器已经创建了一个"空"的Action对 ...

  4. ASP.NET Aries JSAPI 文档说明:AR.Form、AR.Combobox

    AR.Form 文档 1:对象或属性: 名称 类型 说明 data 属性 编辑页根据主键请求回来的数据 method 属性 用于获取数据的函数指向,默认值Get objName 属性 用于拦截form ...

  5. form表单 ----在路上(15)

    form 表单就是将用户的信息提交到服务器,服务器会将信息存储活着根据信息查询数据进行增删改查,再将其返回给用户. 基本格式: <form action="" method ...

  6. 了解HTML表单之form元素

    前面的话 表单是网页与用户的交互工具,由一个<form>元素作为容器构成,封装其他任何数量的表单控件,还有其他任何<body>元素里可用的标签 表单能够包含<input& ...

  7. form表单的字符串进行utf-8编码

    <form>表单有assept-charset属性.该属性规定字符的编码方式,默认是"unknown",与文档的字符集相同. 该属性除了Internet explore ...

  8. js Form.elements[i]的使用实例

    function pdf(){    //一个html里面可能存在多个form,所以document.form[0]指的是第一个form,document.form[1]返回就是第二个form,如果没 ...

  9. PHP跨域form提交

    因为安全性因素,直接跨域访问是不被允许的. 1.PHP CURL方式 function curlPost($url,$params) { $postData = ''; foreach($params ...

  10. C#模拟HTTP Form请求上传文件

    using System; using System.Collections.Generic; using System.Text; using System.Net; using System.IO ...

随机推荐

  1. centos7服务器远程安装图形化页面

    以下是我用云的centos 7.4的安装步骤,照着我的命令操作肯定OK的,其他的就不敢保证了... 1.首先安装X(X Window System),命令为:(注意有引号) yum groupinst ...

  2. 中文电子病历命名实体识别(CNER)研究进展

    中文电子病历命名实体识别(CNER)研究进展 中文电子病历命名实体识别(Chinese Clinical Named Entity Recognition, Chinese-CNER)任务目标是从给定 ...

  3. hive搜索报错

    在自己搭建的集群上执行hive搜索语句 select count(*) from ods_event_log where dt='2019-12-14' group by dt; 报错如下: Stat ...

  4. 在不同情况下connect失败和ping不通的数据分析

  5. C++ Primer Plus读书笔记(二)处理数据

    1.格式化输出: 和C语言不太一样,C++格式化输出进制格式如下: 1 int a = 42; 2 int b = 42; 3 int c = 42; 4 5 cout << a < ...

  6. C#编写一个在asp.net core 3.1下的简单的corn模式的计划任务和一个更简单的定时器类

    asp.net core 下,新增了一个BackgroundService用来实现能在后台跑一个长久运行的任务,因此,也可以用来替换掉原来使用的static的Timer组件, Timer组件主要有以下 ...

  7. SparkSQL访问Hive源,MySQL源

    SparkSQL访问Hive源,MySQL源 一.SparkSQL访问Hive源 软件环境 SparkSQL命令行模式可以直接连接Hive的 Java程序SparkSQL连接Hive 二.SparkS ...

  8. Spring boot 集成MQ

    import lombok.extern.java.Log; import org.springframework.amqp.core.TopicExchange; import org.spring ...

  9. 区域之间PA、FortiGate内网互联专线、IPSec互备方案

    网络拓扑: 现状描述: 办公区和IDC之间有防火墙互联的点对点专线实现内网互通,现需要两地防火墙构建IPSec VPN作为专线的热备链路. 解决方案: 飞塔侧 1.按照阶段一.阶段二建立IPSec V ...

  10. 【算法】数据结构与算法基础总览(中)——刷Leetcode等算法题时一些很实用的jdk辅助方法锦集

    最近重新学习数据结构与算法以及刷leetcode算法题时,发现不少jdk自带的方法可以提升刷题的效率.这些小技巧不仅仅对刷算法题带来便利,对我们平时开发也是很有帮助的.本文以java语言为基础,记录了 ...