WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

HTML Forms


The <form> Element

HTML frames are utilized to gather client data input.

The <form> component :

<form>
.
form elements
.
</form>

HTML frames contain form elements.

Form components are different sorts for example, checkbox input components radio catch and submit more. /p>


The <input> Element

The <input> component is the a standout amongst the most essential form element.

The <input> component has different however relying upon the type attribute.

In this part we utilize following type:

Type Description
text it is use for ordinary content input
radio it is use for choosing one of numerous choices)
submit it is use forsubmitting the form)

Text Input

<input type="text"> characterizes 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 the manner by which it will look like in a browser:

First name:

Last name:


Radio Button Input

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

Radio catches are exceptionally fascinating client can choose one of a set number of decision.

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 straightforward code of radio catch input :

Male
Female
Other


The Submit Button

<input type="submit"> principle a catch for submitting a structure to a form-handler.

The structure handler is mauinly a server page with a content for preparing input data.

The structure handler is indicated in the structure'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 shown in a browser:

First name:

Last name:



The Action Attribute

The action attribute express that the activity to be performed when the structure is submitted.

The normal approach to present a structure to a server, is by utilizing a submit button.

the structure is submitted to a site page on a web server.

server-side content handle the submitted form:

<form action="action_page.php">

If the activity trait is overlooked, the activity is set to the current page.


The Method Attribute

The method attribute characterize the HTTP strategy GET or POST to be utilized while presenting the forms:

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

or:

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

When to Use GET?

You can utilize GET (the default method):

If the structure accommodation is detached (like a web crawler question), and without touchy information.

When you use GET, the structure information will be obvious in the page address:

action_page.php?firstname=Michal&lastname=jhon


POST use

Which condition you should utilize POST:

If the structure is refreshing information, or incorporates delicate data Like password,email.

POST is better technique for security on the grounds that submitted information isn't unmistakable in page address.


The Name Attribute

Info document is additionally called name property.

This precedent will just 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> component bunches related information in a form.

The <legend> component characterizes an inscription 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 the manner by which the HTML code above will be shown in a browser:

Personal information: First name:

Last name:



Note:

Simple precedent are https://www.welookups.com/html/action_page.php is structure submittion connect it work html page fine.

It is well known strategy for POST.


HTML Form Attributes

An HTML <form> component, with every conceivable characteristic set, will resemble this:

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


Here some is the rundown of <form> attributes:

Attribute Description
accept-charset it is Specifies the charset utilized in the submitted structure default: the page charset.
action it is Specifies a location (url) where to present the structure default: the submitting page.
autocomplete it is Specifies if the program ought to autocomplete the structure (default: on).
enctype it is Specifies the encoding of the submitted information (default: is url-encoded).
method it is Specifies the HTTP technique utilized while presenting the structure (default: GET).
name it is Specifies a name used to distinguish the structure (for DOM utilization: document.forms.name).
novalidate it is Specifies that the program ought not approve the form.
target it is Specifies the objective of the location in the activity quality (default: _self).