HTML Forms

What is Forms in HTML-5

The form is a way to receive input from user in GUI (Graphical User Interface). Forms contain various types of fields to receive input to receive different types of input.

All form controls/fields are enclosed in <form> tag.

<form method="get/post" action="action-page-url">
      //All form controls
</form>

The form tag mainly has two attributes method and action.

  1. method: This attribute specify the HTTP method (GET/POST) used to submit the page. We will discuss the GET and POST method in Web development programming.
  2. action: This attribute is used to specify the action page URL, where the form is submitted after clicking on the submit button for the processing.

input tag

<input> tag have many variations. Variation occurs based on the type attribute.

The type attribute can contain the following values to create different input controls in HTML-5.

HTML-5 introduce various invalid validation control and attribute to perform general validation without using Javascript.

Firstname: <input type="text" name="firstname" id="firstname" placeholder="Enter your firstname">

Output

Firstname:

As shown above, code generates a simple textbox which is used to receive single-line text input.

Textbox attribute

<input> tag can have various attributes, some of the textbox attributes are described below...

  1. name:  Name attribute is used to assign a name to the control which is used to identify or access that control further.
  2. id: Id attribute also provides a unique identification to control and generally used to access control in client-side scripting like JS.
  3. placeholder: This attribute is introduced in HTML-5, It is used to specify a short hint.
  4. size: Size attribute specify the visible width (in terms of characters). For example, size="10" specify that a textbox is as long as it can show 10 characters at a time.
  5. maxlength: This attribute specifies the maximum number of characters a user can enter into the textbox.
  6. autofocus: This attribute specifies that control gets focus automatically on page loads. This is a boolean attribute. Before the HTML-5 boolean attribute is written like autofocus="autofocus" but HTML-5 ignores the duplicacy and attribute written only once like autofocus. In HTML-5 if the attribute is present in the tag treated as true otherwise treated false.
  7. disabled: This attribute is also a boolean attribute and disable the control and prevents to edit or submission of control value.
  8. readonly: This attribute is also a boolean attribute and stops editing in control and makes the control readonly. The difference between disabled and readonly attribute is that readonly prevents editing but don't prevent submission of control value.
  9. required: This attribute ensures that the field must be filled before form submission. it is also a boolean attribute.

Boolean Attribute: Before HTML-5 boolean attribute is written like autofocus="autofocus" but HTML-5 ignores the duplicacy and attribute written only once like autofocus. In HTML-5 if the attribute is present in the tag treated as true otherwise treated false.

The following examples demonstrate examples of the textbox with different attributes...

Placeholder textbox

Firstname: <input type="text" name="firstname" id="firstname" placeholder="Your Firstname">

Firstname:

Required textbox

Firstname: <input type="text" name="firstname" id="firstname" required>

Firstname:

size Attribute

Firstname: <input type="text" name="firstname" id="firstname" size="10">

Firstname:

maxlength Attribute

Firstname: <input type="text" name="firstname" id="firstname" maxlength="15">

Firstname:

disabled textbox

Firstname: <input type="text" name="firstname" id="firstname" disabled>

Firstname:

email tag

<input type="email">

HTML-5 introduce new validation control.

<input type="email"> is a new validation control, which is similar to textbox the only difference between the email control and text control is that the email tag only accepts the valid email.

Email: <input type="email" name="email" id="email" placeholder="Your e-mail address">

Email:

number tag

<input type="number">

The above tag is also introduced in HTML-5 and used to receive number type input in HTML.

Age: <input type="number" name="age" id="age" placeholder="Your age">

Age:

min/max attribute in <input> tag

min and max attributes are used to assign the minimum and maximum allowed value for a textbox. This tag is also introduced in HTML-5.

Age: <input type="number" name="age" id="age" placeholder="Your age" min="18" max="80">

Age:

step attribute in <input> tag

If a browser supports HTML-5, then the number tag value can be increased or decreased by up and down arrow respectively, by default increment and decrement occurs by 1.

To update increment or decrement value use the step attribute with the <input> tag.

range input in html

<input type="range">

<input type="range"> is also new addition in HTML-5. It is used to pick a value from the specified range.

Rating: <input type="range" name="rating" id="rating" min="0" max="5">

Rating:


password input in HTML

<input type="password">

Password input is used to receive input passwords, it is similar to the text input but it doesn't display the input characters.

Password: <input type="password" name="password" id="password">

Password:

Creating radio button in HTML

<input type="radio">

radio buttons are used for the options where user can select only one option from available multiple options.
Select Gender:<br>
<input type="radio" name="gender" value="m" checked> Male
<input type="radio" name="gender" value="f"> Female

Select Gender:
Male Female

As shown in the above example, following some points should be noted while creating a radio button...

  1. Radio buttons are created in a group and all the radio buttons of one group should have the same name but can have different values.
  2. To select a radio button by default checked attribute is used. checked is a boolean attribute.

Creating checkbox in HTML

<input type="checkbox">

If allows users to select multiple options from the available options.

Your Skills:<br>
<input type="checkbox" name="skills[]" value="html" checked> HTML
<input type="checkbox" name="skills[]" value="css"> CSS
<input type="checkbox" name="skills[]" value="js"> JS
<input type="checkbox" name="skills[]" value="php"> php
<input type="checkbox" name="skills[]" value="mysql"> Mysql

Your Skills:
HTML CSS JS php Mysql

Note: As shown in the above example, the name of the checkbox suffix with square brackets ([ ]). Square brackets are used with all those options which allow you to select multiple values and creates an array in the background.

Creating dropdown

A dropdown is an alternate of the radio button which allows you to select any one value from the list of options. It is used where there are too many options and occupies a lot of space on the page created with a radio button.

<select> tag is used to create dropdown.

Vehicle:
<select name="vehicle" id="vehicle">
  <option value="car">Car</option>
  <option value="bike" selected>Bike</option>
  <option value="auto">Auto</option>
</select>

Vehicle:

Multi-select dropdown

To create a multi-select dropdown we have to enable multiple selections by using the attribute multiple in <select> tag.

As if any option values are multiple, then in background array is created and their name must be suffix with square brackets [ ].

Your Skills:<br>
<input type="checkbox" name="skills[]" value="html" checked> HTML
<input type="checkbox" name="skills[]" value="css"> CSS
<input type="checkbox" name="skills[]" value="js"> JS
<input type="checkbox" name="skills[]" value="php"> php
<input type="checkbox" name="skills[]" value="mysql"> Mysql

Your Skills:

Note: To select multiple options press Ctrl key and then click options to select.

Dropdown with optgroup

<optgroup> tag is used to group a list of options. <optgroup> itself can't be selected.

Your Skills: <select name="skills[]" multiple>
  <optgroup label="Web Development">
    <option value="html">HTML</option>
    <option value="html">CSS</option>
    <option value="js">JS</option>
    <option value="php">php</option>
  </optgroup>
  <optgroup label="Database">
    <option value="mysql">Mysql</option>
    <option value="sql">SQL</option>
    <option value="mongodb">Mongo DB</option>
  </optgroup>
</select>

Your Skills:

Note: As shown in the above example to provide the group label, label attribute is used with <optgroup> tag.

Creating buttons in HTML

In HTML, buttons can be 3 types

  1. submit button
  2. button
  3. reset button

submit button

It is used to submit the form and send the form data on the action URL for processing.

The point you must remember that the submit button only works if it is enclosed in <form> tag.

<input type="submit" name="sub" value="Register">

Note: While creating the button, the value of the button will be display on the button.

Standard Button

<input type="button" name="sub" value="Check Form">

Note: As against to submit button, the normal button doesn't define any task it is used to trigger the click and task is defined by any programming language like JS, Jquery.

Reset button

A reset button is used to reset the form with its initial state. It also works only if is created within the form

<input type="reset" name="sub" value="Reset Form">

<button> tag in HTML-5

HTML-5 introduces a new tag <button> to create a button. It has a type attribute which can have a value button/submit/reset to create a different type of buttons. The text written between the button tag is displayed on the button.

<button type="submit" name="sub" value="submit">Register</button>

<button type="button" name="sub" value="btn">Check Form</button>

<button type="reset" name="sub" value="reset">Reet Form</button>

datalist tag in html

<datalist> tag is new in HTML-5. It is used to define an input-tag with pre-defined values.

<input list="courses">
<datalist id="courses">
  <option value="C">
  <option value="JAVA">
  <option value="HTML">
</datalist>

  • To create datalist of options, nest the available list of options inside the data list.
  • Provide the id to datalist by using the id attribute.
  • Use datalist with an input tag by using the list attribute and specify the datalist id as shown in the above example.

input type url in HTML

<input type="url">

This tag creates a textbox that only accepts a valid URL.

Website: <input type="url" name="website">

Website:

input type search

<input type="search">

It is used to define a search box, the output is similar to textbox only difference is that used for the searching purpose.

Custom Search: <input type="search" name="search_text" placeholder="Search text">

Custom Search:

input type color

<input type="color">

This option creates a color picker to pick the color options if HTML-5 supports the browser otherwise shows a plain textbox.

Color: <input type="color" name="color">

Color:

input type date

<input type="date">

This option is used to create a textbox along with the date picker.

DOB: <input type="date" name="dob" placeholder="Enter DOB">

DOB:

datetime-local in html

<input type="datetime-local">

This option is used to create an input box with datepicker along with the time picker.

DOB & Time: <input type="datetime-local" name="dob_dot" placeholder="Enter DOB & time">

DOB & Time:

label tag in html

<label> tag is used to specify a caption for any input control.

It associates the caption with the input field visually as well as programmatically too.

<label for="fname">Firstname:</label>
<input type="text" name="firstname" id="fname" placeholder="Enter firstname">

To associate the <label> with an <input> element, you need to give the id attribute. The label then needs a for attribute whose value is the same as the input's id.