Form in html5 definitely guide & examples

Friday 06th, Jan, 2017 | #Playground #HTML 5


A webform, web form or HTML form on a web page allows a user to enter data that is sent to a server for processing. Forms can resemble paper or database forms because web users fill out the forms using checkboxes, radio buttons, or text fields. For example, forms can be used to enter shipping or credit card data to order a product, or can be used to retrieve search results from a search engine.

HTML 5 introduces a number of input tags that can be represented by other interface elements. Some are based upon text input fields and are intended to input and validate specific common data (html5 validator). These include email to enter email addresses, tel for telephone numbers, number for numeric values. There are additional attributes to specify required fields, fields that should have keyboard focus when the web page containing the form is loaded, and placeholder text that is displayed within the field but is not user input (such as the 'Search' text displayed in many search input fields before a search term is entered.) The date input type displays a calendar from which the user can select a date or date range. And the color input type can be represented as an input text simply checking the value entered is a correct hexadecimal representation of a color, according to the specification or a color picker widget (the latter being the solution used in most browsers which support this attribute).

html5 form objects playground table

Object
Preview
HTML 5 code
Label
<label>Texte</label>
Button
<input type="button" name="name" value="Bouton">
Image button
<input type="image" src="image/bimage.jpg">
Text field
<input type="text" name="text" value="empty">
Password
<input type="password" name="monpass" value="12345">
Date
<input type="date" name="date" value="<?php echo $today?>">
Date and time
<input type="datetime" name="time" value="<?php echo $now?>">
Time
<time>2013-06-27</time>
Number
<input type="number" name="num" value="12345">
Color
<input type="color" name="color" value="">
Search input
<input type="search" name="" list="datalist" value="">
Data
Dix
<data value="10">Ten</data>
Check box
<input type="checkbox" name="checkbox1" value="checkbox">
Radio group
<label>Choice 1 <input type="radio" name="radio1" value="radio1"> </label> <label>Choice 2 <input type="radio" name="radio1" value="radio2"> </label>
Textarea
<textarea name="textarea">content</textarea>
Range
<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>
Data list
To be used with input
<datalist id="identifier"> <option value="1"> <option value="2"> <option value="3"> </datalist>
Select
<select name="select"> <option>Alpha</option> <option>Beta</option> <option>Delta</option> </select>
Select list
<select name="select2" size="3"> <option>Alpha</option> <option>Beta</option> <option>Delta</option> </select>
Menu
  • New
  • Open
  • Save
  • <menu type="context"> <li>New</li> <li>Open</li> <li>Save</li> </menu>
    Toolbar
  • <menu type="toolbar"> <li><button type="button" onclick="fnew()">New</button></li> <li><button type="button" onclick="fopen()">Open</button></li> <li><button type="button" onclick="fsave()">Save</button></li> </menu>
    Combo box
    <input type="text" list="comboid"> <datalist id="comboid"> <option value="0"> <option value="-30"> <option value="30"> <option value="+50"> </datalist>
    File upload
    <input type="file" name="file">
    Image & caption
    Caption
    <figure> <img src="image/image.gif"> <figcaption>Caption</figcaption> </figure>
    Fieldset
    Title

    ...Content...

    <fieldset> <legend>Title </legend> <p>Content</p> </fieldset>
    Output  
    <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>
    Summary
    Overview
    term
    definition
    ...
    <details> <summary> Presentation </summary> <dl> <dt>term</dt> <dd>definition</dd> ... </dl> </details>
    Submit button
    <input type="submit" name="submit" value="Submit">

    by www.scriptol.com