How to use html form submission in HTML-HTML Tutorial-php.cn

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 input
Submit input
Radio button input
Checkbox input< input type="checkbox" name="Same name" value="Different corresponding values">
Number input The input box can only Enter a number to set the maximum value and minimum value.
Range input is similar to number, but it will display a slider instead of an input box.
Color input will pop up a color selector.
Date input will pop up a date picker.
email input is displayed as a text input box, and a customized keyboard will pop up.
tel input is similar to email input
url input is similar to email input, and a customized keyboard will pop up.
The textarea element can create a multi-line text area.

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.

radio

How to group? Just set different name attributes

Example:

Play games
Write code

Male
Female ,
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" />

Copy after login

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(&#39;submit&#39;, function (e) {
  if (valid()) {
    ...
  }
  e.preventDefault()
})

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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!