Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML Accessibility For Web Developers Build an Accessible Form Error Messaging

HTML CODE

Could anyone post the html code from this video please? I accidentally deleted it. Thank you!

Stefan Dobrincu
Stefan Dobrincu
5,947 Points

Hey, you can launch a new workspace with the same results or you can download the files from the notes of the video and paste it back in your workspace.

1 Answer

Matt Coale
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Matt Coale
Full Stack JavaScript Techdegree Graduate 17,867 Points

Here is the completed code I ended up with. Hope it helps.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Tacos By Roscoe is not a real restaurant, as far as I know. This is a demo by Anwar Montasir for a Team Treehouse lesson on accessible forms.">
    <title>Tacos By Roscoe | Delivery Information</title>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,900;1,400;1,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    <link rel="stylesheet" href="style.css">
    <!-- add FontAwesome here -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
</head>
<body>
    <header>
        <div id="logo">
            <div class="container">
                <img src="images/taco-emoji.png" alt="Tacos By Roscoe taco emoji logo" id="logo-img">
                <span id="logo-text">Tacos By Roscoe</span>
            </div>
        </div>
        <nav class="container">
            <ul class="nav-flex">
                <li><a href="index.html">Delivery</a></li>
                <li><a>Billing</a></li>
                <li><a>Review</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <div class="container">
            <div id="summary">
                <i class="fas fa-utensils fa-3x"></i>
                <div id="summary-text">
                    <p>Delivery by 7pm, April 13, 2020</p>
                    <p>6 items, <span class="check"></span> $31.44</p>
                </div>
            </div>

            <form>
              <fieldset>
                <legend>Delivery Information</legend>
                <p class="hint">* - required field</p>
                <label for="name">Your Name * </label>
                <input type="text" id="name" name="user-name">
                <label for="email" class="error-text">Email Address * <i class="fas fa-exclamation-triangle"></i></label>
                <input type="email" id="email" name="user-email" class="error-input">
                <p class="hint error-text">Email address must contain a single @.</p>
                <label for="address1">Street Address *</label>
                <input type="text" id="address1" name="user-address1">
                <label for="address2">Apartment/Office Number</label>
                <input type="text" id="address2" name="user-address2">
                <label for="zip" class="error-text">Zip Code * <i class="fas fa-exclamation-triangle"></i></label>
                <input type="text" id="zip" name="user-zip" class="error-input">
                <p class="hint error-text">Please enter a Zip Code.</p>
                <label for="phone">Phone</label>
                <input type="tel" id="phone" name="user-phone" value="">
                <p class="hint">No phone? Include alternate contact below.</p>
                <label for="delivery-instructions">Delivery Instructions</label>
                <textarea id="delivery-instructions" name="user-delivery-instructions"></textarea>
                <button type="submit">Continue to Billing</button>
              </fieldset>
            </form>

        </div>
    </main>
</body>
</html>