A collection of information about forms and form submission operations in HTML

Here we introduce the knowledge about form elements and form submission.

The form element

The DOM interface of the form element is HTMLFormElement , which inherits from HTMLElement . Therefore, it has the same default properties as other HTML elements, but it also has several unique properties and methods:

Input element

The input element is a 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 input <input type="submit">
Radio button input <input type="radio" name="must have the same name" value="the value should correspond">
Checkbox input <input type="checkbox" name="same name" value="different corresponding value">
Number input <input type="number" min="" max=""> The input box can only enter numbers, and the maximum and minimum values ​​can be set.
Range input <input type="range" min="" max=""> is similar to number, but it displays a slider instead of an input box.
Color input <input type="color"> will pop up a color picker.
Date input <input type="date"> will pop up a date picker.
The email input <input type="email"> is displayed as a text input box and a custom keyboard pops up.
Tel input <input type="tel"> is similar to email input
URL input <input type="url"> is similar to email input, and a custom keyboard will pop up.
The textarea element creates a multi-line text area.
<textarea name="" id="" cols="30" rows="10"></textarea>
The attribute values ​​of cols and rows represent the characters of the width and height of the text area respectively.
The select element is used in conjunction with the option element to create a drop-down menu.
<select name="" id=""> <option value=""></option> <option value=""></option> <option value=""></option> </select>

radio

How to group? Just set different name attributes

example:

<input type="radio" name="favourite" value="play games">Play games
<input type="radio" name="favourite" value="write code">Write code

<input type="radio" name="sex" value="man">Male
<input type="radio" name="sex" value="woman">Female,
These are two sets of radio

placeholder

Provides a hint that describes the expected value of an input field.
The hint appears when the input field is empty and disappears when the field receives focus.

type=hidden

Defines a hidden input. Hidden fields are not visible to the user. Hidden fields usually store a default value, and their value can also be modified by JavaScript.
For example, for security purposes, name and value values ​​that are invisible to users are transmitted to the background so that the background can do verification and prevent counterfeit pages.

Submit Button

Adding a submit button to the form allows the user 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 of the button element in the specification is submit, but the default value in IE678 is button, so for compatibility reasons 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, the click event of the button element and the submit event of the form are executed in different orders in different browsers. Therefore, 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 the form element does not have any of the three buttons mentioned above, the user will not be able to submit the form (the Enter key is also invalid). At this time, you can use the submit() method unique to the form element to submit the form. It should be noted that calling the submit() method does not trigger the submit event of the form element. Form validation and other operations should be performed before calling submit() method.

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

Form submission and user experience

Based on the popular ajax+cross-domain POST (CORS) technology, we may not use the form element to submit data directly to the server. While this is feasible, the experience is degraded in most cases.

JavaScript Form Validation

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

Typical form data validated by JavaScript are:

Did the user fill out the required fields in the form?
Is the email address entered by the user legal?
Did the user enter a valid date?
Did the user enter text in the numeric field?
Required (or optional) items

The following function is used to check whether the user has filled in the required (or mandatory) items in the form. If a required field or a required field is empty, a warning box will pop up and the function return value will be false, otherwise the function return value will be true (which means there is no problem with the data):

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

Here is the code along with the HTML form:

<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>

Email Verification

The following function checks whether the input data conforms to the basic syntax of an email address.

This means that the input data must contain the @ symbol and the period (.). Also, @ cannot be the first character of an email address, and there must be at least one period after @:

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}
}
}

Here is the complete code along with the HTML form:

<html>
<head>
<script type="text/javascript">
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}
}
}

function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==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>

Shortcut key submission

In the absence of a form element wrapper, even if the focus of the current page is on the form element, pressing the Enter key will not trigger form submission. For users, they need to switch from keyboard control to mouse/gesture control, which destroys the original fluency. The simplest solution is to wrap it with a form element on the outer layer and make sure there is at least one submit button in the form element. At this time, when the input field in the form gets the focus, the user presses the Enter key to trigger the submission.

The browser remembers the account password

When submitting a form, advanced browsers, including mobile browsers, will ask the user whether they need to remember their user account and password. For general users, this is a very useful feature, especially on mobile devices, which can save users a lot of time. In the absence of a form element, the browser will not pop up the query window.

Summarize

When we develop a form application, we should not try to remove the form element and submit directly. The form element should include a submit button. If it is a button element, the type="submit" attribute should be manually added. The submit event is handled in the submit event of the form element, not the click event of the submit button.

refer to:

form element and form submission