HTML Forms

❮ Previous Home Next ❯

The HTML Forms are required, when you want to collect some data from the site visitor.

An HTML form is used to collect user input.

A form will take input from the site visitor and then will post it to a back-end application such as ASP or PHP etc.

The back-end application will perform required processing on the passed data based on defined business logic inside the application.

There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.




Syntax

The HTML <form> tag is used to create an HTML form and it has following commonly used syntax:

<form action="URL" method="GET|POST">
 form elements like input, textarea etc.
</form>



The <input> Element

The <input> element specifies an input control for a form.

Example

<form action="action.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form> 



Text Fields

The default value. provides single-line text field.

Line-breaks are automatically removed from the input value.

Example

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">

Note: The default width of an input field is 20 characters.




The <label> Element

The <label> element is used to relate descriptions to form controls.

Example

<form action="action.php">
  <input type="radio" id="html" name="language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="Submit">
</form>

Note: A <label> element can have both a for attribute and a contained control element, as long as the for attribute points to the contained control element.

Tip: The <label> element provides a usability improvement by making the form more accessible for mouse users. It provides a much larger clickable area for small elements link checkbox, radio







Checkboxes

The <input type="checkbox"> defines a checkbox.

A check box allowing single values to be selected/deselected.

Example

<label for="html">HTML: </label>
<input type="checkbox" id="html" value="HTML">

<label for="css">CSS: </label>
<input type="checkbox" id="css" value="CSS">

<label for="js">JavaScript: </label>
<input type="checkbox" id="js" value="JavaScript">



Radio Buttons

A <input type="radio"> button, allowing a single value to be selected out of multiple choices with the same name value.

Example

<input type="radio" id="html" name="language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="language" value="JavaScript">
<label for="javascript">JavaScript</label>



The Submit Button

The <input type="submit"> provides button that submits the form.

Example

<label for="fullName">Full Name:</label>
<input type="text" id="fullName" name="fullName"><br>
<input type="submit" value="Submit">



The Name Attribute for <input>

The name attribute allows a form control to be assigned a name to set as the name/value pair value sent to the server.

Example

<form action="action.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>

See <input> HTML Tag.

❮ Previous Home Next ❯