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. pytest:conftest.py文件

    一.fixture scope 为session 级别是可以跨 .py模块调用的,也就是当我们有多个 .py文件的用例时,如果多个用例只需调用一次fixture,可以将scope='session', ...

  2. Python+Selenium+Unittest实现PO模式web自动化框架(7)

    1.TestDatas目录的功能 TestDatas目录下存放的是测试数据,比如:登录功能的测试用例数据. # --^_^-- coding:utf-8 --^_^-- # @Remark:登录测试数 ...

  3. MySQL新特性MTS

    一.MTS:多线程复制 MTS简介 在MySQL 5.6版本之前,Slave服务器上有两个线程I/O线程和SQL Thread线程.I/O线程负责接收二进制日志(Binary Log,更准确的说是二进 ...

  4. 为什么Go自带的日志默认输出到os.Stderr?

    为什么Go自带的日志默认输出到os.Stderr? - 知乎 https://www.zhihu.com/question/67629357 Note that the Go runtime writ ...

  5. Fixing SQL Injection: ORM is not enough

    Fixing SQL Injection: ORM is not enough | Snyk https://snyk.io/blog/sql-injection-orm-vulnerabilitie ...

  6. Frame of Reference and Roaring Bitmaps

    https://www.elastic.co/cn/blog/frame-of-reference-and-roaring-bitmaps http://roaringbitmap.org/ 2015 ...

  7. koa2+koa-generator+mysql快速搭建nodejs服务器

    koa2+koa-generator+mysql快速搭建nodejs服务器 用koa的脚手架koa-generator可以快速生成项目骨架,可以用于发开或者测试接口 https://github.co ...

  8. mysql 用户 登陆 权限相关

    1. CREATE USER 'dog2'@'localhost' IDENTIFIED BY ''; 将"localhost"改为"%",表示在任何一台电脑上 ...

  9. js截取+全部替换+字符串

    //将关键字标志显示到页面中 function showKeyWord(showStr) { var keyword = $("#keyword").val();//页面中的关键字 ...

  10. java格式化json串

    package com.loan.modules.extbiz.in.rabbitmq.util; import com.loan.modules.extbiz.in.rabbitmq.excepti ...