[ANSWERED] html – No
and “label for=” tags in my code, but it seems to work fine?

Question 1

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.

Question 2

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="[email protected]"><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>

Bollate

[ANSWERED] html – No
and “label for=” tags in my code, but it seems to work fine?

By

Solution 1 :

Problem :

Comments

Comment posted by developer.mozilla.org/en-US/docs/Web/HTML/Element/label

Comment posted by Tvawalk

Comment posted by Clara

Comment posted by Tvawalk

By

Related Post

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate