Section 67th, HTML form elements

HTML form elements

Learning Essentials:
1. Summary of form elements
2. Form element parsing

This chapter focuses on the form elements in HTML5, which are used to get user input data.

A Form elements Summary

HTML5 forms, a variety of form controls are available for user input.

Element name Description

form represents an HTML form

Input represents the control used to collect user input data

TextArea represents a control that can enter multiple lines of text

Select indicates a fixed set of options to provide

option means providing an option

Optgroup represents a set of related option elements

button indicates the form buttons (or general buttons) that can be used to submit or reset

DataList defines a set of recommended values that are provided to the user

FieldSet represents a set of form elements

Legend represents a descriptive label for the FIELDSET element

Label represents the description label for the form element

Output indicates the result of the calculation

Two Form element parsing

1.<form> Defining the form

<form method= "POST" action= "http:www.haosou.com/" >

<button> Submit </button>

</form>

The explanation for the:<form> element is primarily defined as a set of forms.

Element name Description

Action represents a page submitted by a form

method indicates how the form is requested: there are two types of post and get, default get

Represents the encoding format used by the browser for data sent to the server. There are three kinds: application/x-www-form-urlencoded (the default encoding, Enctype cannot upload files to the server), Multipart/form-data (for uploading files to the server), Text/plain (not standard coding, not recommended, different browsers understand different)

Name sets the form names so that the program calls

Target settings at the time of submission: _blank, _parent, _self, _top set the browser to remember the data entered by the user, to implement the automatic completion of the form. Default

AutoComplete

On auto-complete, set off if you do not want to auto-complete.

Novalidate sets whether to perform client data validation checks, which are explained later in the course.

Submit data using Get

Method= "Get"

Loss of auto alert function

Autocomplete= "Off"

Create a new target using _blank

target= "_blank"

2.<input> indicates user input data

<input name= "User" >

Explain the:<input> element by default, a single-line text box appears with five properties.

Property name Description

Autofocus lets the cursor focus on an INPUT element, allowing the user to enter directly

Disabled disabling the INPUT element

AutoComplete Auto-completion of the INPUT element is set separately

Form makes the elements outside the form and the specified form hooks submit

Type INPUT element, more content, will be explained in the next lesson

Name defines the names of the input elements in order to receive the corresponding values

Focus Cursor

<input name= "User" autofocus>

Disable input

<input name= "User" disabled>

Disable Auto-completion

<input name= "user" autocomplete= "off" >

Input outside of the form

<form method= "Get" id= "register" >

...

</form>

<input name= "Email" form= "register" >

3.<label> Adding a description label

<p><labelfor= "User" > Username: <inputid= "user" name= "user" ></label></p>

Explain that the:<label> element can be associated with input to make the user experience better. And more easily set CSS styles.

4.<fieldset> to group forms

<fieldset>...</fieldset>

Explanation:<fieldset> elements can organize some form elements together to form a whole.

Property name Description

Name defines a name for the grouping

Form hooks A group outside the form to a form

Disabled disabling forms within a group

5.<legend> Adding group description labels

<fieldset>

<legend> Registration Forms </legend>

</fieldset>

Explains the:<legend> element and adds a caption to the grouping.

6.<button> Add button

<button type= "Submit" >< button>

EXPLANATION The:<button> element adds a button with the type attribute having the following values:

Value Name Description

Submit indicates the function of the button is to submit the form, the default

Reset indicates that the function of the button is to reset the form

button indicates a general button, without any effect

Submit Form

<button type= "Submit" > Submit </button>

Resetting the form

<button type= "reset" > Reset </button>

Normal button

<button type= "button" > button </button>

The button also provides additional properties when the Type property is submit.

Property name Description

form specifies the forms associated with the button

FormAction overriding the Action property of the form element

Formenctype overriding the Enctype property of a FORM element

FormMethod override method property of form element

Formtarget overriding the target property of the form element

Formnovalidate overriding the Novalidate property of a FORM element

Out-of-form association submissions

<button type= "Submit" form= "register" > Submit </button>

Section 67th, HTML form elements