Material Form

Developer
Josh Bivens
Size
4,012 Kb
Views
36,432
  1. Material Form Previews
  2. Material Form HTML Codes
  3. Material Form CSS Codes
  4. Material Form JS Codes

How do I make an material form?

What is a material form? How do you make a material form? This script and codes were developed by Josh Bivens on 01 October 2022, Saturday.

Material Form Previews
IQ Test

Material Form - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Material Form</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <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> <body> <div class="fill"> <button onclick="fillFields()">Fill the fields</button> </div> <div class="form"> <div class="field"> <input type="text" id="name" autocomplete="off" required="required"/> <div class="bar"></div> <label class="label" for="name">Name</label> </div> <div class="field"> <input type="text" id="email" autocomplete="off" required="required"/> <div class="bar"></div> <label class="label" for="email">Email</label> </div> <div class="btn"> <input type="submit" id="submit" value="Let's Go!" onclick="confirmInfo()"/> </div> </div>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Material Form - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto:500,400,300);
body { height: 100vh; display: flex; align-items: center; flex-direction: column; font-family: "Roboto", sans-serif; font-weight: 300; background: #394359;
}
.form { display: flex; flex-direction: column; align-items: center; margin-top: 180px; background: #fff; padding: 40px; border-radius: 3px; box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.75);
}
.form div { position: relative; margin-top: 22px;
}
label { width: 100%; position: absolute; top: 15px; left: 5px; pointer-events: none; color: #999; font-size: 22px; font-weight: 400; transition: all 0.15s ease-out;
}
input:focus ~ label, input:valid ~ label { top: -15px; left: -55px; transform: scale(0.6);
}
input[type="text"] { padding: 10px; width: 260px; border: 0; border-bottom: 1px solid #666; font-size: 25px; font-weight: 400; color: #555; outline: none;
}
.btn input { width: 120px; padding: 15px; margin-top: 15px; border: none; font-size: 18px; color: #FFF; background: #0080FF; border-radius: 2px; transition: all 0.1s ease-in-out;
}
.btn input:focus { outline: none;
}
.btn input:hover { transform: scale(1.03); box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.6);
}
.btn input:active { transform: scale(1);
}
.response { color: #FFF; font-size: 28px; width: 450px; text-align: center; margin-top: 40px; transition: opacity 1s;
}
.fill { position: fixed; top: 20px; right: 20px;
}
.fill button { color: #FFF; font-weight: 400; background: tomato; border: none; border-radius: 5px; padding: 10px; outline: none;
}

Material Form - Script Codes JS Codes

'use strict';
function confirmInfo() { var name = document.getElementById('name').value, email = document.getElementById('email').value, submit = document.getElementById('submit'), res = document.createElement('div'); if (name && email) { res.setAttribute('class', 'response'); res.innerHTML = 'Thanks ' + name + '! We\'ve sent an email to ' + email; document.body.appendChild(res); res.style.opacity = 0; window.getComputedStyle(res).opacity; res.style.opacity = 1; submit.disabled = true; }
};
function fillFields() { var name = document.getElementById('name'), email = document.getElementById('email'); name.value = "Johnny"; setTimeout(function () { email.value = "[email protected]"; }, 400);
};
Material Form - Script Codes
Material Form - Script Codes
Home Page Home
Developer Josh Bivens
Username joshbivens
Uploaded October 01, 2022
Rating 3
Size 4,012 Kb
Views 36,432
Do you need developer help for Material Form?

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!

Josh Bivens (joshbivens) Script Codes
Name
Settings Card
Vue Habit Tracker
Name Tag Signup
Typewriter Keys Navigation
Fun Facts
Android Logo
Vue Shopping Cart
Currency Conversion Cards
Vue Progress Bar
Alarm Clock UI
Create amazing art & images 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!