HTML - Forms

First Page
Next Page

HTML Forms

Html form is a smart facility that make you available the users’ data. It helps to collect the users’ data. It also controls the data system, as it collects the data and then send to server for processing.

What is HTML Forms

Form is a part of web page.

It is used to collect user input through elements like text fields, check box and radio button, select option, text area, submit buttons and etc.

Form works like a container which consists of controls known as form elements.

The HTML <form> tag is used to create an HTML form.

Following are the major elements of html forms −

  • Text fields

  • Password fields

  • Checkboxes

  • Radio buttons

  • Submit buttons

  • Menus etc.

Syntax

<form action="Script URL" method="GET/POST"> 
    form elements land layout tags
</form>

Form Attributes

For Example
Attribute Description
action Specifies the encoding of the submitted data.
enctype Used to give a name to the control.
method Specify the method to be used to upload data.
target Indicates the target of the address in the action attribute.
name Used to identify and retrieve values from each form on the web page.

Text Input

The <input> element is the most important form element, the <input> element can be displayed in several ways, depending on the type attribute.

Example

<!DOCTYPE html> 
<html> 
     <head> 
          <title>Text Input Control Example</title> 
     </head> 
     <body> 
          <form > 
               Name:  <input type="text" name="name" /> 
               Mobile No:  <input type="text" name="mob_no" /> 
          </form> 
     </body> 
</html>

Result

Text Input Control Example
Name:
Mobile No:

Creating Radio Button Input

Example

<!DOCTYPE html>
<html>
<body>

<h2>Radio Buttons</h2>

<form>
  <input type="radio" name="gender" value="male" checked> Female
  <input type="radio" name="gender" value="female"> Male
  <input type="radio" name="gender" value="other"> Other  
</form> 

</body>
</html>

Result

Creating Radio Buttons

Female
Male
Other

Creating Submit Button

Example

<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
  First name:
  <input type="text" name="firstname" value="Mickey">
  Last name:
  <input type="text" name="lastname" value="Mouse">
  <input type="submit" value="Submit">
</form> 
<p>please click the "Submit" button.</p>
</body>
</html>

Result

HTML Forms

First name:

Last name:


please click the "Submit" button.

First Page
Next Page