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 |
|
<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 |
|
<figure>
<img src=”image/image.gif”> <figcaption>Caption</figcaption> </figure> |
Fieldset |
<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”>
|
[…] için hazırladığım responsive yani tüm cihazla uyumlu CSS kodlarımı sizler için derledim. HTML ve CSS’in güçlerini birleştirerek responsive tasarımlar yapmak sandığınızdan daha kolay […]