Summary of methods for form and form submission operations in HTML

This article mainly introduces the knowledge of form elements and form submission in HTML. Friends who need it can refer to it. I hope it can help everyone.

form element

The DOM interface of the form element is HTMLFormElement, which inherits from HTMLElement, so it is similar to other HTML The element has the same default properties, but it also has several unique properties and methods of its own:

##accept-charsetThe character set that the server can handle, multiple character sets are separated by spacesactionAccepts the URL of the request. This value can be overridden by the input in the form element or the formaction attribute of the button elementelementsCollection of all controls in the form (HTMLCollection)enctypeThe requested encoding type, this value can be used by the input in the form element or the formenctype of the button element Property OverridelengthThe number of controls in the formmethodThe HTTP request to send Type, usually "get" or "post", this value can be overridden by the input in the form element or the formmethod attribute of the button element nameThe name of the form reset()Reset all form fields to default valuessubmit()Submit the formtargetThe name of the window used to send requests and receive responses. This value can be overridden by the formtarget attribute of the input or button element in the form elementautocompleteWhether to automatically complete form elements

Input element

The input element is a very widely used form element. Depending on the value of the type attribute, it has the following common uses:

Text input< ;input type="text" name="">
Submit input54b28e0e73a12e4a8ed487872a6fb5b8
Radio button inputc3625a67ee3a4388dad67ca613048d35
Check box input24d40226386e0d18c64900d39a3c7463
Number Input2c01953a7522c810f1fa66d627cf180c The input box can only enter numbers, and the maximum and minimum values ​​can be set.
Range input 7a4313034c807dc840f651e5c24969b6 is similar to number, but it will display a slider instead of an input box.
Color inputd0335cf169d1c69d5fb760bfbec3b54d will pop up a color picker.
Date input6e290236d7c77fdce98cb15bf0dfeea2 A date picker will pop up.
email input e8dc7451c84937575e38c52150e3cc83 is displayed as a text input box, and a customized keyboard will pop up.
tel input 85f46f0e8aaaa3b9a68adb2fc5e483a4 is similar to email input
url input b62e2bff68c9b56c3471a9e06cd94f80 is similar to email input, and a customized keyboard will pop up.
The textarea element can create a multi-line text area.
368b3d164100ae4e96620a1520b7c46040587128eee8df8f03d0b607fe983014
The attribute values ​​​​of cols and row represent the characters of the width and height of the text area respectively. .
The select element and the option element are used together to create a drop-down menu.
701d81aaa14b8afd38d7545721c937f2 aba78b0dcb1db399ec615ce176d67bce4afa15d3069109ac30911f04c56f3338 aba78b0dcb1db399ec615ce176d67bce4afa15d3069109ac30911f04c56f3338 486a7589d08bca055e770c344dbcfa784afa15d3069109ac30911f04c56f3338 18bb6ffaf0152bbe49cd8a3620346341

radio

How to group? Just set different name attributes

Example:

9c74e4bbd8155dff9110562c4792a46bPlay games
00c9b23f3025616696fd83d3790d5bc9Write code

c179a68332954c65bd5a26509d7f8801Male
93292444dd45df6e1fec7cdc1ec7ec1f女,
These are two sets of radio

placeholder

that provide hints that describe the expected value of the input field.
This prompt will be displayed when the input field is empty, and will disappear when the field receives focus.

type=hidden

Define hidden input. Hidden fields are not visible to the user. Hidden fields usually store a default value, and their values ​​can also be modified by JavaScript.
For example, it is used for security purposes, transmitting name and value values ​​invisible to users to the background, allowing the background to perform verification to prevent page forgery.

Submit button

Adding a submit button to the form allows users to submit the form.

The following three buttons can trigger the submit event of the form when clicked:

<input type="submit" />
<button type="submit"></button>
<input type="image" />

The default value of the type button element in the specification is submit , but the default value under IE678 is button, so from the perspective of compatibility, it is necessary to manually add the type="submit" attribute to the button element.

submit event

Beginners may think that form submission is triggered by the click event of the submit button. In fact, this is not the case. The click event of the button element and the submit event of the form are in different The execution order in browsers is different, so in order to accurately control the form submission event, we will choose to perform verification and other operations in the submit event of the form.

form.addEventListener('submit', function (e) {
  if (valid()) {
    ...
  } 
  e.preventDefault()
})

When there is no one of the above three buttons in the form element, the user will not be able to submit the form (the Enter key is also invalid). At this time You can use the unique submit() method of the form element to submit the form. It should be noted that calling the submit() method will not trigger the submit event of the form element. Verification of the form and other operations should be done after calling before submit() method.

if (valid()) {
  form.submit()
}

Form submission and user experience

Based on the popular ajax + cross-domain POST (CORS) technology, we It is possible to submit data directly to the server without using the form element. While this works, it degrades the experience in most cases.

JavaScript Form Validation

JavaScript can be used to validate input data in HTML forms before the data is sent to the server.

These typical form data validated by JavaScript are:

用户是否已填写表单中的必填项目？
用户输入的邮件地址是否合法？
用户是否已输入合法的日期？
用户是否在数据域 (numeric field) 中输入了文本？
必填（或必选）项目

下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：

function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
  {alert(alerttxt);return false}
else {return true}
}
}

下面是连同 HTML 表单的代码：

<html>
<head>
<script type="text/javascript">

function validate_required(field,alerttxt)
{
with (field)
  {
  if (value==null||value=="")
    {alert(alerttxt);return false}
  else {return true}
  }
}

function validate_form(thisform)
{
with (thisform)
  {
  if (validate_required(email,"Email must be filled out!")==false)
    {email.focus();return false}
  }
}
</script>
</head>

<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit"> 
</form>
</body>

</html>

E-mail 验证

下面的函数检查输入的数据是否符合电子邮件地址的基本语法。

意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：

function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2) 
  {alert(alerttxt);return false}
else {return true}
}
}

下面是连同 HTML 表单的完整代码：

Email: 
 

快捷键提交

在没有form元素包裹的情况下，即使当前页面的焦点在表单元素上，按回车键也不会触发表单提交，对于用户而言，需要从键盘控制切换到鼠标/手势控制，破坏了原有的流畅度。解决方法最简单的就是在外层用一个form元素包裹，并且确定form元素中起码有一个提交按钮。此时当表单中的输入域得到焦点时，用户按回车键便会触发提交。

浏览器记住账号密码

在提交表单时，高级浏览器包括移动端浏览器，会询问用户是否需要记住用户账号密码，对于一般用户而言，这是一个十分有用的特性，特别是在移动端，可以为用户节省很多时间。在没有form元素的情况下，浏览器不会弹出该询问窗口。

我们在开发一个表单应用的时候，不应该尝试去除form元素直接进行提交，在form元素中应该包含一个提交按钮，如果是button元素，应该手动加上type="submit"属性。提交事件的处理在form元素的submit事件中，而非提交按钮的click事件。

相关推荐：

html中Form表单提交时页面不跳转的方法详解

序列化form表单教程详解

有关jquery中form表单序列化的一些问题指导

Attribute Value	Description

The above is the detailed content of Summary of methods for form and form submission operations in HTML. For more information, please follow other related articles on the PHP Chinese website!