28/28. Невозможность завершения задания на 100%

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

Выполнил задание на 99%, но хочу выполнить на 100%. Пытаюсь и так и сяк, в чем проблема?

HTML

[code]

Испытание: через тернии к звёздам Форма отзыва Личные данные
ID отзыва 
    <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>
        <option value="Oslo">Осло</option>
        <option value="Moslo">Мосло</option>
      </select>
    </div>
    <div class="half-width">
    <label for="rating">Оценка поездки</label>
      0 <input type="range" min="0" max="10" value="10" name="rating"> 10 
    </div>
    <label for="review">Текст отзыва</label>
    <textarea cols="5" 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" name="color" value="#FF0000">
    </div>
    <div class="two-third-width">
      <label for="dish_rating">Оценка обедов</label>
      <select>
        <option value="zaebis">Подушечки оближешь</option>
        <option value="huy">Хуево</option>
      </select>
    </div>
    <label for="fish">Самая вкусная рыба</label>
    <select multiple>
      <option value="w" selected>Норвежский лосось</option>
      <option value="s">Зубатка</option>
      <option value="es" selected>Морской окунь</option>
      <option value="rs">Карась</option>
      <option value="ws">Зеркальный карп</option>
    </select>
    </fieldset>
    <div class="buttons">
      <input type="submit" value="Оценить">
      <input type="submit" value="Сбросить">
    </div>
  </form>
</main>
<footer class="page-footer"></footer>

[/code]

2

Проблему решил таким способом: после блока с оценкой поездки добавляю это

<div class="half-width output-area"> <output>10</output> </div>

3

Я сделал так:
тег form
<form action="/echo" method="post" oninput="rateoutput.value=rating.value">
сам range и output

<label for="rating">Оценка поездки</label>
0 <input type="range" name="rating" min="1" max="10" step="1" value="10"> 10

<div class="half-width output-area">
<output name="rateoutput">10</output>
Получается, изначально в графе стоит 10, но при перемещении ползунка значение меняется.

4

В дополнение к ответу @ Image:
у вас еще вот тут ошибка:

Это не кнопка сброса 
<div class="buttons">
  <input type="submit" value="Оценить">
  <input type="submit" value="Сбросить">
</div>
Сюда дописать паттерн ввода 
 <label for="arrival_date">Дата въезда</label>
      <input type="text" name="arrival_date" placeholder="В формате дд-мм-гггг">

А также вариантам ответа прописывать value без особой надобности не стоит, тем более ТАКИЕ значения
И не забывайте прописывать id и/или name полям ввода, у вас многие поля оказались без привязки к лейблу
Визуально вы конечно получили 100%, но по факту форма сделана тяп-ляп, лишь бы было похоже на картинку