Skip to content

Instantly share code, notes, and snippets.

@prof3ssorSt3v3

prof3ssorSt3v3/autocomplete.html

Last active July 6, 2023 01:29
Show Gist options
  • Save prof3ssorSt3v3/86b13f69618309e5dd7acfae8c537004 to your computer and use it in GitHub Desktop.
Save prof3ssorSt3v3/86b13f69618309e5dd7acfae8c537004 to your computer and use it in GitHub Desktop.
Download ZIP
Code from Video about AutoFill with Forms
Raw
autocomplete.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Form Autocomplete</title>
<link rel="stylesheet" href="./main.css" />
</head>
<body>
<header>
<h1>Forms</h1>
<h2>AutoComplete Attributes</h2>
</header>
<main>
<p>
Reference:
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
</p>
<form
name="sampleForm"
action="index.html"
method="GET"
autocomplete="on"
>
<legend>Register</legend>
<p>
<label for="fullname">Full Name</label>
<input
type="text"
id="fullname"
name="fullname"
inputmode="text"
enterkeyhint="next"
autocomplete="name"
required
/>
<span class="instructions"><span class="errMessage"></span></span>
</p>
<p>
<label for="email">Email</label>
<input
type="email"
id="email"
name="email"
inputmode="email"
enterkeyhint="next"
autocomplete="email"
required
/>
<span class="instructions"><span class="errMessage"></span></span>
</p>
<p>
<label for="pass">Password</label>
<input
type="password"
id="pass"
name="pass"
inputmode="text"
enterkeyhint="next"
autocomplete="new-password"
required
/>
<span class="instructions"><span class="errMessage"></span> </span>
</p>
<p>
<label for="lang">Language</label>
<select id="lang" name="lang" autocomplete="off">
<option value="en" lang="en">English</option>
<option value="sv" lang="sv">Svensk</option>
<option value="ru" lang="ru" selected>Русский</option>
<option value="de" lang="de">Deutsch</option>
<option value="es" lang="es">Español</option>
<option value="fr" lang="fr">Français</option>
</select>
<span class="instructions"><span class="errMessage"></span></span>
</p>
<p>
<label for="address">Address</label>
<textarea
id="address"
name="address"
inputmode="text"
autocomplete="street-address"
required
></textarea>
<span class="instructions"><span class="errMessage"></span></span>
</p>
<fieldset>
<p>
<label for="ccname">Name on Card</label>
<input
type="text"
id="ccname"
name="ccname"
inputmode="numeric"
enterkeyhint="next"
autocomplete="cc-name"
required
/>
<span class="instructions"><span class="errMessage"></span></span>
</p>
<p>
<label for="cctype">Card Type</label>
<select id="cctype" name="cctype" autocomplete="cc-type" required>
<option value="visa">Visa</option>
<option value="mc">Mastercard</option>
<option value="amex">American Express</option>
</select>
<span class="instructions"><span class="errMessage"></span></span>
</p>
<p>
<label for="ccnumber">Card Number</label>
<input
type="text"
inputmode="text"
id="ccnumber"
name="ccnumber"
enterkeyhint="next"
autocomplete="cc-number"
required
/>
<span class="instructions"><span class="errMessage"></span></span>
</p>
<p>
<label for="ccexp">Card Expiry</label>
<input
type="text"
inputmode="text"
id="ccexp"
name="ccexp"
enterkeyhint="next"
autocomplete="cc-exp"
required
/>
<span class="instructions"><span class="errMessage"></span></span>
</p>
<p>
<label for="cccsc">CCV Security Code</label>
<input
type="text"
inputmode="text"
id="cccsc"
name="cccsc"
enterkeyhint="next"
autocomplete="cc-csc"
required
/>
<span class="instructions"><span class="errMessage"></span></span>
</p>
</fieldset>
<p>
<button id="btnSend">Send</button>
</p>
</form>
</main>
</body>
</html>
Raw
main.css
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
font-weight: 300;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #eee;
background-color: #333;
}
body {
background-color: #333;
min-height: 100vh;
}
header {
padding: 1rem 2rem;
}
h1 {
color: orange;
}
h2 {
color: orangered;
}
main p,
form p {
padding: 1rem 2rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
box-sizing: border-box;
}
legend {
padding: 1rem 2rem;
}
label {
font-size: 1rem;
flex-basis: 30%;
padding: 0.25rem 1px;
text-align: start;
}
input {
font-size: 1rem;
flex-basis: 100%;
width: calc(100% - 2px);
padding: 0.25rem 1rem;
font-family: inherit;
}
select,
option {
font-size: 1rem;
flex-basis: 100%;
width: calc(100% - 2px);
padding: 0.25rem 1rem;
font-family: inherit;
}
textarea {
font-size: 1rem;
flex-basis: 100%;
width: calc(100% - 2px);
padding: 0.25rem 1rem;
min-height: calc(1.5rem * 4 + 1rem);
font-family: inherit;
line-height: 1.5;
}
button {
border: none;
background-color: cornflowerblue;
color: #fff;
flex-basis: 100%;
width: calc(100% - 2px);
padding: 0.5rem 1rem;
font-size: 1.5rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment