Coding & Styling Web Forms with HTML5 and CSS3
For the forms we will code in the course, it's important to remember to use the correct/semantic input type for the expected user input, and to include a properly associated label for each widget in the form. Make sure that the user understands which inputs are required for submission (and mark them visually and in the HTML).
Web Form HTML
<section id="form">
<h3>Contact Us</h3>
<p>
If you would like more information, please fill out the form below.
Required fields are marked with an asterisk (<span class="required">*</span>).
</p>
<form action="https://wp.zybooks.com/form-viewer.php" method="POST" target="_blank">
<label for="my-name">Name<span class="required">*</span></label>
<input type="text" name="my-name" id="my-name" required>
<label for="my-address">Address</label>
<input type="text" name="my-address" id="my-address">
<label for="my-city">City</label>
<input type="text" name="my-city" id="my-city">
<label for="my-state">State</label>
<select name="my-state" id="my-state">
<option value="">Choose Your State</option>
<option value="al">AL</option>
<option value="ak">AK</option>
<option value="az">AZ</option>
<option value="ar">AR</option>
<option value="ca">CA</option>
<option value="co">CO</option>
<option value="ct">CT</option>
<option value="de">DE</option>
<option value="dc">DC</option>
<option value="fl">FL</option>
<option value="ga">GA</option>
<option value="hi">HI</option>
<option value="id">ID</option>
<option value="il">IL</option>
<option value="in">IN</option>
<option value="ia">IA</option>
<option value="ks">KS</option>
<option value="ky">KY</option>
<option value="la">LA</option>
<option value="me">ME</option>
<option value="md">MD</option>
<option value="ma">MA</option>
<option value="mi">MI</option>
<option value="mn">MN</option>
<option value="ms">MS</option>
<option value="mo">MO</option>
<option value="mt">MT</option>
<option value="ne">NE</option>
<option value="nv">NV</option>
<option value="nh">NH</option>
<option value="nj">NJ</option>
<option value="nm">NM</option>
<option value="ny">NY</option>
<option value="nc">NC</option>
<option value="nd">ND</option>
<option value="oh">OH</option>
<option value="ok">OK</option>
<option value="or">OR</option>
<option value="pa">PA</option>
<option value="ri">RI</option>
<option value="sc">SC</option>
<option value="sd">SD</option>
<option value="tn">TN</option>
<option value="tx">TX</option>
<option value="ut">UT</option>
<option value="vt">VT</option>
<option value="va">VA</option>
<option value="wa">WA</option>
<option value="wv">WV</option>
<option value="wi">WI</option>
<option value="wy">WY</option>
</select>
<label for="my-zip">Zip Code</label>
<input type="number" name="my-zip" id="my-zip">
<label for="my-phone">Phone</label>
<input type="tel" name="my-phone" id="my-phone">
<label for="my-email">Email<span class="required">*</span></label>
<input type="email" name="my-email" id="my-email" required>
<fieldset>
<legend>Preferred Method of Contact</legend>
<input type="radio" name="contact-pref" id="pref-email" checked>
<label for="pref-email">Email</label>
<input type="radio" name="contact-pref" id="pref-phone">
<label for="pref-phone">Phone</label>
</fieldset>
<label for="my-comments">Comments</label>
<textarea name="my-comments" id="my-comments"></textarea>
<input type="submit" name="my-submit" id="my-submit" value="Submit Form">
</form>
</section>
Styling Forms
Styling forms is easy as long as you remember that form elements are inline elements! Once you understand that, styling a form is just a matter of remembering to ensure that your user can recognize each input, that you include styles for the :focus, :invalid
:root{
--wht: #fff;
--black: #000;
--maroon: #8c1d40;
--gold: #ffc627;
--blue: #00a3e0;
--gray2: #E8E8E8;
--gray4: #BFBFBF;
--gray5: #747474;
--gray7: #191919;
--error: #B72A2A;
/* ASU Fonts */
--fonts: Arial, sans-serif;
/* Focus Shadow Style */
--focus-shadow: 0 0 8px #00baff;
}
*{
font-family: sans-serif;
line-height: 1.5;
box-sizing: border-box;
}
form{
width: 350px;
margin: 16px auto;
padding: 16px;
background-color: var(--gray3);
color: var(--gray7);
border-radius: 4px;
}
input, label, select, textarea{
display: block;
width: 100%;
}
label{
margin: 0 0 4px 16px;
font-weight: bold;
}
/* Input/Select Sizing styles */
input, select, textarea{
padding: 10px;
font-size: 1rem;
margin-bottom: 24px;
border-radius: 4px;
border: 1px inset var(--gray7);
background-color: var(--wht);
}
select{
width: 100%;
}
fieldset{
margin-bottom: 24px;
border-radius: 4px;
border: 1px solid var(--gray7);
display: grid;
grid-template-columns: 1fr;
row-gap: 8px;
padding: 0.35em 0.75em 0.75em 0.625em;
}
legend{
font-weight: bold;
padding: 0 4px;
}
fieldset label{
margin-left: 0;
}
textarea{
height: 150px;
}
input[type="submit"]{
background-color: var(--maroon);
border: none;
border-radius: 24px;
color: #fff;
font-size: 18px;
font-weight: bold;
padding: 16px;
margin: 24px auto;
}
input:invalid, select:invalid, textarea:invalid{
border: 4px solid var(--error);
width: calc(100% - 28px);
}
input:focus, select:focus, textarea:focus{
outline-color: var(--blue);
box-shadow: var(--focus-shadow);
}
input[type="submit"]:focus, input[type="submit"]:focus-visible{
outline-color: var(--blue);
box-shadow: var(--focus-shadow);
}
input[type=submit]:hover{
box-shadow: -3px 3px 5px var(--gray5);
}
.required{
color: var(--error);
font-weight: bold;
font-size: 1.35rem;
}
input[type="radio"] + label {
cursor: pointer;
display: flex;
align-items: center;
}
input[type="radio"] {
appearance: none;
margin: 0;
padding: 0;
border: none;
font-size: 0;
border-radius: 0;
}
input[type="radio"] + label::before {
content: "\00a0";
font-size: 2.25em;
line-height: 0.56;
border-radius: 50%;
display: inline-block;
height: 19px;
width: 21px;
text-align: center;
margin-right: 16px;
border: 2px solid var(--wht);
background-color: var(--wht);
padding-bottom: 2px;
}
input[type="radio"]:checked + label::before {
content: "\2022";
color: var(--wht);
background: var(--maroon);
}
input[type="radio"]:focus{
outline: none;
}
input[type="radio"]:focus + label::before {
box-shadow: var(--focus-shadow);
}
Example Output
The form below uses the code above for HTML and CSS.
Contact Us
If you would like more information, please fill out the form below. Required fields are marked with an asterisk (*).