Новые HTML5 Формы

by Andrey Dobrovoi

HTML

<article>
  <form>
    <fieldset>
       <legend>Новые HTML5 Формы</legend>
       <label>Выберите нужный вам цвет: <input type="color" name="favcolor" /></label>
       <label>Дата рождения: <input type="date" name="bday" /></label>
       <label>Дата рождения (месяц и год): <input type="month" name="bdaymonth" /></label>
       <label>Reservation (date and time): <input type="datetime" name="reservation_daytime" /></label>
       <label>Назначение (время и дата): <input type="datetime-local" name="appointment_daytime" /></label>
       <label>Выберите время: <input type="time" name="usr_time" /></label>
       <label>Выберите неделю: <input type="week" name="week_year" /></label>
       <label>E-mail: <input type="email" name="email" /></label>
       <label>Численное Количество (от 1 до 5): <input type="number" name="quantity" min="1" max="5" /></label>
       <label>Диапазон: <input type="range" name="points" min="1" max="10" /></label>
       <label>Поиск в Интернете: <input type="search" name="googlesearch" placeholder="Введите запрос..." autofocus /></label>
        <label>Ваш Сайт: <input type="url" name="website" /></label>
        <label>Телефон: <input type="tel" name="telephone" required /></label>
     </fieldset>
   </form>
</article>

CSS

header, section, footer, aside, nav, article, figure, audio, video, canvas  { display:block; }
    label { display:block; line-height:1.3em; }