Все объекты форм в HTML 5

HTML 5 обеспечивает полный пользовательский интерфейс с помощью более широкого набора виджетов, объектов форм и интерактивных элементов.

Предварительный просмотр позволяет напрямую проверить совместимость с каждым браузером.

Предмет
Пре визуализация
HTML-код 5
Простой текст
<label> Текст </label>
Простая кнопка
<input type = «button» name =» name» value = «Button»>
Изображение кнопки
<input type = «image» src = «image/bimage.jpg»>
Текстовое поле
<input type = «text» name = «text» value = «ничего»>
Пароль
<input type = «password» name = «monpass» value = «12345»>
Дата
<input type = «date» name =» d» value =» <? php echo $ today?>»>
Дата и время
<input type = «datetime» name =» dt» value =» <? php echo $ now?>»>
Время
<time> 2013-06-27 </time>
Количество
<input type = «номер» name = «номер» value = «12345»>
Цвет
<input type = «color» name = «color» value =»»>
Поле поиска
<input type = «search» name =»» list = «datalist» value =»»>
Датировался
Десять
<data value = «10 «> Десять </data>
Флажок
<input type = «checkbox» name = «checkbox1» value = «checkbox»>
Радиогруппа

<label> Выбор 1
<input type = «radio» name = «radio1» value = «radio1»>
</label>
<label> Выбор 2
<input type = «radio» name = «radio1» value = «radio2»>
</label>
Текстовое поле
<textarea name = «textarea «> содержимое </textarea>
Расположи
<input type = «range» min =» -100» max = «100» value =» 0» step =» 2» name = «power» list = «powers»>
<datalist id = «powers»>
<option value =» 0»>
<option value =» -30»>
<option value =» 30»>
<option value =» + 50»>
</datalist>
Список данных
Используется с вводом
<datalist id = «identifier»>
<option value =» 1»>
<option value =» 2»>
<option value =» 3»>
</datalist>
Выбрать
<select name = «select»>
<option> Альфа </option>
<option> Бета </option>
<option> Delta </option>
</select>
Выбрать список
<select name = «select2» size =» 3»>
<option> Альфа </option>
<option> Бета </option>
<option> Delta </option>
</select>
Меню
  • Новый
  • Открываться
  • Спасать
    •
    <меню type = «контекстт»>
    <li> Новый </li>
    <li> Открыть </li>
    <li> Сохранить </li>
    </меню>
    Панель инструментов
    • <меню type = «toolbar»>
    <li> <button type = «button» onclick =» fnew () «> Новый </button> </li>
    <li> <button type = «button» onclick =» fopen () «> Открыть </button> </li>
    <li> <button type = «button» onclick =» fsave () «> Сохранить </button> </li>
    </меню>
    Комбобокс
    <input type = «text» list = «comboid»>
    <datalist id = «comboid»>
    <option value =» 0»>
    <option value =» -30»>
    <option value =» 30»>
    <option value =» + 50»>
    </datalist>
    Файл
    <input type = «file» name = «file»>
    Изображение и подпись
    Image caption
    <figure>
    <img src = «image/image.gif»>
    <figcaption> Image caption </figcaption>
    </figure>
    Филдсет
    Название

    ... Содержание...
    <fieldset> <legend> Название </legend>
    <p> Содержание </p>
    </fieldset>
    Результат
    <output onforminput =» value = 2 + 2 «> </output>
    Метр
    12 единиц
    <meter min = 0 max = 24 значение = 12> 12 единиц </meter>
    Прогресс
    0%
    <progress id = «prog» max = 100>
    Саммари
    Представление
    термин
    определение
    ...
    <подробности>
    <summary> Обзор </summary>
    <dl>
    <dt> термин </dt>
    <dd> определение </dd>
    ...
    </dl>
    </подробности>
    Кнопка отправки
    <input type = «submit» name = «отправить» value = «отправить»>

    Дополнительная информация