Глава 8: Формы и HTML5 ------ 28/28

Курсы §21. Формы, часть 2
1

86/100 прохожу,почему-то не применяется свойство margin-bottom:5px; в СSS, сами стили закрытые,туда попасть не могу.

код:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <title>Испытание: через тернии к звёздам</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="exam.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header class="page-header">Форма отзыва</header>
    <main>
      <form action="/echo" method="post">
        <fieldset>
        <legend>Личные данные</legend>
        <div class="half-width">
            <label for="id">ID отзыва<input type="number" name="id" id="id" placeholder="12345" disabled>
            </label>
        </div>
        <div class="half-width">
            <label for="name">Имя путешественника</label>
            <input type="text" name="name" maxlength="10" id="name" value="Кекс">
        </div></fieldset>

        <fieldset>
            <legend>Отзыв о поездке</legend>
            <div class="half-width">
                <label for="country">Страна визита <input type="text" name="country" id="country"
                                                          value="Норвегия"></label>
            </div>
            <div class="half-width">
                <label for="city">Город <select name="city" id="city">
                    <option value="Oslo" selected>Осло</option>
                    <option value="Praga">Прага</option>
                    <option value="Kiev">Киев</option>


                </select></label>
            </div>
            <div class="half-width">
                <label for="rating">Оценка поездки</label>
                0 <input type="range" name="rating" id="rating" max="10" min="0" step="1" value="10">10
            </div>
            <div class="half-width output-area">
                <output name="reit">10</output>
            </div>
            <label for="review">Текст отзыва <textarea cols="30" rows="5" name="review" id="review"
                                                       placeholder="Это было просто мяу!"></textarea></label></fieldset>
                                                       
                                                       
        <fieldset>
            <legend>Оценка отеля</legend>
            <div class="half-width">
                <label for="hotel">Название отеля <input type="text" name="hotel" id="hotel"
                                                         placeholder="Название по-английски"></label>
            </div>
            <div class="half-width">
                <label for="arrival_date">Дата въезда <input type="text" name="arrival_date" placeholder="В формате дд-мм-гг" id="arrival_date"></label>
            </div>
            <div class="one-third-width">
                <label for="color">Цвет кроватки <input type="color" name="color" id="color" value="#FF0000"></label>
            </div>
            <div class="two-third-width">
                <label for="dish_rating">Оценка обедов <select name="dish_rating" id="dish_rating">
                    <option value="bad">Плохо</option>
                    <option value="nice" selected>Подушечки оближешь</option>

                </select></label>
            </div>
            <label for="fish">Самая вкусная рыба <select name="fish" multiple size="5" id="fish">
                <option value="l" selected>Норвежский лосось</option>
                <option value="z">Зубчатка</option>

                <option value="o"selected>Морской окунь</option>

                <option value="k">Карась</option>

                <option value="zk">Зеркальный карп</option>

            </select></label>
            <div class="buttons">
                <input type="submit" value="Оценить">
                <input type="reset" value="Сбросить">
            </div>
        </fieldset>
      </form>
    </main>
    <footer class="page-footer"></footer>
  </body>
</html>
2

вы в стили не лезьте, поправьте для начала html

у вас конструкция вида [label for] текст [input] [/label]
для чего оборачивать в лейбл инпут с текстом, если вы используете for? оберните текст и все, тогда ничего не поедет вниз на 5 пикселей (правило создано для label)

у вас ползунок не функционален. вывод никак не реагирует на него

1 лайк
3

Спасибо)

4
Испытание: через тернии к звёздам Форма отзыва 
  <form action="/echo" method="post">
    <fieldset>
    <legend>Личные данные</legend>
    <div class="half-width">
      <label for="id">ID отзыва</label>
       <input type="text" name="id" id="id" value="12345" disabled>
    </div>
    <div class="half-width">
      <label for="name">Имя путешественника</label>
      <input type="text" name="name" value="Кекс">
    </div>
   </fieldset>
   
   
   
   <fieldset>
    <legend>Отзыв о поездке</legend>
    <div class="half-width">
      <label for="country">Страна визита</label>
      <input type="text" name="country" value="Норвегия">
    </div>
    <div class="half-width">
      <label for="city">Город</label>
      <select name="city">
        <option value="Осло">Осло</option>
      </select>
    </div>
    <div class="half-width">
    <label for="rating">Оценка поездки</label>
      0 <input type="range" min="1" max="10" step="1" value="10"> 10
    </div>
    <div class="half-width output-area">
      <output name="sum">10</output>
    </div>
    <label for="review">Текст отзыва</label>
    <textarea name="rewiew" rows="5">Это было просто мяу! </textarea>
   </fieldset>
   
   
   
   <fieldset>
    <legend>Оценка отеля</legend>
    <div class="half-width">
      <label for="hotel">Название отеля</label>
    <input type="text" name="hotel" placeholder="Название по-английски">
    </div>
    <div class="half-width">
      <label for="arrival_date">Дата въезда</label>
       <input type="text" name="arrival_date" placeholder="В формате дд-мм-гггг">
    </div>
    <div class="one-third-width">
      <label for="color">Цвет кроватки</label>
    <input type="color" value="#FF0000">
    </div>
    <div class="two-third-width">
      <label for="dish_rating">Оценка обедов</label>
      <select name="dish_rating">
        <option value="">Подушечки оближешь</option>
        </select>
    </div>
    <label for="fish">Самая вкусная рыба</label>
    <select multiple>
      <option value="" selected>Норвежский лосось</option>
      <option value="">Зубатка</option>
      <option value="" selected>Морской окунь</option>
      <option value="">Карась</option>
      <option value="">Зеркальный карп</option>
      </select>
      </fieldset>
    <div class="buttons">
      <input type="reset" value = "Оценить">
      <input type="reset" value="Сбросить">

    </div>
    
  </form>
</main>
<footer class="page-footer"></footer>

100% из 100

1 лайк