HTML Forms

An HTML form that contains interactive controls or fields allow users to enter name, email address, phone numbers, or details like credit card information, etc. and send those information to a web server.

Where are HTML Forms Used?

HTML Forms are generally used as user registration form, login form, contact form, etc. Forms are also used on the back end of a website to save data into a database using PHP, ASP, PERL or other script.


How to Create HTML Forms

In this lesson, you’ll learn how to use HTML to mark up a form, which elements to use to capture different types of data.

HTML forms contain different types of elements like ─ input elements, checkboxes, radio buttons, submit buttons, and more.

A Simple HTML Form Example:

Example Try this Code
<form action="html_form_action.php">
  <fieldset>
    <legend>Contact us:</legend>
    <label>Name:</label>
    <br>
    <input type="text" name="name">
    <br>
    <label>E-mail:</label>
    <br>
    <input type="email" name="email">
    <br>
    <label>Message:</label>
    <br>
    <textarea name="message"></textarea>
    <br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

The <form> Element

The <form> tag is used to create an HTML form. The <form> element will wrap all of the elements included within the form, much like a <div> element.

<form>
  ...
</form>

The <input> Element

The <input> element is the most important form element. This element has various types of input fields, depending on the value of the type attribute such as ─ text, password, checkbox, radio, submit, reset, file, hidden, image, button and more.

Text Fields

The most popular type attribute value is text, which defines a one-line input field for text input.

<form>
  <label>Username:</label><br>
  <input type="text" name="username">
</form>
─ Result


Password Field

Password fields are similar to text fields, but the only difference is the type attribute is set to password to hide the characters. It is shown as a series of asterisks or dots.

<form>
  <label>Password:</label><br>
  <input type="password" name="password">
</form>
─ Result


Radio Buttons

Radio buttons allow users to make a quick choice from a small list of options. The <input> element is used to create a radio button, but the type attribute is set to radio.

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

Checkboxes

Check boxes allow users to select multiple values. These are very similar to radio buttons; only difference in the value of type attribute. So set the value to checkbox.

<form>
  <input type="checkbox" name="day" value="Friday"> Friday
  <input type="checkbox" name="day" value="Saturday"> Saturday
  <input type="checkbox" name="day" value="Sunday"> Sunday
</form>
─ Result
Friday Saturday Sunday

File Select Box

The file fields allow users to add files to a form. Use the file value for the type attribute.

<input type="file" name="file">
─ Result

Textarea

Textarea allows the user to enter multiple-line text. The <textarea> tag is used to create a text-area or multiple-line text field.

<form>
  <label>Message:</label><br>
  <textarea rows="3" cols="24" name="address"></textarea>
</form>
─ Result

Attributes:

The textarea element has two sizing attributes ─ cols and rows.

  • cols: It specifies the visible width of a text area.
  • rows: It specifies the visible height of a text area, in lines.

Drop-Down Lists

Drop-down lists allows users to select one or more options. To create a drop-down list, the <select> and <option> elements are used. The <option> elements within the <select> element define each list item.

<form>
  <label>Country:</label>
  <select name="country">
  <option value="usa">United States of America</option>
  <option value="uk">United Kingdom</option>
  <option value="germany">Germany</option>
  <option value="china">China</option>
  <option value="france">France</option>
  </select>
</form>
─ Result

Submit and Reset Buttons

A submit button is used to send the form data to a web server. And a reset button resets the form-data to its initial values.

Both the submit and reset buttons are created using the <input> element with a type attribute value of submit (for submit button) and reset (for reset button).

<form action="html_form_action.php">
  <label>Name:</label>
  <input type="text" name="name">
  <input type="submit" value="Submit">
  <input type="reset" value="Reset">
</form>
─ Result
Note: Instead of the <input> element, you can also use the <button> element for both submit and reset buttons.