You Are Here

HTML Form Input Types

The HTML form input types i.e <input type=” “> is an important element of HTML form.
The “type” attribute of the input element can be various types, which defines the information field.

HTML Form Input Types:

Input Type Text:

The <input type=”text”> is used to define a single-line input text field.

Example:

<form>
First name:<br>
<input type="text" name="firstname"> <br>
Last name:<br>
<input type="text" name="lastname"> <br><br>
<input type="submit">
</form>
Try it

Input Type Password:

The <input type=”password”> allow a user to enter the password securely on a webpage.
The text entered in the password field is converted into “***” or “…”, so that is cannot be read by other users.

Example:

<form>
Enter User Name:<br>
<input type="text" name="username">
Enter Password:<br>
<input type="password" name="psw">
</form>
Try it

Input Type Submit:

The <input type=”submit”> defines a submit button to submit the form to the form-handler.
The form-handler is a server that processes input data and it is specified in the action attribute.

Example:

<form action="/sample_page.php">
First name:<br>
<input type="text" name="firstname" value="First Name"><br>
Last name:<br>
<input type="text" name="lastname" value="Last name"><br><br>
<input type="submit" value="Submit">
</form>
Try it
If you can not write the value attribute of the submit button then the button will get the default text.

Example:

<form action="/sample_page.php">
First name:<br>
<input type="text" name="firstname" value="First Name"><br>
Last name:<br>
<input type="text" name="lastname" value="Last name"><br><br>
<input type="submit">
</form>
Try it

Input Type Reset:

The <input type=”reset”> is defines as a button when the user performs a click event, it reset the all inputted values by default.

Example:

<form>
<label> User Id: </label>
<input type="text" name="user-id" value="user">
<label>Password: </label>
<input type="password" name="pass" value="pass"><br><br>
<input type="submit" value="login">
<input type="reset" value="Reset">
</form>
Try it

Input Type Radio:

The <input type=”radio”> defines the radio button, which allows selecting an option between a set of related options. It lets a user select only one option at a time.

Example:

<form>
<p> Select one Technology </p>
<input type="radio" name="technology" value="html"> HTML <br>
<input type="radio" name="technology" value="css"> CSS <br>
<input type="radio" name="technology" value="javascript"> JavaScript <br>
<input type="radio" name="technology" value="bootstrap"> Bootstrap <br>
<input type="submit" value="submit">
</form>
Try it

Input Type Checkbox:

The <input type=”checkbox”> defines a checkbox, that is displayed as square boxes and can be checked or unchecked to select the options.

Example:

<form>
<label> Enter your Name: </label>
<input type="text" name="name">
<p> Select your favourite Country </p>
<input type="checkbox" name="country1" value="India"> India <br>
<input type="checkbox" name="country2" value="USA"> USA <br>
<input type="checkbox" name="country3" value="Canada"> Canada <br>
<input type="checkbox" name="country4" value="Egypt">Egypt
<input type="checkbox" name="country5" value="Italy"> Italy <br><br>
<input type="submit" value="submit">
</form>
Try it

Input Type Button:

The <input type=”button”> dedfines a button which can control functionality on any event such as click event.

Example:

<form>
<input type="button" value="Clcik me " onclick="alert('Learn HTML')">
</form>
Try it

Input Type File:

The <input type=”file”> is used to select one or more files from user device storgae. Once you choose the file and after submission, this file can be uploaded to the server.

Example:

<form>
<label> Select file to upload: </label>
<input type="file" name="newfile">
<input type="submit" value="submit">
</form>
Try it

HTML5 Input Types:

HTML5 added some new input types:

Input Type Color:

The <input type=”color”> is used to define an input field that contains a color. It allows a user to specify the color on the browser.
The “color” type only supports color value in hexadecimal format, and the default value is #000000 (black).

Example:

<form>
Select your favorite color:
<input type="color" name="favcolor" value="#ff5722">
<input type="submit">
</form>
Try it

Input Type Date:

The <input type=”date”> is used to generate an input field that allows a user to input a date in a given format. The date can be entered by the text field or by the date picker interface.

Example:

<form>
Select the Date:
<input type="date" name="date">
<input type="submit">
</form>
Try it
You can also use the min and max attributes to add restrictions while selecting the date.

Example:

<form>
Enter a date before 1970-01-01:
<input type="date" name="bday" max="1969-12-31"><br><br>
Enter a date after 2002-01-01:
<input type="date" name="bday" min="2002-01-02"><br><br>
<input type="submit">
</form>
Try it

Input Type Datetime-local:

The <input type=”datetime-local”> is used to generate an input field that allows a user to select the date as well as local time in the hour and minute with no time zone information.

Example:

<form>
Select the meeting date and time:
<input type="datetime-local" name="meeting">
<input type="submit" value="Send">
</form>
Try it

Input Type Email:

The <input type=”email”> is used to create an input field that allows a user to enter the e-mail address. The submitted e-mail address can be automatically validated after submission. The multiple attribute allows the user to enter more than one email address.

Example:

<form>
<label> Enter your Email-address </label>
<input type="email" name="email">
<input type="submit"> <br><br>
<label> Enter multiple Email-addresses </label>
<input type="email" name="email" multiple>
<input type="submit">
</form>
Try it

Input Type Month:

The <input type=”month”> is used to create an input field that allows a user to select month and year.

Example:

<form>
<label> Enter your Birth Month-year: </label>
<input type="month" name="newMonth">
<input type="submit">
</form>
Try it

Input Type Number:

The <input type=”number”> is used to create an input field that allows a user to enter the numeric values. You can also set the restrictions to enter a minimum and maximum values using min and max attributes.

Example:

<form>
<label> Enter your age: </label>
<input type="number" name="num" min="20" max="50">
<input type="submit">
</form>
Try it

Input Type Range:

The <input type=”range”> is used to control a number entered by user whose exact value is not important. You can set restrictions on which numbers are accepted with the min and max attributes. Its default range is 0 to 100. The input type “range” is displayed as a slider control.

Example:

<form>
<label> Points: </label>
<input type="range" name="points" min="0" max="50">
<input type="submit">
</form>
Try it

Input Type Search:

The <input type=”search”> is used to create an input field that allows a user to enter a search string.

Example:

<form>
<label> Search:</label>
<input type="search" name="searchhere">
<input type="submit" value="search">
</form>
Try it

Input Type Tel:

The <input type=”tel”> is used to create an input field that allows entering the telephone number. It does not have a default validation like email, because the pattern of a telephone number can vary worldwide.

Example:

<form>
<label> Enter your Telephone Number: </label>
<input type="tel" name="telephone" pattern="[0-9]{3}-[0 -9]{3}-[0-9]{4}" required>
<input type="submit"><br><br>
</form>
Try it

Input Type Time:

The <input type=”time”> is used to select a time (no time zone).

Example:

<form>
<label> Select a time: </label>
<input type="time" name="your_time">
</form>
Try it

Input Type Url:

The <input type=”url”> is used to create input fields that should contain a URL address. The URL field can be automatically validated after submission, depending on browser support.

Example:

<form>
<input type="url" name="website" placeholder="http://example.com"><br>
<input type="submit" value="Submit">
</form>
Try it

Input Type Week:

The <input type=”week”> allows a user to select a week and year from the drop-down.

Example:

<form>
<input type="week" name="week-name">
<input type="submit" value="Submit">
</form>
Try it

Ask a Question

Your email address will not be published. Required fields are marked *