HTML TEMELLERİ
HTML NEDİR ? HTML Başlık(Heading) HTML Paragraf(Paragraphs) HTML Yazı Stili(Font Style) HTML Yazı Formatları(Format Text) HTML Renk Kodları(Color Codes) HTML Link Verme-Ekleme HTML Resim Ekleme(Add a Image) HTML Tablo Ekleme(Add a Table) HTML Liste Ekleme(Add a List) HTML Web Site Penceresi Ekleme(Iframe) HTML Head ve Meta Etiketleri HTML Semboller(Symbols) HTML Form HTML Form Elemanları(Form Elements) HTML Form Giriş Özellikleri (Form Input Properties)
HTML5
İLERİ SEVİYE
HTML 5 NEDİR? HTML Sayfa Bölümleri HTML Form Giriş(Input) Özellikleri HTML Form Elementleri HTML Form Özellikleri(Form Properties) HTML Canvas Kullanımı HTML SVG Kullanımı HTML Video Ekleme-Oynatma(Video Player) HTML Ses Ekleme-Oynatma(Audio Player)
CSS TEMELİ
CSS NEDİR ? CSS CSS-HTML İlişkisi CSS Backgrounds(Arkaplan) CSS Border(Kenarlık) CSS Margins(Dış Boşluk) CSS Padding(İç Boşluk) CSS Height and Width(Yükseklik ve Genişlik) CSS Box Model(Kutu Modeli) CSS Outline(Dış Çizgi) CSS Text(Metin) CSS Fonts(Yazı) CSS Icons(Ikon) CSS Links CSS List(Liste) CSS Tables(Tablolar) CSS Display(Görüntü-Ekran) CSS Layout - Width and Max-width(Yerleşim - Genişlik ve Max Genişlik) CSS Positon(Durum) CSS Overflow(Taşma) CSS Layout-Float and Clear(Yerleşim - Yön ve Temizliği) CSS Image Opacity / Transparency(Opaklık/Saydamlık) CSS Navigation Bar(Gezinme Menüsü)
html5 form elemanları
html5 form elements
html5 form elements list
html5 form elements with example
html5 datalist example
html5 datalist form
html5 datalist use
html5 using datalist
html5 keygen tag
html5 keygen element
html5 keygen example
html5 keygen element example
html5 keygen alternative
keygen form element in html5
keygen element in html5
html5 datalist element example
elemento datalist html5
datalist element in html5
html5 output element example
html5 output example
output element in html5
html5 output tag
html5 output for
html5 form output
html5 form output element

HTML Form Elementleri

HTML Form Elementleri
Html
<datalist id="sehirler">


  <option value="Ankara">Ank.</option>


  <option value="İstanbul">İst.</option>


  <option value="Edirnme">Edi.</option>


  <option value="Eskişehir">Eski.</option>


</datalist>


<input list="sehirler" />

Html 5 ile beraber yeni form elementleri de geldi. Bunlar daha güvenli ve daha kullanışlı.Öğrenmeye başlayalım...

1-<datalist> Elementi

Bu element belirlediğiniz veri grubunun açılır menü şeklinde bir arada tutmasını sağlar.<datalist elementi <input> ile birlikte kullanılır. Çünkü kullanıcı burada bir seçim yapması gerekir.<input> etiketine veriyi aldıktan sonra <form> ile gönderebilirsiniz.

Kullanımı:

<datalist id="sehirler">


  <option value="Ankara">Ank.</option>


  <option value="İstanbul">İst.</option>


  <option value="Edirnme">Edi.</option>


  <option value="Eskişehir">Eski.</option>


</datalist>


<input list="sehirler" />

2-<keygen> Elementi

Bu element kullanıcı ile sunucu arasında şifreli bir bağlantı oluşturmayı sağlar. Biri özel ve diğeri genel anahtardır. Özel olan anahtar sizin ağınızda kalırken, genel olan anahtar sunucuya gönderilir. Genel anahtar, kullanıcının ileride tekrar kullanabilmesi için bir istemci sertifikası oluşturmak için kullanılır.Güvenliğiniz için bunu formlarınızda kullanmanızı tavsiye ederim.

Kullanımı:

<form action="keygen.php" method="get">


Kullanıcı adı: <input type="text" name="kullanici_adi">


Şifreleme: <keygen name="guvenlik">


<input type="submit">


</form>

3-<output> Elementi

Bir hesaplama yapmak istediğinizde sonucunu size gösterir. Bu hesaplamalar genelde Javascript ile yaptırılır.

Kullanımı:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">


0<input type="range" id="a" value="50">100 +


<input type="number" id="b" value="50">=


<output name="x" for="a b"></output>


</form>


Paylaş:

Enes KILIÇ
Webmaster