#html #css
Вопрос:
Так что это были те вопросы, которые я пропустил.
- имеет элемент «форма» размером 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=»имя питомца».
С двумя другими я немного сомневаюсь. Любая помощь приветствуется.
Ответ №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>