В моем коде нет тегов <div>и label for =, но кажется, что он работает нормально? - PullRequest
Новая
       0

В моем коде нет тегов <div>и label for =, но кажется, что он работает нормально?

2 голосов
/ 16 июня 2020

Я новенький. Просто пытаюсь выучить HTML. Я работал над формами и сделал форму «построить пончик», используя несколько разных форм. Вроде все нормально работает. Но я видел чей-то другой проект, который также имел дело с формами, и его код был заполнен тегами div, у меня есть разрывы и label for=. Так что я просто ищу отзывы. Нужны ли мне дополнительные теги, чтобы быть технически правильными? Вот мой код: 

<!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>

1 Ответ

2 голосов
/ 16 июня 2020

Как видите, ваш код отлично работает без тегов меток. Однако при создании формы вы всегда должны использовать теги label и input. Они принадлежат друг другу, и это важно по причинам доступности.

Вы когда-нибудь замечали при заполнении формы, что вы можете просто щелкнуть ярлык, и он заполнит флажок или переключатель. Вы можете добиться этого, используя теги меток, которые имеют в качестве своего атрибута for то, что соответствующий тег ввода имеет в качестве идентификатора. Так например: 

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

Теперь вы можете щелкнуть по метке, и флажок заполнится. Пользователи с ослабленным зрением, использующие программы чтения с экрана, также полагаются на это поведение.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...