HTML - Form Controls

Previous
Next

HTML form elements that are used to create controls for the user interaction within the browser are termed as form controls.

They enable users to enter information for the server side processing. The nature of interaction with the server can vary depending on the type of control used while creating the form. For example, radio buttons are typically used to accept gender information. We have used several common form controls in previous discussions, we will now dive into a more detailed exploration of these elements.

There are different types of form controls that we can use to collect data using HTML form.

Input Types Description
<input type = "text"> Text input usually used to accept characters from user such as username, password, address.
<input type = "number"> The input type number used to accept number as input from user.
<input type = "checkbox"> Checkbox input is shown as a square box, that can be checked or unchecked based on user requirement.
<input type = "radio"> Radio input defines a radio button for selecting one of the many choices.
<select> Select tag is used to create a dropdown list in a form.
<input type = "datetime-local"> The input type datetime defines a graphical interface to pick a month.
<input type = "date"> The input type date defines a graphical interface to pick a date.
<input type = "month"> The input type month defines a graphical interface to pick a month.
<input type = "week"> The input type week defines a graphical interface to pick a week.
<input type = "time"> The input type time defines a graphical interface to pick a time.
<input type = "range"> The input type range used to define a slider control for entering a number.
<input type = "email"> The input type email is used to define an input area that accepts email.
<input type = "url"> The input type url is used to define an input area that accepts url

Examples of HTML form Control

Here are some examples that illustrate use of form control element in HTML.

Text input Control

The text input controls are further divided into three main categories.

  • Single-line text input controls
  • Password input controls
  • Multi-line text input controls

Single-line text input Control

The single-line text input control is used for items that require only one line of user input, such as search boxes or names. They are created using HTML <input> tag.

The following example illustrates how to take a single-line text input.

<!DOCTYPE html>
<html>

<head>
   <title>Text Input Control</title>
</head>

<body>
   <form >
      First name: 
      <input type = "text" name = "first_name" />
      <br><br>
      Last name: 
      <input type = "text" name = "last_name" />
   </form>
</body>

</html>

Password input Control

The password input control is also a single-line text input but it masks the character as soon as a user enters it. They are also created using HTML <input> tag but type attribute is set to password.

In the following example, we will demonstrate how to take password input from users.

<!DOCTYPE html>
<html>

<head>
   <title>Password Input Control</title>
</head>

<body>
   <form >
      User ID : 
      <input type = "text" name = "user_id" />
      <br><br>
      Password: 
      <input type = "password" name = "password" />
   </form>
</body>

</html>

Multiple-Line Text Input Control

The multiple line text input control is used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created using HTML <textarea> tag.

The following example demonstrates how to use multi-line text input to take item description.

<!DOCTYPE html>
<html>

<head>
   <title>Multiple-Line Input Control</title>
</head>

<body>
   <form>
      Description : <br />
      <textarea rows = "5" 
                cols = "50" 
                name = "description">
         Enter description here...
      </textarea>
   </form>
</body>

</html>

Checkbox input Control

Checkboxes are used when more than one option is required to be selected. They are also created using HTML <input> tag but type attribute is set to checkbox.

In this HTML code, we are creating a form with two checkboxes.

<!DOCTYPE html>
<html>

<head>
   <title>Checkbox Control</title>
</head>

<body>
   <form>
      <input type = "checkbox" 
             name = "maths" 
             value = "on"> 
      Maths
      <input type = "checkbox" 
             name = "physics" 
             value = "on"> 
      Physics
   </form>
</body>

</html>

Radio Button Control

Radio buttons are used when out of many options, just one option is required to be selected. They are also created using HTML <input> tag but type attribute is set to radio.

In this example code, we are creating a form with two radio buttons.

<!DOCTYPE html>
<html>

<head>
   <title>Radio Box Control</title>
</head>

<body>
   <form>
      <input type = "radio" 
             name = "subject" 
             value = "maths"> 
      Maths
      <input type = "radio" 
             name = "subject" 
             value = "physics"> 
      Physics
   </form>
</body>

</html>

Select Box Control

A select box provides features to list down various options in the form of drop down list, from where a user can select one or more options.

The following HTML code illustrates how to create a form with a drop down box.

<!DOCTYPE html>
<html>

<head>
   <title>Select Box Control</title>
</head>

<body>
   <form>
      <select name = "dropdown">
         <option value = "Maths" selected>
            Maths
         </option>
         <option value = "Physics">
            Physics
         </option>
         <option value = "Chemistry">
            Chemistry
         </option>
      </select>
   </form>
</body>

</html>

File Upload Box

If we want to allow a user to upload a file to our web site, we will need to use a file upload box, also known as a file select box. This is also created using the <input> element but type attribute is set to file.

In the following example, we will create a form with one file upload box that accepts only images.

<!DOCTYPE html>
<html>

<head>
   <title>File Upload Box</title>
</head>

<body>
   <form>
      <input type = "file" 
             name = "fileupload" 
             accept = "image/*" />
   </form>
</body>

</html>

Button Control

There are various ways in HTML to create clickable buttons. We can create a clickable button using <input> tag by setting its type attribute to button.

In this HTML code, we are creating a form with three different types of buttons.

<!DOCTYPE html>
<html>

<head>
   <title>File Upload Box</title>
</head>

<body>
   <form onsubmit="return false;" >
      <input type = "submit" 
             name = "submit" 
             value = "Submit" />
      <br><br>
      <input type = "reset" 
             name = "reset" 
             value = "Reset" />
      <br><br>
      <input type = "button" 
             name = "ok" 
             value = "OK" />
      <br><br>
      <button>Submit</button>
   </form>
</body>

</html>

Hidden Form Control

The Hidden form controls are used to hide data inside the page which later on can be pushed to the server. This control hides inside the code and does not appear on the actual page. For example, following hidden form is being used to keep current page number. When a user will click next page then the value of hidden control will be sent to the web server and there it will decide which page will be displayed next based on the passed current page.

The following example shows the usage of hidden control.

<!DOCTYPE html>
<html>

<head>
   <title>File Upload Box</title>
</head>

<body>
   <form onsubmit="return false;">
      <p>This is page 10</p>
      <input type = "hidden" 
             name = "pagename" 
             value = "10" />
      <input type = "submit" 
             name = "submit" 
             value = "Submit" />
      <input type = "reset" 
             name = "reset" 
             value = "Reset" />
   </form>
</body>

</html>

Date and time Selector

In HTML, the datetime control represents date and time (year, month, day, hour, minute, second, fractions of a second) together encoded according to ISO 8601 with the time zone set to local timezone of browser.

<!DOCTYPE html>
<html>

<head>
   <title>Date and Time Picker</title>
</head>
;
<body>
   <form onsubmit="return false;">
      Date and Time: 
      <input type="datetime-local" name="newinput" />
      <input type="submit" value="Submit" />
   </form>
</body>

</html>

Date Selector

The HTML date control is used to specify a date (year, month, day) encoded according to ISO 8601.

<!DOCTYPE html>
<html>

<head>
   <title>Date Picker</title>
</head>

<body>
   <form onsubmit="return false;">
      Date: 
      <input type="date" name="newinput" />
      <input type="submit" value="Submit" />
   </form>
</body>

</html>

Month Selector

In HTML, the month control is used to display a date consisting of only a year and a month encoded according to ISO 8601.

<!DOCTYPE html>
<html>

<head>
   <title>Month Picker</title>
</head>

<body>
   <form onsubmit="return false;">
      Date: 
      <input type="month" name="newinput" />
      <input type="submit" value="Submit" />
   </form>
</body>

</html>

Week Selector

As the name suggests, the week control displays a date consisting of only a year and a week number encoded according to ISO 8601.

<!DOCTYPE html>
<html>

<head>
   <title>Week Picker</title>
</head>

<body>
   <form onsubmit="return false;">
      Date: 
      <input type="week" name="newinput" />
      <input type="submit" value="Submit" />
   </form>
</body>

</html>

Time Selector

The HTML time control specify the hours, minutes, seconds, and fractional seconds encoded according to ISO 8601.

<!DOCTYPE html>
<html>

<head>
   <title>Time Picker</title>
</head>

<body>
   <form onsubmit="return false;">
      Date: 
      <input type="time" name="newinput" />
      <input type="submit" value="Submit" />
   </form>
</body>

</html>

Number Selector

The number controls accepts only numerical value. The step attribute specifies the precision and its default values is 1.

<!DOCTYPE html>
<html>

<body>
   <form onsubmit="return false;">
      Select Number: 
      <input type = "number" 
               min = "0" 
               max = "10" 
               step "1"
               value = "5" 
               name = "newinput" />
      <input type = "submit" 
               value = "submit" />
   </form>
</body>

</html>

Range Control

The range type is used for input fields that should contain a value from a range of numbers.

<!DOCTYPE html>
<html>

<body>
   <form onsubmit="return false;">
      Select Range : 
      <input type = "range" 
             min = "0" 
             max = "10" 
             step "1"
             value = "5" 
             name = "newinput" />
      <input type = "submit" 
             value = "submit" />
   </form>
</body>

</html>

Email Control

The email control accepts only email value. This type is used for input fields that should contain an e-mail address. If you try to submit a simple text, it forces to enter only email address in email@example.com format.

<!DOCTYPE html>
<html>

<body>
   <form onsubmit="return false;">
      Enter email : 
      <input type = "email" name = "newinput" />
      <input type = "submit" value = "submit" />
   </form>
</body>

</html>

URL Control

The HTML URL control accepts only URL value. This type is used for input fields that should contain a URL address. If you try to submit a simple text, it forces to enter only URL address either in http://www.example.com format or in http://example.com format.

<!DOCTYPE html>
<html>

<body>
   <form onsubmit="return false;">
      Enter URL: 
      <input type = "url" name = "newinput" />
      <input type = "submit" value = "submit" />
   </form>
</body>

</html>
Print Page
Previous
Next
Advertisements