Mocking up a sign up form


by Jeremy Caudle
code

After learning more about accessibility, I’ve realized I need to revisit a lot of the common patterns I’d follow when building things with HTML and CSS. I think I’ll spend the remainder of this project learning more and practicing with a focus on making things as accessible as possible.

Sign up for an account

Enter your info below to create an account and get the most from Website Name!

View the code:

HTML and JS 
<div class="code-block">
            <h2>Sign up for an account</h2>
            <p>Enter your info below to create an account and get the most from <strong>Website Name</strong>!</p>

            <ul class="form-list">
                <li><label for="name-field">Name</label> <input id="name-field" type="text" /></li>
                <li><label for="email-field">Email</label> <input id="email-field" type="text" /></li>
                <li><label for="source-field">How did you hear about us?</label> 
                    <select id="source-field">
                        <option value="">Not sure</option>
                        <option value="podcast">Podcast ad</option>
                        <option value="magazine">Magazine ad</option>
                        <option value="TV">TV ad</option>
                        <option value="word-of-mouth">Word of mouth</option>
                    </select>
                </li>
                <li><button>Signup</button></li>
            </ul>
        </div>
CSS 
.code-block {
                background-color: rgb(153, 180, 255);
                background: linear-gradient(rgb(219, 228, 255), rgb(215, 223, 250));
                padding: 1rem 1rem;
                max-width: 20em;
                margin: 1rem auto;
                font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
                font-size: 18px;
                border-radius: .5rem;
                line-height: 1.5;
            }

            .code-block h2 {
                font-size: 2rem;
                margin: 0 0 0 .25rem;
            }

            .code-block p {
                margin: .25em 0;
            }

            .form-list {
                padding-left: 0;
                list-style-type: none;
            }

            .form-list li {
                display: flex;
                justify-content: space-between;
                margin-bottom: 1rem;
            }

            .form-list input:focus, select:focus, button:focus {
                outline: solid 3px rgba(255, 115, 0, 0.75);
            }

            .form-list label {

            }

            .form-list input[type=text] {
                width: 70%;
            }

            .form-list select {

            }

            .form-list button {
                font-size: 20px;
                background-color: orange;
                padding: .5rem 1rem;
                border-radius: .5rem;
                border: none;
                transition: background-color .125s ease-out, color .125s ease-out;
            }

            .form-list button:hover, .form-list button:focus {
                background-color: orangered;
                color: white;
            }

Tags