We all know the importance of interactive websites in today's world. The main component that helps to achieve it is Form, to collect data from users which means to interact with the user "Form" is most needed. To create a form we need to know Basic Input Type in HTML.

We use the <input> element in HTML to create interactive controls to accept data from users.

There are various input types available to improve user experience. Let's see them one by one.

Input Types

Button :

It provides an empty button i.e button without any default behavior. It has a value attribute.

 <input type="button" value="Button-Name">

Checkbox :

It provides a little square box that can be selected or deselected. Generally, it gets used when we want multiple inputs from the user. It allows users to select multiple options from limited values. e.g. selecting preferences among given choices. It has a checked attribute - which shows a checkbox ticked by default.

<input type="checkbox" name="checkbox1" checked>

Color :

It allows the user to select a color from the color picker. It has a value attribute, it shows the default color. It takes color in hex code.

 <input type="color" value="#f6b73c">

Date :

It allows users to select a date from the date picker and also provides numeric wheels to select the year, month, and day in the supporting browser. It has given attributes,

• min - sets a limit on the earliest date to accept.
• max - sets a limit on the latest date to accept.
• value - sets the default date in the date picker.

<input type="date" name="Joining-Date" min="2017-04-01" max="2022-06-30" />

DateTime - Local :

It let the user select a date, year, month, day also minute, and hour from the date and time picker. It has the same attribute as 'date'.

<input type="datetime-local" name="meeting time" value="2022-11-22T19:30" min="2022-11-22T00:00" max="2022-11-28T00:00">

Email :

It let the user enter an email address and also checks if it is in the correct format. It has given attributes,

• maxlength - It sets a limit on the maximum number of characters one can enter.
• minlength - It sets a limit on the minimum character one can enter.
• pattern - It is used to specify a regular expression, it validates email and checks if it is in the same format. one shouldn't rely on the pattern for validation because it is easy to make adjustments in HTML.

<input type="email" id="email" size="30" minlength="3" maxlength="64">

File :

It lets the user select a file. Use the accept attribute to define the types of files that the control can select. It has multiple attribute that allows selecting multiple files.

<input type="file" id="file1" name="MyFile" accept="image/png, image/jpeg">

Hidden :

It is not displayed but the value is submitted to the server.

<input type="hidden" id="postId" name="postId" value="1" />

Image :

It is used to create a graphical submit button. It has src attribute to define the source and alt attribute to provide alternative text to the image.

<input type="image" id="image" alt="Login" src="/images/login-button.png">

Month :

It allows users to enter month and year without a time zone. It has min, max, and value attributes.

<input type="month" min="2022-03" value="2022-11">

Number :

It allows entering only numeric values. It has min, max, and value attributes.

<input type="number" min="10" max="100">

Password :

It let the user enter a password securely. It replaces each entered character with a symbol such as an asterisk ("*") or a dot ("•").

 <input type="password" id="pass" name="password" minlength="8">

Radio :

It allows the user to choose only one option from multiple choices. e.g. select gender.

 <input type="radio" value="choice  1">

Range :

It let the user select values between the range by setting maximum and minimum values, so the user can select between them. It is used when the exact value doesn't matter that much. e.g. volume settings.

 <input type="range" id="volume" name="volume" min="0" max="11">

Reset :

It cleans all the choices made by the user and resets the form to its initial values. It renders as a button.

 <input type="reset" value="Reset">

Search :

It is the same as the text field but created to accept search queries.

<input type="search" id="site-search" name="searchBar">

Submit :

It submits the form to the server. It gets rendered as a button on the web page.

<input type="submit" value="Submit" />

Tel :

It lets the user enter a telephone number. It has no validation for it. It has a pattern attribute.

<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">

Text :

It provides a single-line text field to enter text. We can set maximum and minimum limits on the number of characters one can enter.

<input type="text" minlength="4" maxlength="12" >

Time :

It allows users to enter time in hours and minutes format. It is helpful for appointment booking. It works according to browser support.

<input type="time" min="09:00" max="18:00">

URL :

It helps the user to enter the url. It provides a text field.

<input type="url" name="url" id="url" placeholder="https://example.com" pattern="https://.*" size="30">

Week :

It allows entering week, month and year. It takes a value as YYYY-W01 to W53 where W is the week and 01 to 52/53 is the week number.

<input type="week" name="week" min="2018-W18" max="2018-W26">

Let's create a sample form using all these elements :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form</title>
</head>
<body>
    <h1>Form Element Input Types</h1>
    <form action="">
        ID : <input type="number" name="ID" id="1" placeholder="Enter your ID "><br><br>
        Name : <input type="text" name="name" id="2" placeholder="Enter your Name "><br><br>
        email : <input type="email" name="email" id="3" placeholder=" example@gmail.com "><br><br>
        password : <input type="password" name="password" id="4"><br><br>
        Select known Code-Lang : <input type="checkbox" name="code" id="5">HTML<input type="checkbox" name="" id="">CSS<input type="checkbox" name="" id="">JS<br><br>
        Enter Date of Birth : <input type="date" name="DOB" id="7"><br><br>
        Gender : <input type="radio" name="gender" id="">Male<input type="radio" name="gender" id="">Female<br><br>
        TelePhone Number : <input type="tel" name="" id=""><br><br>
        Enter Local Time : <input type="datetime-local" name="time" id="8"><br><br>
        Upload Resume : <input type="file" name="resume" id="9"><br><br>
        Select Joining Month :  <input type="month" name="month" id="10"><br><br>
        Experience : <input type="range" name="volume" id="" min="1" max="10"><br><br>
        Enter Week : <input type="week" name="" id=""><br><br>
        Choose Meeting Time : <input type="time" name="time" id="" value="12:30"><br><br>
        Enter LinkedIn Profile Link : <input type="url" name="" id=""><br><br>
        Hidden Element (It is hidden / ignore it) : <input type="hidden" name="hidden1" id="10"><br><br>
        Pick your favourite color : <input type="color" id="6" value="#ff0000"><br><br>
        Search the site : <input type="search" name="PageSearch" id=""><br><br>
        (Submit button as image) : <input type="image" src="./image/submit.jpg" alt="submit image" width="100"><br><br>
        <input type="button" value="Button 1">
        <input type="submit" value="Submit">
        <input type="reset" value="Reset">
    </form>
</body>
</html>

Output :

Thank You

If you enjoyed this blog :)

Follow me on Linked In