Bootcamp Day 4 Lesson Plan This page was last updated June 16, 2022

Table of Contents

Block A: Steps 19-40

Activity

Parent vs child elements
Where does an attribute go?
New elements:
- <ul></ul>
- <figcaption></figcaption>
- 
 - Could also use , but  suggests importance, which is important for people who use screen readers
- <ol></ol>
- 
 - Could also use , but  suggests importance, which is important for people who use screen readers

Practice

Steps 19-40

Block C: Steps 41-48

How do I submit a form?

Demonstration: adding a submit button to the form

<!DOCTYPE html>
<html>
  <body>
    <h1>Sign Up for the Willston Web Coding Bootcamp!</h1>
    <main>
      <form action="https://willston.org/submit">
        <input type="text" name="email" placeholder="Your email" required>
        <button type="submit">Submit</button>
      </form>
    </main>
  </body>
</html>

Practice: steps 41

Why is my button on the same line as the input?

34-40

Demonstration: clarifying that the button is for submissions

<!DOCTYPE html>
<html>
  <body>
    <h1>Sign Up for the Willston Web Coding Bootcamp!</h1>
    <main>
      <form action="https://willston.org/submit">
        <input type="text" name="email" placeholder="Your email" required>
        <button type="submit">Submit</button>
      </form>
    </main>
  </body>
</html>

Practice: step 42

How do I add radio buttons?

Demonstration: adding radio buttons to example

<!DOCTYPE html>
<html>
  <body>
    <h1>Sign Up for the Willston Web Coding Bootcamp!</h1>
    <main>
      <form action="https://willston.org/submit">
        <label><input id="yes" type="radio" name="yes-no"> Yes</label>
        <label><input id="no" type="radio" name="yes-no"> No</label>
        <input type="text" name="email" placeholder="Your email" required>
        <button type="submit">Submit</button>
      </form>
    </main>
  </body>
</html>

Practice: steps 43-48

Block B: Steps 49-59

How do I group questions on a form?

Demonstration: adding a <fieldset> element to the form

<!DOCTYPE html>
<html>
  <body>
    <h1>Sign Up for the Willston Web Coding Bootcamp!</h1>
    <main>
      <form action="https://willston.org/submit">
        <fieldset>
          <legend>Are you a student?</legend>
          <label><input id="yes" type="radio" name="yes-no"> Yes</label>
          <label><input id="no" type="radio" name="yes-no"> No</label>
        </fieldset>
        <input type="text" name="email" placeholder="Your email" required>
        <button type="submit">Submit</button>
      </form>
    </main>
  </body>
</html>

Practice: steps 49-53

Practicing prior knowledge

Step 54

Are there other ways to use the `<label>` element?

Demonstration: moving the label element

<!DOCTYPE html>
<html>
  <body>
    <h1>Sign Up for the Willston Web Coding Bootcamp!</h1>
    <main>
      <form action="https://willston.org/submit">
        <fieldset>
          <legend>Are you a student?</legend>
          <input id="yes" type="radio" name="yes-no" value="yes"> <label for="yes">Yes</label>
          <input id="no" type="radio" name="yes-no" value="no"> <label for="no">No</label>
        </fieldset>
        <input type="text" name="email" placeholder="Your email" required>
        <button type="submit">Submit</button>
      </form>
    </main>
  </body>
</html>

Practice: 55-59

Block C: Steps 60-67

How can I make a radio button checked by default?

Demonstration: adding the checked attribute to a radio button

<!DOCTYPE html>
<html>
  <body>
    <h1>Sign Up for the Willston Web Coding Bootcamp!</h1>
    <main>
      <form action="https://willston.org/submit">
        <fieldset>
          <legend>Are you a student?</legend>
          <input id="yes" type="radio" name="yes-no" value="yes" checked> <label for="yes">Yes</label>
          <input id="no" type="radio" name="yes-no" value="no"> <label for="no">No</label>
        </fieldset>
        <input type="text" name="email" placeholder="Your email" required>
        <button type="submit">Submit</button>
      </form>
    </main>
  </body>
</html>

Practice: step 60

How do I divide the main part of the page with footer?

Demonstration: adding a footer to the example

<!DOCTYPE html>
<html>
  <body>
    <h1>Sign Up for the Willston Web Coding Bootcamp!</h1>
    <main>
      <form action="https://willston.org/submit">
        <fieldset>
          <legend>Are you a student?</legend>
          <input id="yes" type="radio" name="yes-no" value="yes" checked> <label for="yes">Yes</label>
          <input id="no" type="radio" name="yes-no" value="no"> <label for="no">No</label>
        </fieldset>
        <input type="text" name="email" placeholder="Your email" required>
        <button type="submit">Submit</button>
      </form>
    </main>
    <footer>
      <small>This page has no copyright—it has an MIT license</small>
    </footer>
  </body>
</html>

Practice: step 61

Practicing prior knowledge

Steps 62 and 63

How do I add a title to my site?

Demonstration: adding a title inside the <head>

<!DOCTYPE html>
<html>
  <head>
    <title>Sign Up for Willston Web</title>
  </head>
  <body>
    <h1>Sign Up for the Willston Web Coding Bootcamp!</h1>
    <main>
      <form action="https://willston.org/submit">
        <fieldset>
          <legend>Are you a student?</legend>
          <input id="yes" type="radio" name="yes-no" value="yes" checked> <label for="yes">Yes</label>
          <input id="no" type="radio" name="yes-no" value="no"> <label for="no">No</label>
        </fieldset>
        <input type="text" name="email" placeholder="Your email" required>
        <button type="submit">Submit</button>
      </form>
    </main>
    <footer>
      <small>This page has no copyright—it has an MIT license</small>
    </footer>
  </body>
</html>

Practice: steps 64 and 65

How do I make sure people know my site is in English?

Demonstration: specifying the language

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Sign Up for Willston Web</title>
  </head>
  <body>
    <h1>Sign Up for the Willston Web Coding Bootcamp!</h1>
    <main>
      <form action="https://willston.org/submit">
        <fieldset>
          <legend>Are you a student?</legend>
          <input id="yes" type="radio" name="yes-no" value="yes" checked> <label for="yes">Yes</label>
          <input id="no" type="radio" name="yes-no" value="no"> <label for="no">No</label>
        </fieldset>
        <input type="text" name="email" placeholder="Your email" required>
        <button type="submit">Submit</button>
      </form>
    </main>
    <footer>
      <small>This page has no copyright—it has an MIT license</small>
    </footer>
  </body>
</html>

Practice: step 66

How do I make sure the browser knows I am writing HTML?

Demonstration: pointing out <!DOCTYPE html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Sign Up for Willston Web</title>
  </head>
  <body>
    <h1>Sign Up for the Willston Web Coding Bootcamp!</h1>
    <main>
      <form action="https://willston.org/submit">
        <fieldset>
          <legend>Are you a student?</legend>
          <input id="yes" type="radio" name="yes-no" value="yes" checked> <label for="yes">Yes</label>
          <input id="no" type="radio" name="yes-no" value="no"> <label for="no">No</label>
        </fieldset>
        <input type="text" name="email" placeholder="Your email" required>
        <button type="submit">Submit</button>
      </form>
    </main>
    <footer>
      <small>This page has no copyright—it has an MIT license</small>
    </footer>
  </body>
</html>

Practice: step 67

Bootcamp Day 4 Lesson Plan This page was last updated June 16, 2022

Block A: Steps 19-40

Activity

Practice

Block C: Steps 41-48

How do I submit a form?

Why is my button on the same line as the input?

How do I add radio buttons?

Block B: Steps 49-59

How do I group questions on a form?

Practicing prior knowledge

Are there other ways to use the <label> element?

Block C: Steps 60-67

How can I make a radio button checked by default?

How do I divide the main part of the page with footer?

Practicing prior knowledge

How do I add a title to my site?

How do I make sure people know my site is in English?

How do I make sure the browser knows I am writing HTML?

Are there other ways to use the `<label>` element?