HTML forms

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

<form> element

HTML forms are used to collect user input.

<form> element defines the HTML form:

Example

<form>
 .
form elements
 .
</form>

HTML forms containform elements.

Form elements refer to different types of input elements, checkboxes, radio buttons, submit buttons, and so on.

<input> elements

<input> elements are the most importantform elements.

The <input> element has many forms, depending on different type attributes.

These are the types used in this chapter:

Type Description
text Define the general text input.
radio Define the radio button input (select one of the multiple choices)
submit Define the submit button (submit the form)

Note:You will learn more about input types later in this tutorial.

Text input

<input type="text"> Define forText inputThe single-line input field:

Example

<form>
 First name:<br>
<input type="text" name="firstname">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

Try it yourself

In the browser, it looks like this:

First name:


Last name:

Note:The form itself is not visible. It should also be noted that the default width of text fields is 20 characters.

Radio button input

<input type="radio"> DefineRadio buttons.

Radio buttons allow users to select one of the limited number of options:

Example

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

Try it yourself

Radio buttons look like this in the browser:

Male

Female

Submit button

<input type="submit"> Define forForm handler(form-handler)Submitform buttons.

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

The form handler in the form's action The attribute specifies:

Example

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

Try it yourself

In the browser, it looks like this:

First name:


Last name:


Action attribute

action attributeDefine the action to be executed when the form is submitted.

The usual practice for submitting a form to a server is to use a submit button.

Generally, forms are submitted to web pages on the web server.

In the above example, a server script is specified to handle the submitted form:

<form action="action_page.php">

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

Method attribute

method attributeSpecifies the HTTP method used when submitting the form (GET Or POST)

<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 queries) and there is no sensitive information.

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

action_page.php?firstname=Mickey&lastname=Mouse

Note:GET is most suitable for submitting small amounts of data. Browsers set capacity limits.

When to use POST?

You should use POST:

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

POST is more secure because the data submitted in the page address bar is not visible.

Name attribute

Each input field must be set with a name attribute to be submitted correctly.

In this example, only the "Last name" input field will be submitted:

Example

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

Try it yourself

Group form data using <fieldset>

<fieldset> Elements group related data in the form

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

Example

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

Try it yourself

The above HTML code appears like this in the browser:

Personal information:
First name:


Last name:


HTML Form Attributes

The HTML <form> element, with all possible attributes set, looks like this:

Example

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

The following is a list of <form> attributes:

Attribute Description
accept-charset Specifies the character set used in the submitted form (default: page character set).
action Specifies the address (URL) to which the form is submitted (submission page).
autocomplete Specifies whether 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 the form (default: GET).
name Specifies the name of the form to be identified (for DOM use: document.forms.name).
novalidate Specifies that the browser does not validate the form.
target Specifies the target of the address in the action attribute (default: _self).

Note:You will learn more about attributes in the following chapters.