html - 需要进行更正，但我不明白如何做上述指示

Question

所以这些是我错过的问题。

• 当窗口宽于 600 像素时，有一个 600 像素的“表单”元素

• 只有一个名称为“pet_name”的输入和一个内容为“名称”的关联标签

• 恰好有一个名为“pet_type”的“select”元素和一个内容为“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

@media screen and (max-width: 650px) {

  form {
    width: auto;
  }

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

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

我理解第二部分（我认为）我需要删除 name="pet_name" 其他两个我有点犹豫。任何帮助都会得到帮助。

Answer 1

您可以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>