HTML Form Input Types

An important element of the HTML form is < input type= “> in HTML. The type attribute of the input element can be of different types, which defines the information field. For example, < input type=”text “name=”name” > gives a text box.

The following is a list of all types of HTML element < input>.

Type=“ ”Description
passwordDefine the input field of a single line password.
radioDefines a radio button that allows one of the choices to be selected.
resetDefines a reset button in the form to restore all the values.
checkboxDefines checkboxes that allow multiple options of type to be selected.
buttonDefine a basic push button which can be programmed to accomplish an event mission.
fileDefines the file to be picked from system storage.
imageSets a graphic submission button.
submitDefines the button to submit the form to the server.
textDefines a single-line text input field

HTML5 has introduced new styles on the element < input>. Below is a list of types of HTML5 elements

TypeDescription
ColorDefine a common color field for the data.
DateDefines the input field for the selection of dates.
datetime-localDefines an input field for entering a date without a time zone.
EmailDefines an entry field for an email address to enter.
MonthDefine a rule for the month and year, without time zone.
NumberSets a field input for entering a number.
urlSets a field to access URL
WeekDefines a area with week-year, without time zone to reach the year.
SearchDefines the text field of a single line to enter a search string.

The definition with examples of types of < input > elements follows.

1. <input type=”password”>:

The “password” form feature < input > enables a user to safely enter the password in a web page. The password-filed text entered is translated to “*” or.”, “so that another person can’t read it.

Example:

Output:

HTML Form Input Types

2.  <input type=”submit”>:

The “submit” type item < input > specifies a submit button when the “press” event occurs to submit the form to the server.

Example

Output

HTML Form Input Types

Upon clicking the submit button, the form will be submitted to the server and the page will be redirected to the action value.

3. <input type=”text”>:

The “text” type element < input > is used to define a text field in a single line.

Example:

Output:

HTML Form Input Types

4. <input type=”radio”>:

The radio buttons are specified by the < input > type “radio” which allows choosing an option between collections of related options. Only one radio-button option at a time can be selected.

Example:

Output:

HTML Form Input Types

5. <input type=”reset”>:

The < input > type “reset” is often known as a button, but when the user performs a click event, the default is to reset all input values.

Example:

Output:

HTML Form Input Types

6. <input type=”checkbox”>:

The < input > form “checkbox” is shown as square boxes that can be checked or unchecked to pick a choice from a given selection.

Example:

Output:

HTML Form Input Types

7. <input type=”button”>:

The < input > type “button” describes a simple push button that can be programmed to control any event, such as clicking an action.

Output:

HTML Form Input Types

8. <input type=”file”>:

The < Input > file type element is used to select one or more files from the storage device of the user. If the file is selected and uploaded, it can be uploaded to the server using the JS code and file API.

Example:

Output:

HTML Form Input Types

9. <input type=”image”>:

The “image” type < input > is used in file form to represent a submit button.

Example:

Output:

HTML Form Input Types

HTML5 newly added <input> types element

1. <input type=”color”>:

The < input > type “color” is used to define an input field containing a color. It allows the user to specify the color on the browser using visual color interface.

Example:

Output:

HTML Form Input Types

2. <input type=”date”>:

The < input > element of type “date” generates an input field, which allows the user to enter a date in a given format. You can enter a date by text field or by date picker interface.

Example:

Output:

HTML Form Input Types

3. <input type=”datetime-local”>:

The < input > element of the type “datetime-local” creates an input filed that allows the user to select the date as well as the local time in the hour and minute without time zone information.

Example:

Output:

HTML Form Input Types

4. <input type=”email”>:

The < input > type “email” creates an input filed that allows the user to enter an e-mail address with a pattern validation. Multiple attributes make it possible for a user to enter more than one email address.

Example:

Output:

HTML Form Input Types

5. <input type=”month”>:

The < input > type “month” creates an input field that allows the user to easily enter month and year in the “MM, YYYY” format where MM defines the value of the month and YYYY defines the value of the year.

Example:

Output:

HTML Form Input Types

6. <input type=”number”>:

The < input > element type number generates an input field that allows the user to enter a numeric value. You can also restrict yourself to enter the minimum and maximum values using the min and max attributes.

Example:

Output:

HTML Form Input Types

7. <input type=”url”>:

The < input > element of the type “url” creates an input filed that enables the user to enter the URL.

Example:

Output:

HTML Form Input Types

8. <input type=”week”>:

Form week < input > creates an input field that allows a user to pick a week and year without time zone in the drop-down calendar.

Example:

 

Output:

HTML Form Input Types

The “search” form <input> generates a filed input which enables a user to enter a search string. They are functionally symmetrical to the form of text input but may be different in style.

Example:

Output:

HTML Form Input Types

Pin It on Pinterest

Share This