Ana Sayfa Yazılım HTML 5’deki tüm form nesneleri

HTML 5’deki tüm form nesneleri

1
HTML 5’deki tüm form nesneleri

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&#8217;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”>
    Önceki İçerik Yeni nesil yazar kasa(YN ÖKC) geçiş sürecinde sona doğru
    Sonraki İçerik Chatbot Nasıl Yapılır? Microsoft Bot Framework Nedir?
    Yaklaşık 15 yıldır Bilgi Sistemleri alanında çalışmakta. Comodore ile başlayan serüven, 133, 166 MMX, P2, P3, P4, Core, Core2Duo… olarak devam etti. Teknik serviste kasaları söküp takmakla geçen kısa bir sürenin sonunda, sistem odasında kendini buldu. Bu esnada hem sunucu mimarileri öğrenirken bir taraftan da yazılıma merak saldı. Microsoft Front Page ile HTML kodlarını ezberlemeye web siteleri geliştirmeye başladı. Bu yeni dünya da CSS de işin içine girdi. PHP ile ASP arasındaki tercihini ASP’den yana kullandı, ASP ile birlikte Microsoft Access’i veri tabanı olarak tanıdı. Edit Plus’ın bu dönemde büyük yardımları oldu. Sonrasında Microsoft SQL ile yoluna devam etti. Visual Basic işin içine girdi, bir müddet fonksiyonlar ile haşır neşir oldu. ASP.NET ve MVC ile yoluna devam etmektedir.

    1 Yorum

    CEVAP VER

    Lütfen yorumunuzu giriniz!
    Lütfen isminizi buraya giriniz