WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

HTML Forms


The <form> Element

HTML forms are used to collect user information input.

The <form> element :

<form>
.
form elements
.
</form>

HTML forms contain form elements.

Form elements are various types such as checkbox input elements radio button and submit more. /p>


The <input> Element

The <input> element is the one of the most important form element.

The <input> element has various but depending on the type attribute.

In this chapter we use following type:

Type Description
text it is use for normal text input
radio it is use for selecting one of many choices)
submit it is use forsubmitting the form)

Text Input

<input type="text"> defines a one-line input field for text input:

Example

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

This is how it will look like in a browser:

First name:

Last name:


Radio Button Input

<input type="radio"> said radio button.

Radio buttons are very interesting user can select one of a limited number of choice.

Example

<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>
Try it Yourself »

This is simple code of radio button input :

Male
Female
Other


The Submit Button

<input type="submit"> main a button for submitting a form to a form-handler.

The form-handler is mauinly a server page with a script for processing input data.

The form-handler is specified in the form's action attribute:

Example

<form action="action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Michal"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mass"><br><br>
  <input type="submit" value="Submit">
</form>
Try it Yourself »

This is the HTML code above will be displayed in a browser:

First name:

Last name:



The Action Attribute

The action attribute state that the action to be performed when the form is submitted.

The common way to submit a form to a server, is by using a submit button.

the form is submitted to a web page on a web server.

server-side script handle the submitted form:

<form action="action_page.php">

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


The Method Attribute

The method attribute define the HTTP method GET or POST to be used when submitting the forms:

<form action="action_page.php" method="get">

or:

<form action="action_page.php" method="post">

When to Use GET?

You can use GET (the default method):

If the form submission is passive (like a search engine query), and without sensitive information.

When you use GET, the form data will be visible in the page address:

action_page.php?firstname=Michal&lastname=jhon

/th>


POST use

Which condition you should use POST:

If the form is updating data, or includes sensitive information Like password,email.

POST is better method for security because submitted data is not visible in page address.


The Name Attribute

Input file is also called name attribute.

This example will only submit the "Last name" input field:

Example

<form action="action_page.php">
  First name:<br>
  <input type="text" value="Michal"><br>
  Last name:<br>
  <input type="text" name="lastname" value="jhon"><br><br>
  <input type="submit" value="Submit">
</form>
Try it Yourself »

Grouping Form Data with <fieldset>

The <fieldset> element groups related data in a form.

The <legend> element defines a caption for the <fieldset> element.

Example

<form action="action_page.php">
  <fieldset>
    <legend>Personal information:</legend>
    First name:<br>
    <input type="text" name="firstname" value="Michal"><br>
    Last name:<br>
    <input type="text" name="lastname" value="jhon"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>
Try it Yourself »

This is how the HTML code above will be displayed in a browser:

Personal information: First name:

Last name:



Note:

Simple example are https://www.welookups.com/html/action_page.php is form submittion link it work html page fine.

It is very popular method for POST.


HTML Form Attributes

An HTML <form> element, with all possible attributes set, will look like this:

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


Here some is the list of <form> attributes:

Attribute Description
accept-charset it is Specifies the charset used in the submitted form default: the page charset.
action it is Specifies an address (url) where to submit the form default: the submitting page.
autocomplete it is Specifies if the browser should autocomplete the form (default: on).
enctype it is Specifies the encoding of the submitted data (default: is url-encoded).
method it is Specifies the HTTP method used when submitting the form (default: GET).
name it is Specifies a name used to identify the form (for DOM usage: document.forms.name).
novalidate it is Specifies that the browser should not validate the form.
target it is Specifies the target of the address in the action attribute (default: _self).