Form Inputs
How do I make an form inputs?
Form design test. What is a form inputs? How do you make a form inputs? This script and codes were developed by Luke Watts on 14 August 2022, Sunday.
Form Inputs - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Form Inputs</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container"> <section class="content"> <h2>Form Inputs</h2><span class="input"> <input class="input-field" name="name"/> <label class="input-label" for="name"><span class="input-label-content">Name</span></label></span><span class="input"> <input class="input-field" type="email" name="email"/> <label class="input-label" for="email"><span class="input-label-content">Email</span></label></span><span class="input"> <input class="input-field" type="password" name="password"/> <label class="input-label" for="password"><span class="input-label-content">Password</span></label></span> </section>
</div>
</body>
</html>
Form Inputs - Script Codes CSS Codes
body, .input-label { color: #6a7989;
}
*, *::before, *::after { box-sizing: border-box;
}
body { background-color: #3e4853;
}
.container { margin: 0 auto; text-align: center;
}
.content { padding: 2em; font-size: 1.5em;
}
.input { width: calc(33.3333% - 1em); display: inline-block; position: relative; z-index: 1; vertical-align: top; margin-right: 1em; margin-top: 1em;
}
.input:last-child { margin-right: 0;
}
.input-field { width: 100%; padding: 0.85em 0.5em; position: relative; float: right; border: none; background: transparent; color: #DDE2E2; opacity: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s;
}
.input-field:focus { outline: none;
}
.input-label { width: 100%; height: 100%; padding: 0 0.85em; display: inline-block; float: right; position: absolute; left: 0; font-weight: bold; font-size: 70.25%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-align: left; pointer-events: none;
}
.input-label::before, .input-label::after { width: 100%; height: 100%; content: ""; position: absolute; top: 0; left: 0; -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s;
}
.input-label::before { border-top: 2px solid #6a7989; -webkit-transform: translate3d(0, 100%, 0) translate3d(0, -2px, 0); transform: translate3d(0, 100%, 0) translate3d(0, -2px, 0); -webkit-transition-delay: 0.3s; transition-delay: 0.3s;
}
.input-label::after { z-index: -1; -webkit-transform: scale3d(1, 0, 1); transform: scale3d(1, 0, 1); -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; background: #6a7989;
}
.input-label-content { width: 100%; padding: 1.6em 0; position: relative; display: block; -webkit-transition: -webkit-transform 0.3s 0.3s; transition: -webkit-transform 0.3s 0.3s; transition: transform 0.3s 0.3s; transition: transform 0.3s 0.3s, -webkit-transform 0.3s 0.3s;
}
.input-field:focus { opacity: 1; -webkit-transition-delay: 0.3s; transition-delay: 0.3s;
}
.input-field:focus + .input-label::before { -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
}
.input-field:focus + .input-label::after { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); -webkit-transition-delay: 0.3s; transition-delay: 0.3s; -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.input-field:focus + .input-label .input-label-content { -webkit-transform: translate3d(0, -80%, 0); transform: translate3d(0, -80%, 0); -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
Developer | Luke Watts |
Username | lukewatts |
Uploaded | August 14, 2022 |
Rating | 3 |
Size | 3,504 Kb |
Views | 32,384 |
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!
Name | Size |
Footer Concept 01 | 3,517 Kb |
Turnable LED Dial | 5,472 Kb |
Footer Concept 02 | 10,469 Kb |
A Pen by Luke Watts | 1,723 Kb |
Pure CSS Dial 01 | 3,925 Kb |
CSS Drop Shadows with Global Illumination | 2,559 Kb |
SmartQRTravel Login Form | 4,102 Kb |
Media Card | 3,495 Kb |
OFF CANVAS MENU | 3,206 Kb |
Before and After Image Slider | 2,747 Kb |
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!
Name | Username | Size |
To Do List with Delete | Mattlbrody | 2,068 Kb |
Improve | Gavra | 1,652 Kb |
Donut Chart example - MorrisJS | Capelo | 2,385 Kb |
Fullscreen Parallax | Bassta | 3,313 Kb |
Parallax-ish Sliding Content | Jdsteinbach | 2,748 Kb |
Navcube | Wbarlow | 4,775 Kb |
LAMP PURE CSS with Animation | Dam62500 | 2,911 Kb |
NT Tribute | Skybutterfly | 2,850 Kb |
RequestAnimationFrame | Martin-banks | 2,541 Kb |
Simple Login Form | JoshBlackwood | 4,418 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!