How to use html form submission in HTML

This time I will show you how to use html form submission in HTML. What are the precautions for using html form submission? Here are practical cases, let’s take a look.

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

form element

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

Attribute value

Description

accept- charset The character set that the server can handle. Multiple character sets are separated by spaces.

action The URL that accepts the request. This value can be overridden by the input in the form element or the formaction attribute of the button element.

elements Collection of all controls in the form (HTMLCollection)

enctype The requested encoding type. This value can be overridden by the input or button element’s formenctype attribute in the form element

length The number of controls in the form

method The HTTP request type to be sent, usually "get" or "post", this value can be overridden by the formmethod attribute of the input or button element in the form element

name The name of the form

reset() Reset all form fields to default values ​​

submit() Submit the form

target The 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 element

autocomplete Whether to automatically complete the form element

input element

The input element is widely used The form element has the following common uses depending on the value of the type attribute:

Text input9c0277ee990771d30fd543a38aca6c0e
Submit inputf9f7c6f4b3828831e895f30b0536400d
Radio button input356070d9a188d26a4dc647e8d748beb2
Checkbox inputc7678b1c6596df5ea48f3c08c530fc5d
Number input2c01953a7522c810f1fa66d627cf180c The input box can only Enter a number to set the maximum value and minimum value.
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 selector.
Date input6e290236d7c77fdce98cb15bf0dfeea2 will pop up a date picker.
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
dc3fd5b4052671733b7afa0d7270c4d3Write code

c179a68332954c65bd5a26509d7f8801Male
a4353ce1cb381171d2d6de3681550745Female ,
This is the two sets of radio

placeholder

Provide hint information (hint) that describes 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 user-invisible name and value values ​​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 kinds of 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 type of button element in the specification is submit, but under IE678 the default value is button, so from 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, this is not the case. The click event of the button element and the submit event of the form are executed in different order in different browsers. First, 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, the unique submit() method of the form element can be used to perform submission. For forms, it should be noted that calling the submit() method will not trigger the submit event of the form element. Form verification and other operations should be performed before calling the submit() method.

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

Form submission and user experience

Based on the popular ajax + cross-domain POST (CORS) technology, we are likely 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 verified by JavaScript include:

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

The following function is used to check whether the user has filled in the required (or required) items in the form. If the required field or required field is empty, the warning box will pop up, and the return value of the function is false, otherwise the return value of the function is true (meaning 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}
}
}

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

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to insert a video into an HTML web page

How to format and output JSON data in HTML

How to use HTML to make a fixed floating translucent search box on the mobile side

The above is the detailed content of How to use html form submission in HTML. For more information, please follow other related articles on the PHP Chinese website!