In website some pages or section requires some information from user like name, address, phone no, etc.. HTML input elements are used to get input from user.

This post describes about html different types of input elements and their attributes. Most common use of input elements are form designing.

This post will describe about input elements in HTML 4 and new input elements added in HTML5.

HTML 4 input element types

• text

• checkbox

• radio

• submit

• reset

• button

• password

• image

• file

• hidden

Description of all types:

(1) input type text

Input type “text “ specify one-line input from user. There is no limits for input character.

(2) input type checkbox

Display multiple checkboxes for user to select multiple-choices.

(3) input type radio

Provides multiple choices of radio buttons for user, where user can select only one out of available choices.

(4) input type submit

Type submit display submit button. When user click on submit button the form data will submitted to the server.

(5) input type reset

Type reset display reset button. After clicking on reset button inputted data in form will be reset.

(6) input type button

Input type “button “ is the simple button which perform action with java script events such as “onclick”.

(7) input type password

Input type “password” display user inputted text in dotted (… ) or astrick (***) form on browser window. With password type data is secure from others.

(8) input type image

Input type “image” display image on browser window.

(9) input type file

Input type “file” specify button for choose file from internal storage to upload on web. Some website also specify the size of file for upload.

(10) input type hidden

hidden type of input element define hidden textbox which user can’t see and modify, but hidden textbox's data is submitted to the server.

HTML 4 input element's attributes

• type
• name
• value
• disabled
• size
• src
• alt
• maxlength
• checked
• readonly

(1) type attribute

type attribute specify the various types of <input> element. We have seen earlier these all the types.

(2) name attribute

The name attribute specify the name of an <input> element.

(3) value attribute

Define value for input element. Value attribute can be specify in checkboxes, radio buttons, buttons, etc..

(4) disabled attribute

disabled attribute specify the inactive textbox. User can not click on disable textbox. Input element with disabled attribute can’t submitted.

(5) size attribute

With size attribute you can specify the size of input element.

(6) src attribute

The src attribute specify the path of an image file. This attribute only used for image file can’t used in other file path.

(7) alt attribute

alt attribute specify the alternate text for image. This attribute is useful when image is not display on web page and display the description about the image. So user can understand what the image is about.

(8) maxlength attribute

Using maxlength attribute you can restrict the textbox field with maximum character.

(9) checked attribute

The checked attribute is used for checkboxes and radio buttons. If value is specify then one of the checkbox and one of radio button is already selected when page loads.

(10) readonly attribute

Input element having readonly attribute set, the textbox field can not be editable by user.

Following example show the html 4 <input type="">

<html>
<head>
<title>html4 input elements</title>
<style>
form{margin:20px;
background-color:#33eecc;}
input{
padding:5px;
margin:10px;
}
</style>
</head>
<body>
<form>
<h2>HTML4 input elements</h2>
<!--typetext -->
<label for="fname">First name::</label>
<input type="text" name="fname" maxlength="20" size="30" placeholder="Enter your name">
<br>
<!--type chechbox-->
<label for="hobby">Hobby::</label>
<input type="checkbox" name="hobby1" value="reading" checked>Reading.
<input type="checkbox" name="hobby2" value="swimming">Swimming.
<input type="checkbox" name="hobby3" value="dacncing">Dancing.
<input type="checkbox" name="hobby4" value="traveling">Travelling.
<br>
<!--type radio-->
<label for="gender">Gender::</label>
<input type="radio" name="gender" value="male" checked>Male
<input type="radio" name="gender" value="female" >Female
<input type="radio" name="gender" value="other" >Other
<br>
<!--type image-->
<label for="imagefile">Image::</label><br>
<input type="image" name="imgfile" alt="smily emoji" src="/storage/emulated/0/download/images.jpeg">
<br>
<!--type password-->
<label for="pass">Password::</label>
<input type="password" name="pwd" maxlength="10">
<br>
<!--type file-->
<label for file="file">Upload file::</label>
<input type="file">
<br>
<!--type hidden-->
<label for file="hidden">This is hidden textbox::</label>
<input type="hidden" value="13345">
<br>
<!--type submit-->
<input type="submit" name="sub" value="Submit">
<!--type reset-->
<input type="reset" name="reset" value="Reset">
<br>
<!--type button-->
<input type="button" name="btn" value="Click here to see message" onclick="alert('welcome');">
<br>
<!--readonly-->
<input type="text" name="onlyread" value="This is readonly attribite" readonly size="50">
<br>
<!--disable-->
<input type="text" name="disable" value="This is disable attribite" disabled>
</form>
</body>
</html>

Output:-

HTML 4 input elements types and attributes

HTML5 input elements types

HTML 5 introduce some new types of <input> elements.

• color

• number

• range

• date

• time

• datetime-local

• month

• week

• tel

• email

• url

• search

Let’s see about all these types in details.

(1) input type color

The color type specify the color in input field. But when specify color one thing to remember, only use hexadecimal color value. By default color is black.

(2) input type number

The number type input elements accept data only in numeric form. You can not enter text value.

(3) input type range

The range type define a slider, where user can set value. By default range is 0 to 100.You can set restrictions for user to choose number with max, min and step attribute.

(4) input type date

The date input type display date calendar for choosing a specific date.

(5) input type time

The input type time display time selector box, where user can select specific time.

(6) input type datetime-local

The datetime-local type display date and time window, where user can select date and local time in hours and minutes without time zone specifications.

(7) input type month

The month input type display month and year specifier to select month.

(8) input type week

The week type of input element specify the week selector to select specific week.

(9) input type tel

Input type tel allow user to enter telephone number. You can also specify pattern for take input in telephone format.

(10) input type Email

Email type allow user to enter email address in textbox. Pattern of email address is predefined. By adding multiple attribute you can enter multiple email addresses using comma or whitespace.

(11) input type url

Input type url allow user to enter url of website in textbox.

(12) input type search

Input type search create a search box for searching data.

HTML 5 added new attributes too. Here is the list.

Attributes of HTML 5

• min
• max
• step
• required
• placeholder
• pattern
• multiple
• width
• height
• autocomplete
• autofocus
• form
• formtarget
• formmethod
• formnovalidate
• formaction
• formenctype
• list

(1) min attribute

Specify minimum value the user can enter in textbox.

You can specify min attribute in following input type:

number, range, date, datetime-local, datetime, month, time, week.

(2) max attribute

max attribute specify maximum value the user can enter in textbox. max attribute used in same input types use for max attribute.

(3) step attribute

step attribute define interval in numeric value. For example, 1,3,5,7,… here step value is 2. This attribute used in input types which are listed in min.

(4) required attribute

The required attribute specify that the textbox should not be empty. If empty then form’s other data will not submitted too.

It can be used in following input types: checkbox, radio, textbox, file, search, selectors of date, time and month, url, password, tel, email.

(5) placeholder attribute

The placeholder attribute is used guide user that which type of data should be entered in textbox. Value of placeholder display before user enter any data, when user start for input the placeholder text automatically removed.

Where you can use?

Text, search, url, email, tel, password.

(6) pattern attribute

Using pattern attribute you can specify regular expression for tel, url, email, password, text, or sometimes for search input types.

Input field accept those data which follow the pattern specify in input element.

(7) multiple attribute

The multiple attribute allow user to add multiple input in textbox. You can specify this attribute in email and file type.

(8) width attribute

with width attribute you can set the width of image.

(9) height attribute

height attribute specify height for an image.

(10) autocomplete attribute

autocomplete attribute specify the suggestions, when user enter any text in textbox. This attribute have two values , on and off. When value set to on suggestion box display otherwise not. By default it is set to on.

(11) autofocus attribute

The autofocus attribute specify that input element get focus when page loads.

(12) form

The attribute form specify one or more form. You can access form data in input element with form Id attribute of form element.

(13) formtarget attribute

Specify the place where response will be display after submitting the form data. Attribute have 4 values: _blank, _self, _parent, _top. The attribute used with “image” and “submit” type.

(14) formmethod attribute

This attribute specify HTTP methods (get and post) send data time url. This attribute also used with “image” and “submit” type.

(15) formnovalidate attribute

The attribute specify that form data should not be validated when submitted.

Used with “submit” type.

(16) formaction attribute

This attribute specify the url of file, which process input control when form is submitted.

Used with “submit” and “image” types.

(17) formenctype attribute

The attribute specify that how form data is encoded when submit to server.

(18) list attribute

Attribute refer to <datalist> element, which specify predefined list for input element.

Following example show the Html 5 input elements and it's attributes.

<!Doctype html>
<html>
<head>
<title>html5 input types</title>
<style>
p{color:#ff0000;}
form{background-color:#A76AFF;
margin:5px;
padding:15px;}
input{padding:5px;}
</style>
</head>
<body>
<p>This is an example of HTML5 "input type"</p>
<form>
<!--color-->
<h4>Select your color:-</h4>
<input type="color" value="#ff00cc">
<!--number-->
<h4>How are you old:-(between 18 to 60)</h4>
<input type="number" min="18" max="60">
<!--range-->
<h4>This is volume indicator:-</h4>
<input type="range" min="5" max="40">
<!--date-->
<h4> Select Date:-</h4>
<input type="date" autofocus>
<!--time-->
<h4>Select Time:-</h4>
<input type="time">
<!--datetime-local-->
<h4>Select local time:-</h4>
<input type="datetime-local">
<!--month-->
<h4>Select month(inverval of 3):-</h4>
<input type="month" step="3">
<!--week-->
<h4>Select week:-</h4>
<input type="week">
<!--tel-->
<h4>Enter telephone number in pattern(12345-12345):-</h4>
<input type="tel" pattern="[0-9]{5}-[0-9]{5}">
<!--email-->
<h4>Enter your email:-</h4>
<input type="email" placeholder="example:abs_203@gmail.com">
<!--url-->
<h4>Enter website URL:-</h4>
<input type="url">
<!--search-->
<h4>Search your query:-</h4>
<input type="search" autocomplete="on">
<input type="submit" name="sub" value="Submit">
</form>
</html>