Блог

Так что это были те вопросы, которые я пропустил.

• имеет элемент «форма» размером 600 пикселей, если окно шире 600 пикселей
• имеет ровно один вход с именем «имя_пет» и связанной меткой с содержимым «Имя»
• имеет ровно один элемент «select» с именем «pet_type» и связанной меткой с содержимым «Тип»

И вот что я попробовал HTML

 <div>
  <label for="Name">pet_name</label>
  <input type="text" id="name" name="pet_name">

</div>

<div>
  <label for="Type">pet_type</label>
  <select id="type" name="pet_type">
    <option value="Cat">Cat</option>
    <option value="Dog">Dog</option>
    <option value="Hamster">Hamster</option>
    <option value="Zebra">Zebra</option>
    <option value="Other">Other</option>
  </select>
</div>

<div>
  <label for="bio">Biography</label>
  <textarea id="bio" name="pet_bio"></textarea>
</div>

<div>
  <label for="email">Owner's Email</label>
  <input type="email" id="owner-email" name="pet_owner_email">
</div>

<div>
  <button type="submit">Create new pet</button>
  <id="new-pet-submit-button"</id>
</div>

<div>
  <button type="reset">Reset</button>
</div>
 

CSS

@медиа-экран и (максимальная ширина: 650 пикселей) {

   form {
    width: auto;
  }

  label {
    display: block;
    margin: 0;
    text-align: left;
    width: auto;
  }

  input,
  select,
  textarea {
    width: 100%;
  }
 

Я понимаю вторую часть( я думаю), мне нужно удалить name=»имя питомца».
С двумя другими я немного сомневаюсь. Любая помощь приветствуется.

Вы можете использовать min-width: 600px для запроса носителя формы. Другие предложения касаются чувствительности for атрибута к регистру

 @media screen and (min-width: 600px) {
  form {
    width: 600px;
  }
}

@media screen and (max-width: 650px) {
  form {
    width: auto;
    max-width: 600px;
  }
  label {
    display: block;
    margin: 0;
    text-align: left;
    width: auto;
  }
  input,
  select,
  textarea {
    width: 100%;
  }
} 

 <div>
  <label for="name">pet_name</label>
  <input type="text" id="name" name="pet_name">

</div>

<div>
  <label for="type">pet_type</label>
  <select id="type" name="pet_type">
    <option value="Cat">Cat</option>
    <option value="Dog">Dog</option>
    <option value="Hamster">Hamster</option>
    <option value="Zebra">Zebra</option>
    <option value="Other">Other</option>
  </select>
</div>

<div>
  <label for="bio">Biography</label>
  <textarea id="bio" name="pet_bio"></textarea>
</div>

<div>
  <label for="email">Owner's Email</label>
  <input type="email" id="owner-email" name="pet_owner_email">
</div>

<div>
  <button type="submit">Create new pet</button>
  <id="new-pet-submit-button" </id>
</div>

<div>
  <button type="reset">Reset</button>
</div>