HTML Form Özellikleri
HTML form, adından da anlaşılacağı üzere kullanıcı girdisi toplamak ve toplanan bu girdileri işlenmek üzere bir sunucuya gönderen yapılardır.
HTML Form
Aşağıdaki tablo form oluştururken kullanılan etiketler derlenmiştir:
<form> | Formu oluşturur |
<input> | Kullanıcıdan veri girdisi sağlar |
<textarea> | Metin girişi kutusu oluşturur |
<label> | Metin etiketi oluşturur |
<fieldset> | Elementleri gruplara ayırır |
<legend> | Element grupları için başlık oluşturur |
<select> | Açılır liste oluşturur |
<optgroup> | Açılır listede seçenekleri tanımlar |
<option> | Açılır listede seçenek gösterir |
<button> | Buton oluşturur |
<input> Elementi
HTML input elementi en çok kullanılan form elementlerinden biridir ve type özniteliğine bağlı olarak çeşitli şekillerde görüntülenebilir:
<input type="text">(varsayılan değerdir)<input type="password"><input type="submit"><input type="reset"><input type="radio"><input type="checkbox"><input type="button"><input type="color"><input type="date"><input type="datetime-local"><input type="email"><input type="file"><input type="hidden"><input type="image"><input type="month"><input type="number"><input type="range"><input type="search"><input type="tel"><input type="time"><input type="url"><input type="week">
Input Type Text
<input type="text"> kodu tek satırlık bir metin giriş alanı tanımlar:
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
Input Type Password
<input type="password"> adından anlaşılacağı üzere bir şifre alanı tanımlar:
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
Input Type Submit
<input type="submit"> form verilerini PHP gibi bir dille yazılmış işleyiciye göndermek için bir buton tanımlar.
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
Input Type Reset
<input type="reset"> kodu, tüm form değerlerini varsayılan değerlerine sıfırlayacak bir sıfırlama butonu oluşturur:
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
Input Type Radio
<input type="radio"> kodu, kullanıcının verilmiş seçeneklerden YALNIZCA BİRİNİ seçmesine izin verir:
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
Input Type Checkbox
<input type=”checkbox”> kodu, kullanıcının kendisine verilen seçeneklerden BİRDEN FAZLASINI seçebilmesine imkan verir:
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
Input Type Button
<input type="button"> adından anlaşılacağı üzere bir buton oluşturur:
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
Input Type Color
<input type="color"> kodu, renk içermesi gereken giriş alanları için kullanılır.
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
Input Type Date
<input type="date"> kodu da adından anlaşılacağı üzere tarih içermesi gereken giriş alanları için kullanılır.
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
Input Type Email
<input type="email">, yine adından kolayca anlaşılacağı üzere bir e-posta adresi içermesi gereken giriş alanları için kullanılır:
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
Input Type File
<input type="file">, dosya yüklemeleri için bir dosya seçme alanı oluşturur:
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
Input Type Number
Yine adından görevini belli eden bir type türü olan <input type="number"> ile sayısal bir giriş alanı oluşturulur:
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
<input> Öznitelikleri
HTML <input> elementinin sahip olduğu öznitelikler aşağıdaki gibidir:
- value Özniteliği: bir giriş alanı için bir başlangıç değeri belirtir.
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
- readonly Özniteliği: Salt okunur bir alan oluşturur. Bu alan değiştirilemez (ancak, bir kullanıcı üzerine gelebilir, onu vurgulayabilir ve içindeki metni kopyalayabilir).
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
- disabled Özniteliği: bir giriş alanının devre dışı bırakılması gerektiğini belirtir.
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
- size Özniteliği: bir giriş alanının karakter cinsinden görünür genişliğini belirtir ve varsayılan değeri 20’dir.
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
- maxlength Özniteliği: bir giriş alanında izin verilen maksimum karakter sayısını belirtir.
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
- min and max Öznitelikleri: bir giriş alanı için minimum ve maksimum değerleri belirtir.
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
- multiple Özniteliği: kullanıcının bir giriş alanına birden fazla değer girmesine izin verildiğini belirtir.
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
- pattern Özniteliği: form gönderildiğinde giriş alanının değerinin kontrol edildiği normal bir ifadeyi belirtir.
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
- placeholder Özniteliği: bir girdi alanının beklenen değerini (örnek bir değer veya beklenen biçimin kısa bir açıklaması) açıklayan kısa bir ipucu belirtir.
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
- required Özniteliği: formu göndermeden önce bir girdi alanının doldurulması gerektiğini belirtir.
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
- step Özniteliği: bir giriş alanı için belirlenen sayı aralıklarını gösterir.
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
list Özniteliği: bir <input> öğesi için önceden tanımlanmış seçenekleri içeren bir <datalist> elementine başvurur.
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
- autocomplete Özniteliği: bir formun veya bir giriş alanının otomatik tamamlamanın açık mı yoksa kapalı mı olması gerektiğini belirtir.
See the Pen Untitled by 1kodum (@1kodum) on CodePen.