https://codetones.com
  • Top 10 Code Editors For Programmers | Best Code Editor For Web Developer 2017 >> Now-a-day it is quite familiar to use of code editor... << Read More >>
  • The Collection Of Various Type Of Shape In CSS >> Today I'm gonna show you various Shape Collection of CSS.... << Read More >>
  • The Importance Tips To Start a Professional Web Pages Designing >> To be a good web designer you must take a... << Read More >>
  • How To Create A Website? Its Detailed Guideline >> Websites can be made in two ways. For free and... << Read More >>
  • How To Convert MS Word file to PDF file? >> MS Word is one of the most commonly used text... << Read More >>
  • How To Become a Professional Computer Programmer >> Computer programmer is used for a person who works in... << Read More >>
  • How Did A Good Programmer Become? >> Let's face it, it's not easy to become a programmer.... << Read More >>
Facebook Twitter Google Plus Linkedin RSS Youtube

Codetones

Only for Creative mind

  • Home
     
  • PC Helpers
     
  • Technews
     
  • Tutorials
     
    • HTML
    • CSS
    • PHP
    • WordPress
  • Code FAQ
     
  • Users
     
    • Login
    • Create An Account
  • About Us
     
  • Contact Us
     
Home Page > Tutorials > HTML > New Input Types In HTML5 (Preview)

New Input Types In HTML5 (Preview)

author Author: Calixto

icon-calendar Date: 3 years ago

view Views: 1453

icon-comment Comments: 4

Share on

Facebook Twitter Google Plus Linkedin

HTML5 come with some new advance input types that make easier to web development. Html5 implement new security level for Web Browser. Today's Industry moves fast—really fast. To keep safe, we need to learn advanced Html as well as better performance.
Some of input types are directly connected to be displayed in a certain way in the web browser, whereas others are more there for semantic value or connected to validation of them. 

The preview of New Input types are as follows:
 

<form action="" method="post">
    <div style="margin-bottom: 20px;">
        <label> Input Type: Email</label>
        <input name="email" type="email" />
	// value="example@mail.com"
    </div>

    <div style="margin-bottom: 20px;">
        <label> Input Type: Search</label>
        <input name="search" type="search" />
	// value="search text"
    </div>
	
    <div style="margin-bottom: 20px;">
        <label> Input Type: Color</label>
        <input type="color" name="color">
	// value="#e98a87"
    </div>

	<div style="margin-bottom: 20px;">
        <label> Input Type: Date</label>
	   <input type="date" name="date">
	// value="2017-05-08"
    </div>
	
	<div style="margin-bottom: 20px;">
        <label> Input Type: Datetime</label>
        <input type="datetime" name="datetime">
	// value="2017-06-28T10:25:44.22"
    </div>

	<div style="margin-bottom: 20px;">
        <label> Input Type: Datetime-local</label>
        <input type="datetime-local"
	// value="2017-06-28T25:41"
    </div>

	
    <div style="margin-bottom: 20px;">
        <label> Input Type: Week</label>
        <input type="week" name="week">
	// value="2017-W15"
    </div>


	<div style="margin-bottom: 20px;">
        <label> Input Type: Month</label>
        <input type="month" name="month">
	// value="2017-05"
    </div>

	<div style="margin-bottom: 20px;">
        <label> Input Type: Number</label>
        <input type="number" name="number">
	// value="8"
    </div>
	
	<div style="margin-bottom: 20px;">
        <label> Input Type: Range</label>
        <input type="range" name="range" value="50">
	// Default attribute values are min="0", max="100"
    </div>

	<div style="margin-bottom: 20px;">
        <label> Input Type: Output</label>
        <output for="range" id="output"></output>
	// output result of range value    
     </div>

	
    <div style="margin-bottom: 20px;">
        <label> Input Type: Telephone Number</label>
        <input type="tel" name="tel">
	// value="[Any numeric value]"
    </div>

    <div style="margin-bottom: 20px;">
        <label> Input Type: Time</label>
        <input type="time" name="time">
	// value="18:58"
    </div>

    <div style="margin-bottom: 20px;">
        <label> Input Type: Url</label>
        <input type="url" name="url">
	// value="http://codetones.com"
    </div>

 
    <div style="margin:20px 0 20px 290px;"><button type="submit"> Submit</button></div>

</form>

 

Related Posts

New Feature in HTML5

New Feature in HTML5

Top 10 HTML5 Interview Question

Top 10 HTML5 Interview Question

New Form Attributes Of HTML5

New Form Attributes Of HTML5

Top 8 HTML5 Learning Books

Top 8 HTML5 Learning Books

Leave a Reply

Jun 15

Hi there! I simply wish to give you a big thumbs up for the excellent info you have right here on this post.
I am returning to your website for more soon.
                                 

by Arthur

Reply

Jun 21

Thanks Arthur. Stay connected for more.                                    
                                

by Calixto

Jun 15

What's up, its pleasant paragraph on the topic of 
media print, we all understand media is a great source of facts.
                                 

by Dann

Reply

Jun 21

Yes Dann fine. Stay connected for more.                                    
                                

by Calixto

Codetones Adblocker Notice

AdBlocker Detected

Please disable your adblocker
This site is supported by the advertisement
Please disable your adblocker to support us !

Online Tools

  • Image Convertor
  • File Convertor
  • Watermark On Image
  • Hash Password
  • Secure Password Generator
  • Color to Black & White Image
  • Black & White to Color Image

Popular Posts

How to Speed Up Your WordPress | Top Tips to Optimize Your WordPress Website
How to Speed Up Your WordPress | Top Tips to Optimize Your WordPres...
The Importance Tips To Start a Professional Web Pages Designing
The Importance Tips To Start a Professional Web Pages Designing
How to Make Computer Faster in Easy Ways..
How to Make Computer Faster in Easy Ways..
Career Opportunity After Completing Computer Science And Engineering
Career Opportunity After Completing Computer Science And Engineering
How To Face A Technical Job Interview?
How To Face A Technical Job Interview?
Large-Skycraper

Categories

  • HTML
  • CSS
  • PHP
  • WordPress

Join Codetones

Facebook Twitter Google Plus Linkedin RSS Youtube

Codetones

Codetones is the Web Solution Base Website. Here You Can Find Beginner to Advanced Level Tutorials.

Support

  • About Us
  • Contact Us
  • Codetones Mobile Apps

Accessibility

  • Terms of Use
  • Privacy Policy
  • Site Map
© Copyright 2019 Codetones. All Right Reserved

Powered by Codetones