HTML5 Input Types

Developer
Renato Ribeiro
Size
5,718 Kb
Views
16,192
  1. HTML5 Input Types Previews
  2. HTML5 Input Types HTML Codes
  3. HTML5 Input Types CSS Codes

How do I make an html5 input types?

Input types demos. Text from w3schools.com. What is a html5 input types? How do you make a html5 input types? This script and codes were developed by Renato Ribeiro on 17 November 2022, Thursday.

HTML5 Input Types Previews
IQ Test

HTML5 Input Types - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>HTML5 Input Types</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Gloria+Hallelujah);
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body { background: #ecf0f1; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1 { animation: scaleBig .7s ease; animation-fill-mode: forwards; text-align: center; color: rgba(0, 0, 0, 0.1); font-size: 80px; margin: 40px;
}
h1 b { display: block; font-family: "Gloria Hallelujah"; font-size: .5em; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); margin-top: -55px; animation: scaleBig 1s ease; animation-fill-mode: forwards; animation-delay: .3s; opacity: 0;
}
*[class^="b-"] { width: 20px; height: 20px; margin: 5px 1px; display: inline-block;
}
.b-op { background: url("https://i.imgur.com/OKss156.gif");
}
.b-sf { background: url("https://i.imgur.com/PlmEVav.gif");
}
.b-ch { background: url("https://i.imgur.com/CRnuRVE.gif");
}
.b-ff { background: url("https://i.imgur.com/Vi6ep5B.gif");
}
.b-ie { background: url("https://i.imgur.com/qtvb3iJ.gif");
}
.off { opacity: .2; -webkit-filter: grayscale(100%);
}
.examples > article { animation: slideIn 1s ease; animation-fill-mode: forwards; padding-top: 10px; position: relative; margin: 20px; border-top: 40px solid #34495e; background: #fff; border-top-left-radius: 30px; border-bottom-right-radius: 40px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); font-family: "Georgia"; opacity: 0;
}
.examples > article:nth-child(1) { animation-delay: 0.25s;
}
.examples > article:nth-child(2) { animation-delay: 0.5s;
}
.examples > article:nth-child(3) { animation-delay: 0.75s;
}
.examples > article:nth-child(4) { animation-delay: 1s;
}
.examples > article:nth-child(5) { animation-delay: 1.25s;
}
.examples > article:nth-child(6) { animation-delay: 1.5s;
}
.examples > article:nth-child(7) { animation-delay: 1.75s;
}
.examples > article:nth-child(8) { animation-delay: 2s;
}
.examples > article:nth-child(9) { animation-delay: 2.25s;
}
.examples > article:nth-child(10) { animation-delay: 2.5s;
}
.examples > article:nth-child(11) { animation-delay: 2.75s;
}
.examples > article:nth-child(12) { animation-delay: 3s;
}
.examples > article:nth-child(13) { animation-delay: 3.25s;
}
.examples > article:nth-child(14) { animation-delay: 3.5s;
}
.examples > article p { font-size: 18px; line-height: 24px; color: #555; letter-spacing: 0.4px; padding: 0 10px; border-left: 3px solid #e74c3c; margin: 0; margin-bottom: 5px;
}
.examples > article p:first-of-type { margin-top: 10px;
}
.examples > article p:last-of-type { margin-bottom: 10px;
}
.examples > article header { padding: 15px; margin: 0 10px; background: #ecf0f1; text-align: center; border-radius: 2px; box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.2);
}
.examples > article footer { background: #eee; text-align: right; padding-right: 40px; border-bottom-right-radius: 50px;
}
.examples > article:before { content: attr(rel); position: absolute; top: -34px; left: 50%; transform: translatex(-50%); text-transform: uppercase; color: white; font-size: 16px; font-weight: bold; padding: 3px 5px; border-radius: 2px; font-family: "Open Sans";
}
@keyframes slideIn { from { opacity: 0; transform: translatex(120%); } to { opacity: 1; transform: translatex(0); }
}
@keyframes scaleBig { from { transform: scale(2); opacity: 0; } to { transform: scale(1); opacity: 1; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>HTML5 <b>Input Types</b></h1>
<section class="examples"> <article rel="text"> <header> <input type="text" /> </header> <p> Whenever your browser does not support a html5 input type, it will be turned into a text field like this. </p> <footer> <span class="b-ch"></span> <span class="b-ff"></span> <span class="b-sf"></span> <span class="b-op"></span> <span class="b-ie"></span> </footer> </article> <article rel="email"> <header> <input type="email" /> </header> <p> The email type is used for input fields that should contain an e-mail address. </p> <p> Depending on browser support, the e-mail address can be automatically validated when submitted. </p> <p> Some smartphones recognize the email type, and adds ".com" to the keyboard to match email input. </p> <footer> <span class="b-ch"></span> <span class="b-ff"></span> <span class="b-sf off"></span> <span class="b-op"></span> <span class="b-ie"></span> </footer> </article> <article rel="tel"> <header> <input type="tel" /> </header> <p>The tel type is used for input fields that should contain a telephone number.</p> <p>The tel type is currently supported only in Safari 8.</p> <footer> <span class="b-ch off"></span> <span class="b-ff off"></span> <span class="b-sf"></span> <span class="b-op off"></span> <span class="b-ie off"></span> </footer> </article> <article rel="url"> <header> <input type="url" /> </header> <p>The url type is used for input fields that should contain a URL address.</p> <p>Depending on browser support, the url field can be automatically validated when submitted</p> <p>Some smartphones recognize the url type, and adds ".com" to the keyboard to match url input.</p> <footer> <span class="b-ch"></span> <span class="b-ff"></span> <span class="b-sf off"></span> <span class="b-op"></span> <span class="b-ie"></span> </footer> </article> <article rel="search"> <header> <input type="search" /> </header> <p>The search type is used for search fields (a search field behaves like a regular text field).</p> <footer> <span class="b-ch"></span> <span class="b-ff off"></span> <span class="b-sf"></span> <span class="b-op off"></span> <span class="b-ie off"></span> </footer> </article> <article rel="date"> <header> <input type="date" /> </header> <p>The date type is used for input fields that should contain a date.</p> <p>Depending on browser support, a date picker can show up in the input field.</p> <footer> <span class="b-ch"></span> <span class="b-ff off"></span> <span class="b-sf"></span> <span class="b-op"></span> <span class="b-ie off"></span> </footer> </article> <article rel="month"> <header> <input type="month" /> </header> <p>The month type allows the user to select a month and year.</p> <p>Depending on browser support, a date picker can show up in the input field.</p> <footer> <span class="b-ch"></span> <span class="b-ff off"></span> <span class="b-sf"></span> <span class="b-op"></span> <span class="b-ie off"></span> </footer> </article> <article rel="week"> <header> <input type="week" /> </header> <p>The week type allows the user to select a week and year.</p> <p>Depending on browser support, a date picker can show up in the input field.</p> <footer> <span class="b-ch"></span> <span class="b-ff off"></span> <span class="b-sf"></span> <span class="b-op"></span> <span class="b-ie off"></span> </footer> </article> <article rel="time"> <header> <input type="time" /> </header> <p>The time type allows the user to select a time (no time zone).</p> <p>Depending on browser support, a time picker can show up in the input field.</p> <footer> <span class="b-ch"></span> <span class="b-ff off"></span> <span class="b-sf"></span> <span class="b-op"></span> <span class="b-ie off"></span> </footer> </article> <article rel="datetime"> <header> <input type="datetime" /> </header> <p>The datetime type allows the user to select a date and time (with time zone).</p> <p>Depending on browser support, a date picker can show up in the input field.</p> <footer> <span class="b-ch off"></span> <span class="b-ff off"></span> <span class="b-sf"></span> <span class="b-op"></span> <span class="b-ie off"></span> </footer> </article> <article rel="datetime-local"> <header> <input type="datetime-local" /> </header> <p>The datetime-local type allows the user to select a date and time (no time zone).</p> <p>Depending on browser support, a date picker can show up in the input field.</p> <footer> <span class="b-ch"></span> <span class="b-ff off"></span> <span class="b-sf"></span> <span class="b-op"></span> <span class="b-ie off"></span> </footer> </article> <article rel="color"> <header> <input type="color" /> </header> <p>The color type is used for input fields that should contain a color.</p> <p>Depending on browser support, a color picker can show up in the input field.</p> <footer> <span class="b-ch"></span> <span class="b-ff"></span> <span class="b-sf off"></span> <span class="b-op"></span> <span class="b-ie off"></span> </footer> </article> <article rel="number"> <header> <input type="number" /> </header> <p>The number type is used for input fields that should contain a numeric value.</p> <p>You can set restrictions on the numbers.</p> <p>Depending on browser support, the restrictions can apply to the input field.</p> <footer> <span class="b-ch"></span> <span class="b-ff"></span> <span class="b-sf"></span> <span class="b-op"></span> <span class="b-ie"></span> </footer> </article> <article rel="range"> <header> <input type="range" /> <input type="range" min="0" max="5" /> </header> <p>The range type is used for input fields that should contain a value within a range.</p> <p>Depending on browser support, the input field can be displayed as a slider control.</p> <footer> <span class="b-ch"></span> <span class="b-ff"></span> <span class="b-sf"></span> <span class="b-op"></span> <span class="b-ie"></span> </footer> </article>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

HTML5 Input Types - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Gloria+Hallelujah);
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body { background: #ecf0f1; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1 { animation: scaleBig .7s ease; animation-fill-mode: forwards; text-align: center; color: rgba(0, 0, 0, 0.1); font-size: 80px; margin: 40px;
}
h1 b { display: block; font-family: "Gloria Hallelujah"; font-size: .5em; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); margin-top: -55px; animation: scaleBig 1s ease; animation-fill-mode: forwards; animation-delay: .3s; opacity: 0;
}
*[class^="b-"] { width: 20px; height: 20px; margin: 5px 1px; display: inline-block;
}
.b-op { background: url("https://i.imgur.com/OKss156.gif");
}
.b-sf { background: url("https://i.imgur.com/PlmEVav.gif");
}
.b-ch { background: url("https://i.imgur.com/CRnuRVE.gif");
}
.b-ff { background: url("https://i.imgur.com/Vi6ep5B.gif");
}
.b-ie { background: url("https://i.imgur.com/qtvb3iJ.gif");
}
.off { opacity: .2; -webkit-filter: grayscale(100%);
}
.examples > article { animation: slideIn 1s ease; animation-fill-mode: forwards; padding-top: 10px; position: relative; margin: 20px; border-top: 40px solid #34495e; background: #fff; border-top-left-radius: 30px; border-bottom-right-radius: 40px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); font-family: "Georgia"; opacity: 0;
}
.examples > article:nth-child(1) { animation-delay: 0.25s;
}
.examples > article:nth-child(2) { animation-delay: 0.5s;
}
.examples > article:nth-child(3) { animation-delay: 0.75s;
}
.examples > article:nth-child(4) { animation-delay: 1s;
}
.examples > article:nth-child(5) { animation-delay: 1.25s;
}
.examples > article:nth-child(6) { animation-delay: 1.5s;
}
.examples > article:nth-child(7) { animation-delay: 1.75s;
}
.examples > article:nth-child(8) { animation-delay: 2s;
}
.examples > article:nth-child(9) { animation-delay: 2.25s;
}
.examples > article:nth-child(10) { animation-delay: 2.5s;
}
.examples > article:nth-child(11) { animation-delay: 2.75s;
}
.examples > article:nth-child(12) { animation-delay: 3s;
}
.examples > article:nth-child(13) { animation-delay: 3.25s;
}
.examples > article:nth-child(14) { animation-delay: 3.5s;
}
.examples > article p { font-size: 18px; line-height: 24px; color: #555; letter-spacing: 0.4px; padding: 0 10px; border-left: 3px solid #e74c3c; margin: 0; margin-bottom: 5px;
}
.examples > article p:first-of-type { margin-top: 10px;
}
.examples > article p:last-of-type { margin-bottom: 10px;
}
.examples > article header { padding: 15px; margin: 0 10px; background: #ecf0f1; text-align: center; border-radius: 2px; box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.2);
}
.examples > article footer { background: #eee; text-align: right; padding-right: 40px; border-bottom-right-radius: 50px;
}
.examples > article:before { content: attr(rel); position: absolute; top: -34px; left: 50%; transform: translatex(-50%); text-transform: uppercase; color: white; font-size: 16px; font-weight: bold; padding: 3px 5px; border-radius: 2px; font-family: "Open Sans";
}
@keyframes slideIn { from { opacity: 0; transform: translatex(120%); } to { opacity: 1; transform: translatex(0); }
}
@keyframes scaleBig { from { transform: scale(2); opacity: 0; } to { transform: scale(1); opacity: 1; }
}
HTML5 Input Types - Script Codes
HTML5 Input Types - Script Codes
Home Page Home
Developer Renato Ribeiro
Username renatorib
Uploaded November 17, 2022
Rating 3
Size 5,718 Kb
Views 16,192
Do you need developer help for HTML5 Input Types?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Renato Ribeiro (renatorib) Script Codes
Name
Slide Actions List
Flip Cards jAnimate
MacBook Pro
IOS Toggle Checkbox
Responsive Grid Proportion
The most useless balloons game
CSS4 Validity
Vertical Aignment
Mouse balls animation
Orbit
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!