HTML 5’deki tüm form nesneleri

0

HTML 5,  etkileşimli elemanlar ile komple kullanıcı arayüzleri tasarlamayı sağlar. Form’larda kullanılan HTML 5 kodlarına bu yazıda yer vermek istedim.

İşinize yarayacak HTML5 tagleri

Nesne
Ön İzleme
HTML 5 kodu
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
    HTML 5'deki tüm form nesneleri
    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
    <meter min=0 max=24 value=12>12 units</meter>
    Progress

    <progress id=”prog” max=100>
    Summary
    Overview
    <details>
    <summary>
    Presentation
    </summary>
    <dl>
    <dt>term</dt>
    <dd>definition</dd>
    …</dl>
    </details>
    Submit button
    <input type=”submit” name=”submit” value=”Submit”>

    CEVAP VER

    Please enter your comment!
    Please enter your name here