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. mybatis源码解析之架构理解

    mybatis是一个非常优秀的开源orm框架,在大型的互联网公司,基本上都会用到,而像程序员的圣地-阿里虽然用的是自己开发的一套框架,但其核心思想也无外乎这些,因此,去一些大型互联网公司面试的时候,总 ...

  2. 使用Bat自动打包并通过FTP发送到备份服务器——实战测试

    这个bat文件要求本地安装有winrar解压软件,位置是:C:\Program Files\WinRAR\WinRAR.exe 如果执行报错,请检查你复制我的代码是否有问题,有些复制粘贴进去后因为一些 ...

  3. (17)-Python3之--文件操作

    1.文件的操作流程 第一,建立文件对象. 第二,调用文件方法进行操作. 第三,不要忘了关闭文件.(文件不关闭的情况下,内容会放在缓存,虽然Python会在最后自动把内容读到磁盘,但为了以防万一,要养成 ...

  4. 【Azure Developer】在Azure Resource Graph Explorer中查看当前订阅下的所有资源信息列表并导出(如VM的名称,IP地址内网/公网,OS,区域等)

    问题描述 通过Azure的Resource Graph Explorer(https://portal.azure.cn/#blade/HubsExtension/ArgQueryBlade),可以查 ...

  5. TCMalloc源码学习(二)

    替换libc中的malloc free 不同平台替换方式不同. 基于unix的系统上的glibc,使用了weak alias的方式替换.具体来说是因为这些入口函数都被定义成了weak symbols, ...

  6. Flash 终将谢幕:微软将于年底停止对 Flash 的支持

    近日,微软宣布将于今年 12 月终止对 Adobe Flash Player 的支持,届时,微软旗下所有浏览器都将无法使用 Flash,Adobe 也不会在今年 12 月后发布安全更新.早在 2017 ...

  7. noip 注意事项 (个人向)

    目录 非常重要 对拍 空间 极限数据 模数,YES/NO等大小写 个人 考场 神仙 czdzx 说要写,我也来写 非常重要 对拍 空间 极限数据 模数,YES/NO等大小写 个人 养身体,不要紧张,不 ...

  8. MVC与三层架构解析学习

    概要 MVC与三层架构不是简单的相等,二者之间存在一些区别. 今天,看到一位博主总结笔记,借鉴而来,以供以后学习. 将javaweb开发中的MVC(SSM框架)与三级架构比较,来解析二者之间的关系. ...

  9. 飞塔创建IPSec

    5.2和5.4版本飞塔建立IPSec VPN时,必须在两端添加完策略.路由后IPSec才会起来.

  10. Linux 配置永久辅助IP

    1.什么是辅助IP 辅助IP来源于Linux之中,Linux的系统网卡可以支持多IP的绑定,而辅助IP多用于解耦解决服务之间的兼容性问题,常见的应用场景有: 虚拟IP,高可用飘逸: 永久临时IP解耦使 ...