No <div> and "label for=" tags in my code, but it seems to work fine?

user_13753325 0
Viewed 34

I'm new. Just trying to learn HTML. I was working on forms and made a "build a donut" form using a couple of different forms. Everything seems to work fine. But I saw someone else's project that also dealt with forms and their code was full of div tags where I have breaks and label for=. So I'm just looking for feedback. Do I need the extra tags to be technically correct? Here's my code:

<!doctype>
<html>

<head>
  <title>Create Your Own Donuts</title>
</head>

<h2>Fill Out The Form Below To Create Your Order</h2>


<style type="text/css">
  body {
    background-color: #d2b48c;
    margin-left: 30%;
    margin-right: 30%;
    border: 2px solid black;
    padding: 10px 10px 10px 10px;
    font-family: sans-serif;
  }
</style>


<body>


  <p>
    Choose Donut Base:
    <select type="Base">
      <option value="Base"> Cake</option>
      <option value="Base"> Yeast</option>
    </select>
  </p>


  <p>
    Choose A Shape:
    <select type="Topping">
      <option value="Glazed">Rectangle</option>
      <option value="Chocolate">Disk</option>
      <option value="Powdered">Ball</option>
    </select>
  </p>

  <p>
    Choose Your Filling: <br>
    <input type="radio" name="filling" value="jelly">Jelly<br>
    <input type="radio" name="filling" value="cream">Cream<br>
    <input type="radio" name="filling" value="none">None<br>

  </p>

  <p>
    Toppings:
    <br>
    <input type="checkbox" name="toppings" vaule="Blueberries">Blueberries
    <br>
    <input type="checkbox" name="toppings" value="Shredded Coconut">Shredded Coconut
    <br>
    <input type="checkbox" name="toppings" value="Caramel Drizzle">Caramel Drizzle
    <br>
    <input type="checkbox" name="toppings" value="Strawberries">Strawberries
    <br>
    <input type="checkbox" name="toppings" value="Marshmallows">Marshmallows
    <br>
    <input type="checkbox" name="toppings" value="Crushed Oreos">Crushed Oreos
    <br>
    <input type="checkbox" name="toppings" value="Coffee Crisp">Coffee Crisps
    <br>
    <input type="checkbox" name="toppings" value="Whipped Cream">Whipped Cream
    <br>
    <input type="checkbox" name="toppings" value="Hot Fudge">Hot Fudge
    <br>
    <input type="checkbox" name="toppings" value="Crushed Graham Crackers">Crushed Graham Crackers
    <br>
    <input type="checkbox" name="toppings" value="Sprinkles">Sprinkles
    <br>
    <input type="checkbox" name="toppings" value="Powdered Sugar">Powdered Sugar
    <br>

  </p>

  <p>

    Hot or Cold: <br>
    <input type="radio" name="Sprinkles" value="Yes">Hot <br>
    <input type="radio" name="Sprinkles" value="No">Cold

  </p>

  <p>

    Quantity:
    <input type="number" min="1" max="100">
  </p>

  <p>

    Name:
    <input type="Name" placeholder="Name" required><br> Email: <input type="email" placeholder="example@gmail.com"><br> Phone Number: <input type="tel" placeholder="555.55.55" required>
    <br> Pickup Date: <input type="date"> <br> Pickup Time: <input type="time">

  </p>

  <p>

    <button input type="submit">Place Order</button>

  </p>



   </body>



</html>

forms html
1 Answers

As you can see, your code seems to work just fine without label tags. However, when creating a form, you should always use label and input tags. They belong together and it's important for accessability reasons.

Have you ever noticed when filling out a form, that you can just click on the label and it fills the checkbox or the radio button. You can achieve this by using label tags that have as their for attribute whatever the corresponding input tag has as an id. So for example:

<input type="checkbox" name="toppings" vaule="Blueberries" id="blueberries">
<label for="blueberries">Blueberries</label>

Now you can click on the label and the checkbox gets filled. Visually impaired users that use screenreaders also rely on that behaviour.

user_95956530
Related