All form objects in HTML 5

HTML 5 provides a complete user interface through a broader set of widgets, form objects, and interactive elements.

The preview allows you to directly check compatibility with each browser.

Subject
Pre-visualization
HTML code 5
Plain text
<label> Text </label>
Simple button
<input type = «button» name =» name» value = «Button»>
Button image
<input type = «image» src = «image/bimage.jpg»>
Text field
<input type = "text" name = "text" value = "nothing">
Passcode
<input type = «password» name = «monpass» value = «12345»>
Date
<input type = «date» name =» d» value =» <? php echo $ today?>»>
Date and time
<input type = «datetime» name =» dt» value =» <? php echo $ now?>»>
Time
<time> 2013-06-27 </time>
Quantity
<input type = "number" name = "number" value = "12345">
Color
<input type = «color» name = «color» value =»»>
Search box
<input type = «search» name =»» list = «datalist» value =»»>
It was dated
Ten
<data value = "10 "> Ten </data>
Tag
<input type = «checkbox» name = «checkbox1» value = «checkbox»>
Radio group

<label> Selection 1
<input type = «radio» name = «radio1» value = «radio1»>
</label>
<label> Selection 2
<input type = «radio» name = «radio1» value = «radio2»>
</label>
Text field
<textarea name = "textarea "> content </textarea>
Arrange
<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>
List of data
Used with input
<datalist id = «identifier»>
<option value =» 1»>
<option value =» 2»>
<option value =» 3»>
</datalist>
To choose
<select name = «select»>
<option> Alpha </option>
<option> Beta </option>
<option> Delta </option>
</select>
Select a list
<select name = «select2» size =» 3»>
<option> Alpha </option>
<option> Beta </option>
<option> Delta </option>
</select>
Menu
  • New
  • To open
  • To save
    •
    <menu type = "context">
    <li> New </li>
    <li> Open </li>
    <li> Save </li>
    </menu>
    Toolbar
    • <menu type = "toolbar">
    <li> <button type = «button» onclick =» fnew () «> Новый </button> </li>
    <li> <button type = «button» onclick =» fopen () «> Открыть </button> </li>
    <li> <button type = "button" onclick =" fsave () "> Save </button> </li>
    </menu>
    Combobox
    <input type = «text» list = «comboid»>
    <datalist id = «comboid»>
    <option value =» 0»>
    <option value =» -30»>
    <option value =» 30»>
    <option value =» + 50»>
    </datalist>
    File
    <input type = «file» name = «file»>
    Image and caption
    Image caption
    <figure>
    <img src = «image/image.gif»>
    <figcaption> Image caption </figcaption>
    </figure>
    Fieldset
    Name

    ... Contents...
    <fieldset> <legend> Title </legend>
    <p> Contents </p>
    </fieldset>
    Result
    <output onforminput =» value = 2 + 2 «> </output>
    Meter
    12 units
    <meter min = 0 max = 24 value = 12> 12 units </meter>
    Progress
    0%
    <progress id = «prog» max = 100>
    Sammari
    Representation
    term
    definition
    ...
    <details>
    <summary> Overview </summary>
    <dl>
    <dt> term </dt>
    <dd> definition </dd>
    ...
    </dl>
    </more>
    Submit button
    <input type = "submit" name = "submit" value = "submit">

    Further information