Others


HTML Form Tag


An HTML form is a section of a document which contains controls such as text fields, password fields, checkboxes, radio buttons, submit button, menus etc. The <form> tag is used to create an HTML form. Users generally complete a form by modifying its controls e.g. entering text, selecting items, etc. and submitting this form to a web server for further processing.

HTML Form Tag List

Tag Description
<form> It defines an HTML form to enter inputs by the used side.
<input> It defines an input control.
<textarea> It defines a multi-line input control.
<label> It defines a label for an input element.
<select> It defines a drop-down list.
<option> It defines an option in a drop-down list.
<button> It defines a clickable button.
<fieldset> It groups the related element in a form.
Syntax 
<form>
 form elements
</form>

HTML Form - <input> Element

This is the most commonly used element within HTML forms. It is used to create form fields, to take input from user. The most frequently used input types are described below.

Text Fields

Text fields defines a single-line input field for text input.

Example 
<form>
    <label for="username">Username:</label>
    <input type="text" name="username" id="username">
</form>
Try it Yourself

Output:


Password Field

Password fields are similar to text fields. The password is not visible to the user in password field control.

Example 
<form>
    <label for="password">Password:</label>
    <input type="password" name="password" id="password">
</form>
Try it Yourself

Output:


Email Field

It validates the text for correct email address. The input value is automatically validated to ensure it is a properly formatted e-mail address.

Example 
<form>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
</form>
Try it Yourself

Output:


Radio Buttons

The radio button is used to select one option from multiple options. If you use one name for all the radio buttons, only one radio button can be selected at a time.

Example 
<form>
   <input type="radio" name="gender" id="male">
   <label for="male">Male</label>
   <input type="radio" name="gender" id="female">
   <label for="female">Female</label>
</form>
Try it Yourself

Output:


Checkboxes

The checkbox control is used to check multiple options from a given pre-defined set of options.

Example 
<form>
  <label>Courses:</label><br>
  <input type="checkbox" name="html" id="html">
  <label for="html">HTML</label><br>
  <input type="checkbox" name="css" id="css">
  <label for="cricket">CSS</label><br>
  <input type="checkbox" name="bootstrap" id="bootstrap">
  <label for="bootstrap">Bootstrap</label>
</form>
Try it Yourself

Output:





File Select box

The file fields allow a user to browse for a local file and send it as an attachment with the form data.

Example 
<form>
  <label for="file-select">Upload File:</label>
  <input type="file" name="upload" id="file-select">
</form>
Try it Yourself

Output:


Submit Button

A submit button is used to send the form data to a web server. When user clicks on submit button, then form get submit to the server. When submit button is clicked the form data is sent to the file specified in the form's action attribute to process the submitted data.

Example 
<form action="action.php" method="post">
  <label for="username">Username:</label>
  <input type="text" name="username" id="username">
  <input type="submit" value="Submit" name="submit">
</form>
Try it Yourself

Output:


Reset Button

A reset button resets all the forms control to default values.

Example 
<form action="action.php" method="post">
  <label for="username">Username:</label>
  <input type="text" name="username" id="username">
  <input type="submit" value="Submit" name="submit">
  <input type="reset" value="Reset" name="reset">
</form>
Try it Yourself

Output: