Skip to content

Instantly share code, notes, and snippets.

@bklik
Last active Apr 9, 2022
Embed
What would you like to do?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Material Form HTML/CSS Only</title>
<link rel="stylesheet" href="material.css" />
</head>
<body>
<section class="card">
<form class="material">
<header>
<h1>Create New Accout</h1>
<h2>Fill out the following form to create your new accout.</h2>
</header>
<div class="card-content form-content">
<div class="field">
<input type="name" name="name" id="name" />
<label for="name">Name</label>
</div>
<div class="field">
<input type="email" name="email" id="email" />
<label for="email">Email</label>
</div>
<div class="field">
<input type="tel" name="phone" id="phone" />
<label for="phone">Phone</label>
<div class="hint">Example: (555) 321-4321</div>
</div>
<div class="field">
<input type="password" name="password" id="password" />
<label for="password">Password</label>
</div>
<div class="password-criteria">
<p><strong>Password Criteria</strong></p>
<ul>
<li>Must be at least 12 characters long.</li>
<li>Must contain at least one capital letter.</li>
<li>Must contain at least one number.</li>
<li>Must contain at least one symbol.</li>
</ul>
</div>
<div class="field">
<input type="password" name="confirm" id="confirm" />
<label for="confirm">Confirm Password</label>
</div>
</div>
<footer>
<button class="material flat">Cancel</button>
<button class="material primary" type="submit">Create Account</button>
</footer>
</form>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment