 |
| USE OF HTML5 INPUT TYPE |
HTML5 Input Types
Input types are used to obtain input data from the user. It is defined within the <form> element. So far, you have used many types of input type such as text, radio, button, checkbox, etc. which is used to create text boxes, radio buttons, buttons, and checkboxes, respectively.
Apart from the new tags, some new input types have also been introduced in HTML5. By using these input types you can get different types of inputs from the user.
The list of new input type is given below.
1. color
2. date
3. datetime-local
4. email
5. month
6. number
7. range
8. search
9. tel
10. time
11. url
12. week
Syntax of Input Types
In HTML5, input types are also defined in the same way that you do in the old version of HTML. Its common syntax is given below.
<form>
<input type = "input-type-name" name = "">
</ form>
Many times you also define the value attribute in the input type elements which is used to define the value of the input type.
Various HTML5 New Input Types
All new input types in the HTML5 are explained by the example below.
color
You can use the color input type to get color input from the user. If the browser supports new input types, then the color picker will be displayed otherwise, the simple text box will display where you can get hex value of the color.
The use of Color input type is explained by the example below.
<!DOCTYPE html>
<html>
<head>
<title> Example of Color Input Type in HTML5 </title>
</head>
<body>
<h1> HTML5 Color Input Type Example </h1>
<h2> What is your favorite color? </h2>
<form>
<input type = "color" name = "mbhColor"> <br/> <br/>
<input type = "submit">
</form>
</body>
</html>
The above example produces the below output.
 |
| INPUT TYPE COLOR EXAMPLE |
date
New date input type is used to get the date in the form of input. If the browser supports this input type then the user gets the date picker on the webpage.
You can also add restrictions on the date to enter by using max and min attributes. For example, if you want to register 18 years age of a person, then you can define the maximum attribute by 2000. On doing so, nobody will be able to enter the date of more than 2000.
Example of date input is given below.
<!DOCTYPE html>
<html>
<html>
<head>
<title> HTML Date Input Type Example</ title>
</ head>
<body>
<h1> HTML5 Date Input Type Example</ h1>
<h2> What is your birthdate? </ h2>
<form>
<input type = "date" name = "mbhDate" max = "2000-1-1"> <br /> <br />
<input type = "submit">
</ form>
</ body>
</ html>
The above example produces the below output.
 |
| INPUT TYPE DATE EXAMPLE |
datetime-local
The datetime-local input type is used to input the date without time zone. Browsers that support this input type show the date picker.
The example of datetime-local input type is given below.
<!DOCTYPE html>
<html>
<head>
<title> HTML5 datetime-Local Input Type Example </ title>
</ head>
<body>
<h2> What is your birthdate? </ h2>
<form>
<input type = "datetime-local" name = "mbhDate"> <br /> <br />
<input type = "submit">
</ form>
</ body>
</ html>
The above example produces the below output.
 |
| INPUT TYPE DATE EXAMPLE |
If you are getting email input from the user then you should use email input type. If your browser supports this input type, then the email automatically validate valid the form which is submitted.
The example of an HTML5 email input type is below.
<!DOCTYPE html>
<html>
<head>
<title> HTML5 email Input Type Example </ title>
</ head>
<body>
<h1> HTML5 Email Input Type Example </ h1>
<h2> Enter Your Email Address: </ h2>
<form>
<input type = "email" name = "mbhEmail"> <br /> <br />
<input type = "submit">
</ form>
</ body>
</ html>
The above example produces the below output.
 |
| INPUT TYPE EMAIL EXAMPLE |
month
If you want to get month and year from the user in the form of input then you can use the month input type for this. Browsers that support this input type show the date picker.
Example of Input type month is given below.
<!DOCTYPE html>
<html>
<head>
<title> HTML5 month Input Type Example </ title>
</ head>
<body>
<h1> HTML5 month Input Type Example </ h1>
<h2> When were you born </ h2>
<form>
<input type = "month" name = "mbhMonth">
<input type = "submit">
</ form>
</ body>
</ html>
The above example produces the below output.
 |
| INPUT TYPE MONTH EXAMPLE |
number
If you want to get numeric input values from the user, you can use input type number for it. You can also use the min and max attributes to bind the values being input by the user in a certain range.
The example of the HTML5 number input type is given below.
<!DOCTYPE html>
<html>
<head>
<title> HTML5 number Input Type Example </ title>
</ head>
<body>
<h1> number Input Type Example </ h1>
<h2> Enter a Number </ h2>
<form>
<input type = "number" name = "mbhNumber"> <br /> <br />
<input type = "submit">
</ form>
</ body>
</ html>
The above example produces the output below.
 |
| INPUT TYPE NUMBER EXAMPLE |
range
Input type range is used in the context when the user has to enter any value of the given range instead of the exact value. In this input type, the default range is between 0 and 100, but you can define a range even by min and max attributes.
An example of the HTML5 range input type is being below.
<!DOCTYPE html>
<html>
<head>
<title> Range Input Type Example </ title>
</ head>
<body>
<h1> Range Input Type Example </ h1>
<h2> How do you rate MyBlogHelp between 1 to 60 </ h2>
<form>
<input type = "range" name = "mbhRange" min = "1" max = "60"> <br /> <br />
<input type = "submit">
</ form>
</ body>
</ html>
The above example produces the below output.
 |
| INPUT TYPE RANGE EXAMPLE |
search
If you want to create a search box in the web page, you can use input type search. This works like the input type text.
The example of input type search is given below.
<!DOCTYPE html>
<html>
<head>
<title> Search Input Type Example </ title>
</ head>
<body>
<h2> Search My Blog HelpTutorials </ h2> <br />
<form>
<input type = "search" name = "mbhSearch"> <br /> <br />
<input type = "submit" value = "search">
</ form>
</ body>
</ html>
The above example produces the below output.
 |
| INPUT TYPE SEARCH EXAMPLE |
tel
When you want to get telephone number from the user, you can use the tel input type. This input type only works in Safari web browser only.
An example of HTML5 tel input type is being given below.
<!DOCTYPE html>
<html>
<head>
<title> tel Input Type Example </ title>
</ head>
<body>
<h2> Enter Telephone Number </ h2>
<form>
<input type = "tel" name = "mbhTelephone"> <br />
<input type = "submit" value = "submit">
</ form>
</ body>
</ html>
The above example produces the below output.
 |
| INPUT TYPE TEL EXAMPLE |
time
Time input type can be used to get time from the user. There is no time zone in input time. If the browser supports this input type then the time picker will display.
The example of an HTML5 time input type is given below.
<!DOCTYPE html>
<html>
<head>
<title> time Input Type Example </ title>
</ head>
<body>
<h2> What time did you woke up today? <h2>
<form>
<input type = "time" name = "mbhTime"> <br />
<input type = "submit">
</ form>
</ body>
</ html>
The above example produces the below output.
 |
| INPUT TYPE TIME EXAMPLE |
url
You can use the url input type to get the URL as input data from the user. The browser which supports this input type automatically validates the URL.
An example of an input type URL is given below.
<!DOCTYPE html>
<html>
<head>
<title> url Input Type Example </ title>
</ head>
<body>
<h2> Enter a URL </ h2>
<form>
<input type = "url" name = "mbhUrl"> <br /> <br />
<input type = "submit">
</ form>
</ body>
</ form>
 |
| INPUT TYPE URL EXAMPLE |
week
If you want to get a week and year from the user as an input data, you can use the week input type for it. The browsers that support this input type show the date picker.
An instance of the HTML5 week input type is given below.
<!DOCTYPE html>
<html>
<head>
<title> Example week Input Type </ title>
</ head>
<body>
<h2> Enter a week and year </ h2>
<form>
<input type = "week" name = "weekYear"> <br /> <br />
<input type = "submit">
</ form>
</ body>
</ html>
The above example produces the below output.
 |
| INPUT TYPE WEEK EXAMPLE |
This is an interesting blog that you have posted,Good job.
ReplyDeleteHtml5 Training in Chennai
Html5 Training Institutes in Chennai
Html5 Training in Porur
DOT NET Training in Chennai
.Net training in chennai
QTP Training in Chennai
LoadRunner Training in Chennai
Html5 Training in Chennai
Get a good website building guide. That's the most easy way to build your first website, plus it saves you a lot of time since you will get specific directions on what to do and in which order you should do it. Now since you're building a small business website the website building guide should obviously also show you how to do a small business website. Another thing that's good to keep in mind when using a website building guide is to get a free one. They are the most informative and are also often made by people who really want to help you and not just take money from you and then not give you any real value in exchange.... Read more
ReplyDeleteContact with us for build up a professional website. Build up a site from here
Visit for read all of song lyrics
Visit for read all of exciting articles
Check amazon best product now