HTML form, html form

HTML form, html form
HTML forms contain form elements.

<Form> element definition HTML form

Form elements refer to different types of input elements, check boxes, single-choice buttons, and submit buttons.

HTML forms are used to collect different types of user input.

<form> .form elements .</form>

<Input> elements are the most important form elements.

<Input> elements have many forms based on different type attributes.

This is the type used in this chapter:

Type	Description
Text	Define regular text input.
Radio	Define single-choice button input (select one of multiple options)
Submit	Define the submit button (submit form)

Single choice button Input

<Input type = "radio"> define the radio button.

The single-choice button allows you to select one of the following options:

Instance

<form><input type="radio" name="sex" value="male" checked>Male<br><input type="radio" name="sex" value="female">Female</form> 

 

Submit button

<Input type = "submit"> defines the button used to submit a form to the form handler (form-handler.

A form handler is usually a server page that contains scripts used to process input data.

The form handler specifies in the form action attribute:

Instance

<form action="action_page.php">First name:<br><input type="text" name="firstname" value="Mickey"><br>Last name:<br><input type="text" name="lastname" value="Mouse"><br><br><input type="submit" value="Submit"></form> 

 

Action property

The action attribute defines the action executed when the form is submitted.

You can use the submit button to submit a form to the server.

Generally, a form is submitted to a webpage on the web server.

In the preceding example, a server script is specified to process the submitted Form:

<form action="action_page.php">

If the action attribute is omitted, the action is set to the current page.

Method Property

The method attribute specifies the HTTP method (GET or POST) used when the form is submitted)

<Form action = "action_page.php" method = "GET"> or: <form action = "action_page.php" method = "POST">

When to use GET?

You can use GET (default method ):

If the form submission is passive (such as search engine query) and there is no sensitive information.

When you use GET, the form data is visible in the address bar of the page:

action_page.php?firstname=Mickey&lastname=Mouse

Note: GET is most suitable for the submission of a small amount of data. The browser sets the capacity limit.

When to use POST?

You should use POST:

If the form is updating data or contains sensitive information (such as a password ).

POST is more secure, because the data submitted in the page address bar is invisible.

 

Name attribute

To be submitted correctly, a name attribute must be set for each input field.

In this example, only the "Last name" input field is submitted, because "First name" does not set the name attribute:

Instance

<form action="action_page.php">First name:<br><input type="text" value="Mickey"><br>Last name:<br><input type="text" name="lastname" value="Mouse"><br><br><input type="submit" value="Submit"></form> 

Combine form data with <fieldset>

<Fieldset> related data in an element combination form

The <legend> element defines the title for the <fieldset> element.

Instance

<form action="action_page.php"><fieldset><legend>Personal information:</legend>First name:<br><input type="text" name="firstname" value="Mickey"><br>Last name:<br><input type="text" name="lastname" value="Mouse"><br><br><input type="submit" value="Submit"></fieldset></form> 

HTML Form attributes

HTML <form> element, which has all possible attributes set, is as follows:

Instance

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>.form elements .</form> 

 

Attribute	Description
Accept-charset	Specifies the character set used in the submitted Form (default: Page character set ).
Action	Specifies where to submit the form URL (submit page ).
Autocomplete	The browser should automatically complete the form (default: enabled ).
Enctype	Specifies the encoding of the submitted data (default: url-encoded ).
Method	Specifies the HTTP method used when submitting a form (default: GET ).
Name	Specifies the name of the form to be recognized (for DOM: document. forms. name ).
Novalidate	The browser does not verify the form.
Target	Specifies the destination of the address in the action attribute (default: _ self ).