<input>
Etiketi Temel Özellikler
- Etiket Yazımı ve Etiket Kullanımı :
<input> <!-- Etiket yalnızca açılmalı. -->
- Örnek :
- DOM Arayüzü :
HTMLInputElement
- Durum :
- Yaşayan Ölçün
- Öznitelikler :
- Tüm Evrensel Öznitelikler
- Açıklama :
<input>
Etiketi Kullanımı
Markanız için 300X300 alan.
<input>
etiketi genellikle kullanıcıya veriyi değiştirme olanağı tanıyan bir form
denetimiyle birlikte sunulan veri hücresini ifade eder. Bilgisayar teknolojilerinde sıklıkla kullanılan I/O
'da (VeriGirdisi/VeriÇıktısı) I'ya karşılık gelir. Birden fazla amaç için dönüştürülebilir: Seçilebilir yuvarlak ya da kare düğme, metin girişi kutusu ve benzeri... Ayrıca kullanıcının değiştiremeyeceği biçimde (yalnızca okunur - readonly
) ayarlanabilir.
Sahte seçiciler ile (seçili olma durumu ya da geçersiz veri durumu gibi durumlara göre) biçimlendirilebilir.
type
özniteliği veri türünü (ve ilişkilendirilmiş denetimi) ayarlar. type
özniteliği sonlu bir diziden yalnızca bir değer tutan bilen (yani enumerated
) özniteliktir.
<input>
etiketinin birbirinden önemli birden fazla özniteliği vardır. Ancak önemlisi olan type
özniteliği etiketin ne amaç için kullanıldığını belirler. Etikette oluşan duruma type
özniteliğinde kullanılan anahtar sözcükler karar verir. type
özniteliğine color
değerinin girilerek <input>
etiketinin renk seçilebilen bir renk paleti olarak kullanılması gerçekten çok hoş bir düşünce. Renk paletinden renk seçilirse, seçilen rengin değeri <input>
etiketinin value
özniteliğine atanıyor.
Örneklerde form denetiminin type
özniteliğinin değeri ile placeholder
da yazan değer uyuşmuyorsa ve placeholder
değeri text
ise, tarayıcınız o type
değerini (henüz) desteklemiyordur.
<input>
Etiketi Ayarları - type
Özniteliği
-
Durum : Hidden
- Veri Türü :
- Kendi metini
- Denetim Türü :
- Yok
- Açıklama :
<input>
etiketi kullanıcıya gösterilmez ama veriform
ile birlikte sunucuya gönderilir.- Örnek :
- Burada gizli duran bir form denetimi var.
text
-
Durum : Text
- Veri Türü :
- Tek satırlık serbest metin
- Denetim Türü :
- Metin Alanı
- Açıklama :
<input>
etiketi tek satırlık metin tutar. Yeni satır karaterleri kendiliğinden uzaklaştırılır.- Örnek :
search
-
Durum : Search
- Veri Türü :
- Tek satırlık serbest metin
- Denetim Türü :
- Arama Alanı
- Açıklama :
<input>
etiketine arama metni girilmesi için kullanılır. Yeni satır karaterlerini kendiliğinden uzaklaştırır.- Örnek :
tel
-
Durum : Telephone
- Veri Türü :
- Tek satırlık serbest metin
- Denetim Türü :
- Metin Alanı
- Açıklama :
<input>
etiketine telefon numarası girilmesi için kullanılır. Ulusalararası alanda çok çeşitli telefon numarası biçimleri olduğu için herhangi bir biçim sınırlaması yoktur. Kullanıcılarpattern
vemaxlength
gibi özniteliklerle sınırlanabilir. Yeni satır karaterleri kendiliğinden uzaklaştırılır.- Örnek :
url
-
Durum : URL
- Veri Türü :
- Mutlak
URL
- Denetim Türü :
- Metin Alanı
- Açıklama :
<input>
etiketine geçerli birURL
girilmesi için kullanılır.URL
boş metin olabilir. Yeni satır karaterleri kendiliğinden uzaklaştırılır.- Örnek :
email
-
Durum : E-mail
- Veri Türü :
- Bir e-mail adresi ya da e-mail adresi listesi
- Denetim Türü :
- Metin Alanı
- Açıklama :
<input>
etiketine geçerli bire-mail
adresi girilmesi için kullanılır. Değer, boş metin olabilir.- Örnek :
password
-
Durum : Password
- Veri Türü :
- Tek satırlık serbest metin (hassas veri)
- Denetim Türü :
- Girilen Veriyi Örten Metin Alanı
- Açıklama :
<input>
etiketine şifre girilmesi için kullanılır. Kullanıcıların girebileceği karakter sayısımaxlength
ile sınırlandırılabilir.- Örnek :
datetime
-
Durum : Date and Time
- Veri Türü :
- Zaman bölgesi UTC'ye ayarlı günay ve zaman (yıl, ay, gün, saat, dakika, saniye, saniye bölümü) (Universal Coordinated Time (UTC), World Time Standard tarafından belirlenen zaman ayarıdır.)
- Denetim Türü :
- Günay ve Zaman Denetimi
- Açıklama :
<input>
etiketine günay-zaman girilmesi için kullanılır.- Örnek :
date
-
Durum : Date
- Veri Türü :
- (Zaman bölgesi olmaksızın) bir günay (yıl, ay, gün)
- Denetim Türü :
- Günay Denetimi
- Açıklama :
<input>
etiketine günay girilmesi için kullanılır.- Örnek :
month
-
Durum : Month
- Veri Türü :
- (Zaman bölgesi olmaksızın) herhangi bir yılın ayı
- Denetim Türü :
- Ay Denetimi
- Açıklama :
<input>
etiketine (zaman bölgesi olmaksızın) yıl ve ay girilmesi için kullanılır.- Örnek :
week
-
Durum : Week
- Veri Türü :
- (Zaman bölgesi olmaksızın) herhangi bir yıl ve hafta numarası ya da doğrudan hafta numarası
- Denetim Türü :
- Hafta Denetimi
- Açıklama :
<input>
etiketine (zaman bölgesi olmaksızın) hafta-yıl ya da hafta numarası girilmesi için kullanılır.- Örnek :
time
-
Durum : Time
- Veri Türü :
- (Zaman bölgesi olmaksızın) herhangi bir zaman (saat, dakika, saniye, saniye bölümü)
- Denetim Türü :
- Zaman Denetimi
- Açıklama :
<input>
etiketine (zaman bölgesi olmaksızın) zaman girilmesi için kullanılır.- Örnek :
datetime-local
-
Durum : Local Date and Time
- Veri Türü :
- (Zaman bölgesi olmaksızın) herhangi bir günay ve zaman (yıl, ay, gün, saat, dakika, saniye, saniye bölümü).
- Denetim Türü :
- Günay ve Zaman Denetimi
- Açıklama :
<input>
etiketine (zaman bölgesi olmaksızın) günay-zaman girilmesi için kullanılır.- Örnek :
number
-
Durum : Number
- Veri Türü :
- Sayısal bir veri
- Denetim Türü :
- Metin Alanı ya da Spinner Control ? Hata ?
- Açıklama :
<input>
etiketine sayı girilmesi için kullanılır.- Örnek :
range
-
Durum : Range
- Veri Türü :
- Sayısal bir veri, tam değerin önemli olmadığı anlamı ile
- Denetim Türü :
- Sürgü Denetimi ya da benzeri
- Açıklama :
-
<input>
etiketine tam değeri önemli olmayan sayının girilmesi için kullanılır. Değer, sürgü ile ayarlanabilir. Bu öznitelik ile ilişkili (aşağıdaki) öznitelikler ayarlanmadıysa, ayarlanmamış özniteliklerin öntanımlı değerleri:min
: 0max
: 100value
: min + (max-min)/2, ya damin
, eğermax
min
den küçüksestep
: 1
- Örnek :
color
-
Durum : Colour
- Veri Türü :
- 8-bitlik kırmızı, yeşil ve mavi bileşenli bir sRGB rengi
- Denetim Türü :
- Renk Kuyusu
- Açıklama :
<input>
etiketiyle renk seçilebilmesini sağlar.- Örnek :
checkbox
-
Durum : Checkbox
- Veri Türü :
- Önceden tanımlanmış listeden sıfır ya da daha fazla veri
- Denetim Türü :
- Denetim Kutusu
- Açıklama :
-
<input>
etiketiyle seçim yapabilmeyi sağlar.value
özniteliğinde değer tutar. İki durumludur.<input>
etiketi seçili isetrue
, değilsefalse
dir.
-
inputEtiketiSeçicisi.checked = false
<input type="checkbox">
-
inputEtiketiSeçicisi.checked = true
<input type="checkbox">
Aykırı bir durum vardır:indeterminate
, yani kararsızlaştır! Bu özniteliktrue
ise,<input>
etiketinden,<input>
etiketini seçili olduğu ya da olmadığı anlamı çıkarılmaz. Bu yüzden harici bir durumdur veindeterminate
özniteliğinin varlığı<input>
etiketini üç durumlu yapmaz.indeterminate
kullanılmış olsun ya da olmasın<input>
etiketi hep iki durumludur:true
ya dafalse
.
Böyle bir durumda form denetimi farklı platformlarda farklı biçimlerde gösterilir. Örnek olarak Firefox'ta (Win7/32-bit) form denetiminin içi bütünüyle dolu bir biçimde gösterilir:
-
inputEtiketiSeçicisi.indeterminate=true
<input type="checkbox">
Bu durum form denetiminde tıklamayla gerçekleştirilemez. form denetiminde bu durumun gerçekleştirilebilmesi için Javascript gerekir:
<script>document.getElementById("indeterminateÖrnek").indeterminate=true</script>
- Örnek :
radio
-
Durum : Radio Button
- Veri Türü :
- Sonlu diziden tutulmuş bir değer
- Denetim Türü :
- İletişim Tuşu
- Açıklama :
<input>
etiketiyle seçim yapabilmeyi sağlar.value
özniteliğinde değer tutar.for
özniteliğinde aynı ada iye olanradio
düğmeleri, aynı radyo düğmesi öbeğine aittirler ve bir öbekte yalnızca birradio
düğmesi seçilebilir.- Örnek :
file
-
Durum : File Upload
- Veri Türü :
- Her biri
MIME
türü ve seçime bağlı olarak dosya adı ile birlikte sıfır ya da daha fazla dosya - Denetim Türü :
- Bir etiket ve bir tuş
- Açıklama :
<input>
etiketiyle kullanıcının dosya seçebilmesini sağlar. Seçilebilecek dosya türleri içinaccept
özniteliğinden yararlanılabilir.- Örnek :
submit
-
Durum : Submit Button
- Veri Türü :
- Sonlu diziden tutulmuş bir değer, seçili son değer olma ve
form
iletimini başlatma anlamı ile - Denetim Türü :
- Bir tuş
- Açıklama :
- form verilerini gönderen düğme.
- Örnek :
image
-
Durum : Image Button
- Veri Türü :
- Özel bir görselin boyutlarına göreli biçimde koordinat, seçili son değer olma ve
form
iletimini başlatma anlamı ile - Denetim Türü :
- Ya tıklanabilir bir görsel ya da bir tuş
- Açıklama :
- Görsel kullanılarak hazırlanmış gönder düğmesi.
alt
özniteliğine ile görselin gösterilmediği durumlarda yerine kullanılacak metin girilir.src
özniteliğine görselin adresi girilir.width
özniteliği ile görselin genişliği,height
özniteliği ile ise yüksekliği ayarlanabilir. - Örnek :
reset
-
Durum : Reset Button
- Veri Türü :
- Yok
- Denetim Türü :
- Bir tuş
- Açıklama :
- form verilerini öntanımlı değerlerine geri döndüren düğme.
- Örnek :
-
Durum : Button
- Veri Türü :
- Yok
- Denetim Türü :
- Bir tuş
- Açıklama :
- Öntanımlı davranışı belirlenmemiş bir düğme.
- Örnek :
Hidden | Text,Search | URL,Telephone | Password | Date and Time,Date,Month,Week,Time | Local Date and Time | Number | Range | Colour | Checkbox,Radio Button | File Upload | Submit Button | Image Button | Reset Button,Button | ||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
İçerik öznitelikleri | |||||||||||||||
accept | · | · | · | · | · | · | · | · | · | · | · | Var | · | · | · |
alt | · | · | · | · | · | · | · | · | · | · | · | · | · | Var | · |
autocomplete | Var | Var | Var | Var | Var | Var | Var | Var | Var | Var | · | · | · | · | · |
checked | · | · | · | · | · | · | · | · | · | · | Var | · | · | · | · |
dirname | · | Var | · | · | · | · | · | · | · | · | · | · | · | · | · |
formaction | · | · | · | · | · | · | · | · | · | · | · | · | Var | Var | · |
formenctype | · | · | · | · | · | · | · | · | · | · | · | · | Var | Var | · |
formmethod | · | · | · | · | · | · | · | · | · | · | · | · | Var | Var | · |
formnovalidate | · | · | · | · | · | · | · | · | · | · | · | · | Var | Var | · |
formtarget | · | · | · | · | · | · | · | · | · | · | · | · | Var | Var | · |
height | · | · | · | · | · | · | · | · | · | · | · | · | · | Var | · |
inputmode | · | Var | · | · | Var | · | · | · | · | · | · | · | · | · | · |
list | · | Var | Var | Var | · | Var | Var | Var | Var | Var | · | · | · | · | · |
max | · | · | · | · | · | Var | Var | Var | Var | · | · | · | · | · | · |
maxlength | · | Var | Var | Var | Var | · | · | · | · | · | · | · | · | · | · |
min | · | · | · | · | · | Var | Var | Var | Var | · | · | · | · | · | · |
minlength | · | Var | Var | Var | Var | · | · | · | · | · | · | · | · | · | · |
multiple | · | · | · | Var | · | · | · | · | Var | · | · | Var | · | · | · |
pattern | · | Var | Var | Var | Var | · | · | · | · | · | · | · | · | · | · |
placeholder | · | Var | Var | Var | Var | · | · | Var | · | · | · | · | · | · | · |
readonly | · | Var | Var | Var | Var | Var | Var | Var | · | · | · | · | · | · | · |
required | · | Var | Var | Var | Var | Var | Var | Var | · | · | Var | Var | · | · | · |
size | · | Var | Var | Var | Var | · | · | · | · | · | · | · | · | · | · |
src | · | · | · | · | · | · | · | · | · | · | · | · | · | Var | · |
step | · | · | · | · | · | Var | Var | Var | Var | · | · | · | · | · | · |
width | · | · | · | · | · | · | · | · | · | · | · | · | · | Var | · |
IDL öznitelikleri ve yöntemleri | |||||||||||||||
checked | · | · | · | · | · | · | · | · | · | · | Var | · | · | · | · |
files | · | · | · | · | · | · | · | · | · | · | · | Var | · | · | · |
değer | öntanımlı | değer | değer | değer | değer | değer | değer | değer | değer | değer | öntanımlı/on | dosya adı | öntanımlı | öntanımlı | öntanımlı |
valueAsDate | · | · | · | · | · | Var | · | · | · | · | · | · | · | · | · |
valueAsNumber | · | · | · | · | · | Var | Var | Var | Var* | · | · | · | · | · | · |
valueLow | · | · | · | · | · | · | · | · | Var** | · | · | · | · | · | · |
valueHigh | · | · | · | · | · | · | · | · | Var** | · | · | · | · | · | · |
list | · | Var | Var | Var | · | Var | Var | Var | Var | Var | · | · | · | · | · |
select() | · | Var | Var | Var | Var | Var | Var | Var | · | Var | · | Var | · | · | · |
selectionStart | · | Var | Var | · | Var | · | · | · | · | · | · | · | · | · | · |
selectionEnd | · | Var | Var | · | Var | · | · | · | · | · | · | · | · | · | · |
selectionDirection | · | Var | Var | · | Var | · | · | · | · | · | · | · | · | · | · |
setRangeText() | · | Var | Var | · | Var | · | · | · | · | · | · | · | · | · | · |
setSelectionRange() | · | Var | Var | · | Var | · | · | · | · | · | · | · | · | · | · |
stepDown() | · | · | · | · | · | Var | Var | Var | Var | · | · | · | · | · | · |
stepUp() | · | · | · | · | · | Var | Var | Var | Var | · | · | · | · | · | · |
Olaylar | |||||||||||||||
input olayı | · | Var | Var | Var | Var | Var | Var | Var | Var | Var | Var | Var | · | · | · |
change olayı | · | Var | Var | Var | Var | Var | Var | Var | Var | Var | Var | Var | · | · | · |
<input>
Etiketi Tarayıcı Desteği
Tarayıcı →Öznitelik ↓ | |||||
---|---|---|---|---|---|
Temel Destek | 1.0 (<=1.7) | 1.0 | 1.0 | 1.0 | <=2 |
type | 1.0 (<=1.7) | 1.0 | 1.0 | 1.0 | 2 |
type=button | 1.0 (<=1.7) | 1.0 | 1.0 | 1.0 | 3 |
type=checkbox | 1.0 (<=1.7) | 1.0 | 1.0 | 1.0 | 2 |
type=color | 29.0 (29.0) | 11.01 | Yok | 21.0 | Yok |
type=date | Yok | 10.62 | Var (düşünülüyor ama kullanıcı arayüzü yok.) | 5.0 | Beta sürümlerde |
type=datetime | Yok | 10.62 | Var (düşünülüyor ama kullanıcı arayüzü yok.) | Yok (düşünülüyor ama kullanıcı arayüzü yok.) | Yok |
type=datetime-local | Yok | 10.62 | Var (düşünülüyor ama kullanıcı arayüzü yok.) | 5.0 | Yok |
type=email | 4.0 (2.0) | 10.62 | ? | 5.0 | 10 |
type=file | 1.0 (<=1.7) | 1.0 | 1.0 | 1.0 | 3.02 |
type=hidden | 1.0 (<=1.7) | 1.0 | 1.0 | 1.0 | 2 |
type=image | Tıklandığında, artık etiketin ad/değer verisi gönderilmiyor, yerine, Gecko 2.0 yalnızca x ve y koordinatlarını gönderir. | 1.0 | 1.0 | 1.0 | 2 |
type=month | Yok | 10.62 | Var (düşünülüyor ama kullanıcı arayüzü yok.) | 5.0 | Beta Sürümü |
type=number | 29.0 (29.0) | 10.62 | Var | 6.0 (Yerelleştirme Chrome 11'de) | 10 (düşünülüyor ama kullanıcı arayüzü yok.) |
type=password | 1.0 (<=1.7) | 1.0 | 1.0 | 1.0 | 2 |
type=radio | 1.0 (<=1.7) / 3.6 (1.9.2) indeterminate değeri | 1.0 | 1.0 | 1.0 | 2 |
type=range | 23.0 (23.0) | 10.62 (Sürüm 11.01 ile öntanımlı değer desteklendi.) | Var | 5.0 | 10 |
type=reset | 1.0 (<=1.7) | 1.0 | 1.0 | 1.0 | 2.0 |
type=search | 4.0 (2.0) | 11.01 | Var | 5.0 | 10 |
type=submit | 1.0 (<=1.7) | 1.0 | 1.0 | 1.0 | 2 |
type=tel | 4.0 (2.0) | 11.01 | ? | 5.0 | 10 |
type=text | 1.0 (<=1.7) | 1.0 | 1.0 | 1.0 | 2 |
type=time | Yok | 10.62 | Var (düşünülüyor ama kullanıcı arayüzü yok.) | 5.0 | Yok |
type=url | 4.0 (2.0) | 10.62 | ? | 5.0 | 10 |
type=week | Yok | 10.62 | Var (düşünülüyor ama kullanıcı arayüzü yok.) | 5.0 | Beta Sürümü |
accept=[dosya uzantısı] | Yok | ? | Yok | Var | 10 |
accept=[MIME türü] | 16.0 (16.0) | 10 | Yok | 8.0 | 10 |
accept=audio/* | 4.0 (2.0) / Belirtilen ses (audio) dosyası uzantılarını süzer : .aac, .aif, .flac, .iff, .m4a, .m4b, .mid, .midi, .mp3, .mpa, .mpc, .oga, .ogg, .ra, .ram, .snd, .wav, .wma | Yok | Yok | Var | 10 |
accept=video/* | 4.0 (2.0) / Belirtilen video dosyası uzantılarını süzer : .avi, .divx, .flv, .m4v, .mkv, .mov, .mp4, .mpeg, .mpg, .ogm, .ogv, .ogx, .rm, .rmvb, .smil, .webm, .wmv, .xvid | Yok | Yok | Var | 10 |
accept=image/* | 4.0 (2.0) / Belirtilen görsel dosyası uzantılarını süzer : .jpe, .jpg, .jpeg, .gif, .png, .bmp, .ico, .svg, .svgz, .tif, .tiff, .ai, .drw, .pct, .psp, .xcf, .psd, .raw | Yok | Yok | Var | 10 |
accept=[. + uzantı] | 37.0 (37.0) | ? | ? | ? | ? |
accesskey | Var | 1.0 | ? | 1.0 | 6 |
mozactionhint | 4.0 (2.0) | Yok | Yok | Yok | Yok |
autocomplete | 4.0 (2.0) | 9.6 | 5.2 | 17.0 | 5 |
autofocus | 4.0 (2.0) | 9.6 | 5.0 | 5.0 | 10 |
checked | 1.0 (<=1.7) | 1.0 | 1.0 | 1.0 | 2 |
disabled | 1.0 (<=1.7) | 1.0 | 1.0 | 1.0 | 6 |
form | 4.0 (2.0) | 10.62 | ? | 9.0 | ? |
formaction | 4.0 (2.0) | 10.62 | 5.2 | 9.0 | 10 |
formenctype | 4.0 (2.0) | 10.62 | ? | 9.0 | 10 |
formmethod | 4.0 (2.0) | 10.62 | 5.2 | 9.0 | 10 |
formnovalidate | 4.0 (2.0) | 10.62 | ? | 5.0 (Sürüm 6.0'da yalnızca HTML5 doctype ile. HTML5 onayı sürüm 7.0 ile kaldırıldı ve sürüm 10.0 ile yeniden etkinleştirildi.) | 10 |
formtarget | 4.0 (2.0) | 10.62 | 5.2 | 9.0 | 10 |
height | 16.0 (16.0) | 1.0 | ? | 1.0 | ? |
incremental | Yok | Yok | Var | Var | Yok |
inputmode | Yok | Yok | Yok | Yok | Yok |
list | 4.0 (2.0) | 9.6 | Yok | 20.0 | 10 |
max | 16.0 (16.0) | 10.62 | ? | 5.0 | ? |
maxlength | 1.0 (<=1.7) | 1.0 | 1.0 | 1.0 | 2 |
min | 16.0 (16.0) | 10.62 | ? | 5.0 | ? |
minlength | ? | ? | ? | 40.0 | ? |
multiple | 3.6 (1.9.2) (type=file için)/ Var type=email | 1.0 (type=file sürüm 10.62 ile ve type=email sürüm 11.01 ile desteklendi.) | ? | 1.0 (type=file ve type=email sürüm 5.0 ile desteklendi.) | 10 |
name | 1.0 (<=1.7) | 1.0 | 1.0 | 1.0 | 2 |
pattern | 4.0 (2.0) | 9.6 | Yok | 5.0 | 10 |
placeholder | 4.0 (2.0) | 11.00 | 5.0 | 10.0 | 10 |
readonly | 1.0 (<=1.7) | 1.0 | 1.0 | 1.0 | 6 (type checkbox ya da radio ise, eksik) |
required | 4.0 (2.0) | 9.6 | Yok | 5.0 (<select> etiketinde 10'uncu sürüm ile destekleniyor.) | 10 |
size | 1.0 (<=1.7) | 1.0 | 1.0 | 1.0 | 2 |
spellcheck | 3.6 (1.9.2) | 11.0 | 4.0 | 10.0 | 10 |
src | 1.0 (<=1.7) | 1.0 | 1.0 | 1.0 | 2 |
step | 16.0 (16.0) | 10.62 | 5.0 | 6.0 | 10 |
tabindex | 1.0 (<=1.7) | Var | ? | 1.0 | 6 (tabindex 'i sıfırdan büyük olan etiketler gezilemiyor.) |
width | 16.0 (16.0) | 1.0 | ? | 1.0 | ? |
Tarayıcı →Öznitelik ↓ | |||||
---|---|---|---|---|---|
Temel Destek | 4.0 (2.0) | Var | Var | Var | Var |
type | Var | Var | Var | Var | Var |
type=button | Var | Var | Var | Var | Var |
type=checkbox | Var | Var | Var | Var | Var |
type=color | 27.0 (27.0) | Var | ? | ? | ? |
type=date | Yok | 10.62 | 5.0 | Yok | Yok |
type=datetime | Yok | 10.62 | Var | Yok | Yok |
type=datetime-local | Yok | 10.62 | Var | Yok | Yok |
type=email | 4.0 (2.0) | Var | 3.1 (Onaylı değil ancak özel bir klayve eşliğinde) | ? | ? |
type=file | ? | ? | Var [1] | ? | ? |
type=hidden | Var | Var | Var | Var | Var |
type=image | Var | Var | Var | Var | Var |
type=month | Yok | 10.62 | Var | Yok | Yok |
type=number | 29.0 (29.0) | Var | 4.0 (Onaylı değil ancak özel bir klayve eşliğinde) | 2.3 (Onaylı değil ancak özel bir klayve eşliğinde) | ? |
type=password | Var | Var | Var | Var | Var |
type=radio | Var | Var | Var | Var | Var |
type=range | Yok | Var | 5.0 | ? | ? |
type=reset | Var | Var | Var | Var | Var |
type=search | 4.0 (2.0) | 10.62 | 4.0 | ? | ? |
type=submit | Var | Var | Var | Var | Var |
type=tel | 4.0 (2.0) | 10.62 | 3.1 | 2.3 | ? |
type=text | Var | Var | Var | Var | Var |
type=time | Yok | Var | Var | Yok | Yok |
type=url | 4.0 (2.0) | 10.62 | 3.1 (Onaylı değil ancak özel bir klayve eşliğinde) | ? | ? |
type=week | Yok | 10.62 | Var | Yok | Yok |
accept=[dosya uzantısı] | ? | ? | ? | ? | ? |
accept=[MIME türü] | ? | ? | ? | ? | ? |
accept=audio/* | ? | ? | ? | ? | ? |
accept=video/* | ? | ? | ? | ? | ? |
accept=image/* | ? | ? | ? | ? | ? |
accept=[. + uzantı] | 37.0 (37.0) | ? | ? | ? | ? |
accesskey | 1.0 (<=1.7) | ? | ? | ? | ? |
mozactionhint | ? | ? | ? | ? | ? |
autocomplete | 4.0 (2.0) | Var | Var | ? | Var |
autofocus | 4.0 (2.0) | Var | ? | 3.2 | ? |
checked | Var | Var | Var | Var | Var |
disabled | 4.0 (2.0) | Var | Var | Var | Var |
form | ? | ? | ? | ? | ? |
formaction | 4.0 (2.0) | 10.62 | 5.0 | ? | ? |
formenctype | ? | ? | ? | ? | ? |
formmethod | 4.0 (2.0) | 10.62 | 5.0 | ? | ? |
formnovalidate | 4.0 (2.0) | 10.62 | ? | ? | ? |
formtarget | 4.0 (2.0) | 10.62 | 5.0 | ? | ? |
height | 16.0 (16.0) | ? | ? | ? | ? |
incremental | ? | ? | ? | ? | ? |
inputmode | ? | ? | ? | ? | ? |
list | 4.0 (2.0) | Var | ? | Yok | ? |
max | 16.0 (16.0) (Kullanıcı arayüzü yerine getirilmemiş biçimde kalabilir.) | 10.62 | ? | ? | ? |
maxlength | 4.0 (2.0) | Var | Var | Var | Var |
min | 16.0 (16.0) (Kullanıcı arayüzü yerine getirilmemiş biçimde kalabilir.) | 10.62 | ? | ? | ? |
minlength | ? | ? | ? | 27.0 | ? |
multiple | Var | Var | ? | ? | ? |
name | 4.0 (2.0) | Var | 1.0 | Var | Var |
pattern | 4.0 (2.0) | Var | Var | ? | ? |
placeholder | 4.0 (2.0) | 11.10 | 4 | 2.3 | ? |
readonly | 4.0 (2.0) | Var | Var | Var | Var |
required | Var | Var | ? | ? | ? |
size | 4.0 (2.0) | Var | Var | Var | Var |
spellcheck | 4.0 (2.0) | 11.0 | ? | ? | ? |
src | ? | ? | ? | ? | ? |
step | 16.0 (16.0) (Kullanıcı arayüzü yerine getirilmemiş biçimde kalabilir.) | 10.62 | ? | ? | ? |
tabindex | 1.0 (<=1.7) | ? | ? | ? | ? |
width | 16.0 (16.0) | ? | ? | ? | ? |
Öznitelikler
accept
-
accept
özniteliği;type
özniteliğinin değerifile
ise sunucunun kabul ettiği dosya türlerini tanımlar, değilse görmezden gelinir. Birden fazla değer girildiği durumlarda, değerler bir birinden virgül (,
) ile ayrılır.audio/*
- Tüm ses dosyalarının kabul edildiğini belirtir.
video/*
- Tüm video dosyalarının kabul edildiğini belirtir.
image/*
- Tüm görsellerin kabul edildiğini belirtir.
Geliştiriciler dikkat etmeli ki, bir çok dosya uzantısı bir çok yazılım tarafından ortaklaşa kullanılabiliyor ve / veya bu dosya uzantıları kullanıcılar tarafından değiştirilebilir. Kullanıcılar saldırgan olmasa bile, sunucuya gönderilen veriler dikkatle işlenmelidir.
alt
<input>
etiketinin düğme olarak kullanıldığı durumlarda düğmede görsel kullanılıyorsa, görselin gösterilemediği durumda yerine kullanılacak metni tutar. HTML dilinde görsellerin kullanıldığı yerlerdealt
özniteliğinin kullanımı zorunludur ve içerik boş olmayan metin olmak zorundadır.checked
type
özniteliğicheckbox
ya daradio
isechecked
özniteliği<input>
etiketinin işaretlenip işaretlenmediğini tutar.dirname
form
iletimi sırasında içerik yönü belirtilmiş<input>
etiketinin adını (name
) ve içeriğin yönünü (ltr
- soldan sağa,rtl
- sağdan sola) tutar.disabled
- Boolean özniteliktir ve bir
<input>
etiketinde kullanımı ile birlikte kullanıcı o<input>
etiketi ile artık etkileşime geçemez ve de o<input>
etiketinde onay sınırlaması yasaklanır. height
<input>
etiketinde görsel kullanıldığı durumlarda görselin yükseklik değeri.inputmode
-
Tarayıcıya hangi klavyenin gösterilmesi konuşunda ipucu sağlar. Etiketin
type
özniteliğinin değeriemail
,password
,text
ya daurl
ise kullanılır. Alabileceği değerler:verbatim
- Kullanıcı adı ve şifresi ya da ürün kodu gibi düz yazı olmayan içerik.
latin
- Kullanıcının tercih ettiği dilde yazım yardımı için (metin kestirimi gibi). Örneğin arama alanlarındaki gibi insandan-bilgisayara iletişim için.
latin-name
- İnsan adları için.
latin-prose
- Daha zorlu yazım yardımı için. E-maillerde ya da kısa mesajlarda insandan-bilgisayara iletişim için.
full-width-latin
- Latince düz yazı. Kullanıcının ikinci dili olarak, tümcenin baş harfini büyük yapma gibi yazım yardımıyla birlikte, insandan-insana iletişim için. Latince'nin Çince, Japonca ve Korece (
CJK
) ile birlikte kullanıldığı durumlar için düşünüldü. kana
- Kana ya da romaji veri girdisi. Kanjiye dönüştürme desteğiyle. Japonca metinler için.
kana-name
- Kana ya da romaji veri girdisi. Kanjiye dönüştürme desteğiyle. Müşteri listesi gibi durumlar için düşünüldü.
katakana
- Katakana veri girdisi. Kanjiye dönüştürme desteğiyle. Japonca metinler için.
numeric
- Sayısal veri, 0-9 arası rakamlarla, kullanıcının binlik sayıları ayırmada kullanmayı tercih ettiği ayraçla ve eksi sayıları ifade etmede kullanılan karakterle birlikte.
tel
- Telefon girdisi, 0-9 arası rakamlar ve kare
#
ve yıldız*
karakterleriyle birlikte.<input>
etiketinitype
özniteliğitel
değerini alacak biçimde kullanmayı deneyin. email
- E-mail girdisi.
<input>
etiketinitype
özniteliğiemail
değerini alacak biçimde kullanmayı deneyin. url
URL
girdisi.<input>
etiketinitype
özniteliğiurl
değerini alacak biçimde kullanmayı deneyin.
Yukarıdaki listenin kendine özgü kullanım alanları vardır. İşte bu yüzden son üç anahtar sözcüğün (
email
,tel
veurl
) gerekli olduğu durumlara çok az rastlanır.
Son üç anahtar sözcüğün listeye eklenme gerekçesi, listede (mantıken bir) eksiklik olmamasını sağlamak içindir.
list
- Kullanıcıya önerilen değelerlerin listesi. Değeri, aynı belgedeki
<datalist>
etiketinin kimliği (id
) olmalıdır. Tarayıcı yalnızca geçerli olan önerileri gösterir.<input>
etiketinintype
özniteliğibutton
,checkbox
,file
,hidden
ya daradio
ise görmezden gelinir. max
<input>
etiketinin alabileceği en yüksek (günay-zaman ya da sayısal) değeri belirtir ve etiketin alabileceği en düşük (min
) değerden küçük olamaz.maxlength
type
özniteliğiemail
,password
,search
,tel
,text
ya daurl
ise kullanıcının<input>
etiketine girebileceği (Unicode türünden) karakterlerin toplam sayısını belirtir, diğer durumlardasize
özniteliğini geçebilir.
Kullanılmaması ya da eksi değer kullanılması durumunda öntanımlı davranış geçerlidir ve kullanıcı<input>
etiketine sınırsız sayıda karakter girebilir.min
<input>
etiketinin alabileceği en düşük (günay-zaman ya da sayısal) değeri belirtir ve<input>
etiketinin alabileceği en yüksek (max
) değerden büyük olamaz.minlength
<input>
etiketinintype
özniteliğiemail
,password
,search
,tel
,text
ya daurl
ise kullanıcının en az girebileceği (Unicode türünden) karakterlerin sayısını belirtir, diğer durumlarda görmezden gelinir.multiple
- Kullanıcının
<input>
etiketine birden fazla değer girip giremeyeceğini belirler.type
özniteliğiemail
ya dafile
değilse görmezden gelinir. name
form
denetiminin adı.pattern
-
form
denetiminin değeri (value
), kural ifadeleriyle (regular expression
) denetlenebilir.pattern
, değerin yalnızca bir bölümüyle değil tamamıyla uyuşmalıdır. Etiketintitle
özniteliği kullanılarak kullanıcıya kural ifadeleriyle ilgili yardımcı olunmalıdır;Yalnızca rakam girin
ya daNoktalama işareti kullanmayın
gibi... Bu öznitelik, etiketintype
özniteliği eğeremail
,search
,text
,tel
ya daurl
ise geçerlidir, değilse görmezden gelinir. Kural ifadeleri, Javascript'teki kural ifadeleriyle aynıdır ancak HTML kural ifadeleri ileri yatık çizgiyle (/
) çevrelenmez.
Benim bazıform
denetimlerimde kural ifadesi olarak^[a-zA-Z ÇçğĞİıÖöŞşüÜ]*$
kullanıldı. Yalnızca İngiliz alfabesindeki harfler büyük ya da küçük olarak, boşluk ve Türkçe karakterler kullanılabilir.
<input type="text" name="ad" id="yorumAd" pattern="^[a-zA-Z ÇçğĞİıÖöŞşüÜ]*$">
Böylece kullanıcı ad ve soyad kutularına yalnızca harf girebilir. Harf dışında bir karakter girilmesi durumunda, etiketin üzerine fare (ve benzeri bir aygıt) ile gidilirse, tarayıcı:Lütfen istenen biçime uyun
ve benzeri bir uyarı metni gösterirdi. Böyle bir durumdaform
denetimininvalidity
IDL'sininvalid
anahtarıfalse
değerini almış demektir.
inputEtiketiSeçicisi.validty.valid
Benim yorum kutularımda bu söz konusu değil çünkü ben kullanıcının her karakter girişinde, aynı kural ifadesini Javascript ile kullanarak, eğer varsa, yasak karekterleri uzaklaştırıyorum. Ve bu durumu renk efektiyle gösteriyorum. readonly
-
Yalnızca okunur. Boolean özniteliktir ve kullanıcının içeriği değiştirip değiştiremeyeceğini belirler. Özniteliğin kullanımıyla, kullanıcı içeriği artık değiştiremez.
readonly
kullanımı sırasında, -disabled
özniteliğinin tersine-form
denetimineautofocus
uygulanabilir, kullanıcı metin seçebilir veform
denetimiyle etkileşime geçebilir.readonly
kullanımıyla etikette onay sınırlaması (constraint validation) yasaklanır.<input>
etiketinin kullanılırsaa etiketintype
özniteliğinin değerihidden
,range
,checkbox
,radio
,file
ya dabutton
ise görmezden gelinir. required
-
Boolean özniteliktir.
form
gönderilmeden önce, kullanıcınınform
denetimini doldurmak zorunda olduğunu belirtir.type
özniteliğinin değerihidden
,image
ya dabutton
ise kullanılamaz.Bu sayfadaki CSS Sahte Seçicileri bölümüne bakın.
size
type
özniteliğiemail
,password
,search
,tel
,text
ya daurl
iseform
denetiminde kullanılan karakterlerin sayısını belirten ve kullanılması durumunda değer olarak sıfırdan büyük bir tam sayı alan özniteliktir.src
<input>
etiketinde görsel kullanıldığı durumlarda görselinURL
si. Boş olmayan geçerli birURL
olmak zorunda.step
- Günay-zaman ya da sayısal değerlerde, değer değişiminin sınırlandırılmasında (ne kadar olacağının belirlenmesinde) kullanılır. Sıfırdan büyük bir sayı ya da herhangi bir anlamına gelen ingilizce any sözcüğü olmak zorundadır.
type
<input>
etiketinintype
özniteliği sayfanın başında ayrıntılı olarak incelenmiştir.value
form
denetiminin değeri.width
<input>
etiketinin görsel kullanıldığı durumlarda görselin genişlik değeri.title
title
özniteliğinin<input>
etiketinde özel bir anlamı vardır. Eğerpattern
özniteliği kullanılırsa,pattern
özniteliğini açıklar.
İlişkili CSS Sahte Seçicileri
:invalid
- geçersiz
:optional
- isteğe bağlı
:required
- zorunlu
:valid
- geçerli