Sen burayı gördün, başkası da görecek. Teklifini gönder, sitenin kahramanı ol.

Sponsor'un katkılarıyla...

<input> Etiketi

<input> Etiketi

<input> etiketi genellikle kullanıcıya veriyi değiştirme olanağı tanıyan bir form denetimiyle birlikte sunulan veri hücresini tanımlar.

/ 19.05.1919?

Yazar:
SonDevrimBu Yazı
Toplam284482286
Bugün373

<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ı

Sponsor'un katkılarıyla...

Markanız için 300X300 alan.

Reklamı kapat görseli

<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 placeholderda 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

hidden
Durum : Hidden
Veri Türü :
Kendi metini
Denetim Türü :
Yok
Açıklama :
<input> etiketi kullanıcıya gösterilmez ama veri form 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ılar pattern ve maxlength 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 bir URL 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 bir e-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 : 0
  • max : 100
  • value : min + (max-min)/2, ya da min, eğer max minden küçükse
  • step : 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 ise true, değilse falsedir.

- 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 öznitelik true ise, <input> etiketinden, <input> etiketini seçili olduğu ya da olmadığı anlamı çıkarılmaz. Bu yüzden harici bir durumdur ve indeterminate özniteliğinin varlığı <input> etiketini üç durumlu yapmaz. indeterminate kullanılmış olsun ya da olmasın <input> etiketi hep iki durumludur: true ya da false.
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 olan radio düğmeleri, aynı radyo düğmesi öbeğine aittirler ve bir öbekte yalnızca bir radio 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çin accept ö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 :
button
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 E-mail 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·
autocompleteVarVarVarVarVarVarVarVarVarVar·····
checked··········Var····
dirname·Var·············
formaction············VarVar·
formenctype············VarVar·
formmethod············VarVar·
formnovalidate············VarVar·
formtarget············VarVar·
height·············Var·
inputmode·Var··Var··········
list·VarVarVar·VarVarVarVarVar·····
max·····VarVarVarVar······
maxlength·VarVarVarVar··········
min·····VarVarVarVar······
minlength·VarVarVarVar··········
multiple·· · Var····Var··Var···
pattern·VarVarVarVar··········
placeholder·VarVarVarVar··Var·······
readonly·VarVarVarVarVarVarVar·······
required·VarVarVarVarVarVarVar··VarVar···
size·VarVarVarVar··········
src·············Var·
step·····VarVarVarVar······
width·············Var·
IDL öznitelikleri ve yöntemleri
checked··········Var····
files···········Var···
değeröntanımlıdeğerdeğerdeğerdeğerdeğerdeğerdeğerdeğerdeğeröntanımlı/ondosya adıöntanımlıöntanımlıöntanımlı
valueAsDate·····Var·········
valueAsNumber·····VarVarVar Var*······
valueLow········ Var** ······
valueHigh········ Var** ······
list·VarVarVar·VarVarVarVarVar·····
select()·VarVarVarVarVarVarVar·Var·Var···
selectionStart·VarVar·Var··········
selectionEnd·VarVar·Var··········
selectionDirection·VarVar·Var··········
setRangeText()·VarVar·Var··········
setSelectionRange()·VarVar·Var··········
stepDown()·····VarVarVarVar······
stepUp()·····VarVarVarVar······
Olaylar
input olayı·VarVarVarVarVarVarVarVarVarVarVar···
change olayı·VarVarVarVarVarVarVarVarVarVarVar···

<input> Etiketi Tarayıcı Desteği

MasaüstüTaşınabilir
Tarayıcı →Öznitelik ↓
Temel Destek1.0 (<=1.7)1.01.01.0<=2
type1.0 (<=1.7)1.01.01.02
type=button1.0 (<=1.7)1.01.01.03
type=checkbox1.0 (<=1.7)1.01.01.02
type=color29.0 (29.0)11.01Yok21.0Yok
type=dateYok10.62Var (düşünülüyor ama kullanıcı arayüzü yok.)5.0Beta sürümlerde
type=datetimeYok10.62Var (düşünülüyor ama kullanıcı arayüzü yok.)Yok (düşünülüyor ama kullanıcı arayüzü yok.)Yok
type=datetime-localYok10.62Var (düşünülüyor ama kullanıcı arayüzü yok.)5.0Yok
type=email4.0 (2.0)10.62?5.010
type=file1.0 (<=1.7)1.01.01.03.02
type=hidden1.0 (<=1.7)1.01.01.02
type=imageTı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.01.01.02
type=monthYok10.62Var (düşünülüyor ama kullanıcı arayüzü yok.)5.0Beta Sürümü
type=number29.0 (29.0)10.62Var6.0 (Yerelleştirme Chrome 11'de)10 (düşünülüyor ama kullanıcı arayüzü yok.)
type=password1.0 (<=1.7)1.01.01.02
type=radio1.0 (<=1.7)
/
3.6 (1.9.2) indeterminate değeri
1.01.01.02
type=range23.0 (23.0)10.62 (Sürüm 11.01 ile öntanımlı değer desteklendi.)Var5.010
type=reset1.0 (<=1.7)1.01.01.02.0
type=search4.0 (2.0)11.01Var5.010
type=submit1.0 (<=1.7)1.01.01.02
type=tel4.0 (2.0)11.01?5.010
type=text1.0 (<=1.7)1.01.01.02
type=timeYok10.62Var (düşünülüyor ama kullanıcı arayüzü yok.)5.0Yok
type=url4.0 (2.0)10.62?5.010
type=weekYok10.62Var (düşünülüyor ama kullanıcı arayüzü yok.)5.0Beta Sürümü
accept=[dosya uzantısı]Yok?YokVar10
accept=[MIME türü]16.0 (16.0)10Yok8.010
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
YokYokVar10
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
YokYokVar10
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
YokYokVar10
accept=[. + uzantı]37.0 (37.0)????
accesskeyVar1.0?1.06
mozactionhint4.0 (2.0)YokYokYokYok
autocomplete4.0 (2.0)9.65.217.05
autofocus4.0 (2.0)9.65.05.010
checked1.0 (<=1.7)1.01.01.02
disabled1.0 (<=1.7)1.01.01.06
form4.0 (2.0)10.62?9.0?
formaction4.0 (2.0)10.625.29.010
formenctype4.0 (2.0)10.62?9.010
formmethod4.0 (2.0)10.625.29.010
formnovalidate4.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
formtarget4.0 (2.0)10.625.29.010
height16.0 (16.0)1.0?1.0?
incrementalYokYokVarVarYok
inputmodeYokYokYokYokYok
list4.0 (2.0)9.6Yok20.010
max16.0 (16.0)10.62?5.0?
maxlength1.0 (<=1.7)1.01.01.02
min16.0 (16.0)10.62?5.0?
minlength???40.0?
multiple3.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
name1.0 (<=1.7)1.01.01.02
pattern4.0 (2.0)9.6Yok5.010
placeholder4.0 (2.0)11.005.010.010
readonly1.0 (<=1.7)1.01.01.06 (type checkbox ya da radio ise, eksik)
required4.0 (2.0)9.6Yok5.0 (<select> etiketinde 10'uncu sürüm ile destekleniyor.)10
size1.0 (<=1.7)1.01.01.02
spellcheck3.6 (1.9.2)11.04.010.010
src1.0 (<=1.7)1.01.01.02
step16.0 (16.0)10.625.06.010
tabindex1.0 (<=1.7)Var?1.06 (tabindex'i sıfırdan büyük olan etiketler gezilemiyor.)
width16.0 (16.0)1.0?1.0?
Tarayıcı →Öznitelik ↓
Temel Destek4.0 (2.0)VarVarVarVar
typeVarVarVarVarVar
type=buttonVarVarVarVarVar
type=checkboxVarVarVarVarVar
type=color27.0 (27.0)Var???
type=dateYok10.625.0YokYok
type=datetimeYok10.62VarYokYok
type=datetime-localYok10.62VarYokYok
type=email4.0 (2.0)Var3.1 (Onaylı değil ancak özel bir klayve eşliğinde)??
type=file??Var [1]??
type=hiddenVarVarVarVarVar
type=imageVarVarVarVarVar
type=monthYok10.62VarYokYok
type=number29.0 (29.0)Var4.0 (Onaylı değil ancak özel bir klayve eşliğinde)2.3 (Onaylı değil ancak özel bir klayve eşliğinde)?
type=passwordVarVarVarVarVar
type=radioVarVarVarVarVar
type=rangeYokVar5.0??
type=resetVarVarVarVarVar
type=search4.0 (2.0)10.624.0??
type=submitVarVarVarVarVar
type=tel4.0 (2.0)10.623.12.3?
type=textVarVarVarVarVar
type=timeYokVarVarYokYok
type=url4.0 (2.0)10.623.1 (Onaylı değil ancak özel bir klayve eşliğinde)??
type=weekYok10.62VarYokYok
accept=[dosya uzantısı]?????
accept=[MIME türü]?????
accept=audio/*?????
accept=video/*?????
accept=image/*?????
accept=[. + uzantı]37.0 (37.0)????
accesskey1.0 (<=1.7)????
mozactionhint?????
autocomplete4.0 (2.0)VarVar?Var
autofocus4.0 (2.0)Var?3.2?
checkedVarVarVarVarVar
disabled4.0 (2.0)VarVarVarVar
form?????
formaction4.0 (2.0)10.625.0??
formenctype?????
formmethod4.0 (2.0)10.625.0??
formnovalidate4.0 (2.0)10.62???
formtarget4.0 (2.0)10.625.0??
height16.0 (16.0)????
incremental?????
inputmode?????
list4.0 (2.0)Var?Yok?
max16.0 (16.0) (Kullanıcı arayüzü yerine getirilmemiş biçimde kalabilir.)10.62???
maxlength4.0 (2.0)VarVarVarVar
min16.0 (16.0) (Kullanıcı arayüzü yerine getirilmemiş biçimde kalabilir.)10.62???
minlength???27.0?
multipleVarVar???
name4.0 (2.0)Var1.0VarVar
pattern4.0 (2.0)VarVar??
placeholder4.0 (2.0)11.1042.3?
readonly4.0 (2.0)VarVarVarVar
requiredVarVar???
size4.0 (2.0)VarVarVarVar
spellcheck4.0 (2.0)11.0???
src?????
step16.0 (16.0) (Kullanıcı arayüzü yerine getirilmemiş biçimde kalabilir.)10.62???
tabindex1.0 (<=1.7)????
width16.0 (16.0)????

Kaynak: Mozilla Geliştirici Ağı - MDN 10 Yaşında - CC-BY-SA 2.5

Öznitelikler

accept
accept özniteliği; type özniteliğinin değeri file 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ığı yerlerde alt özniteliğinin kullanımı zorunludur ve içerik boş olmayan metin olmak zorundadır.
checked
type özniteliği checkbox ya da radio ise checked ö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ğeri email, password, text ya da url 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> etiketini type özniteliği tel değerini alacak biçimde kullanmayı deneyin.
email
E-mail girdisi. <input> etiketini type özniteliği email değerini alacak biçimde kullanmayı deneyin.
url
URL girdisi. <input> etiketini type özniteliği url 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 ve url) 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> etiketinin type özniteliği button, checkbox, file, hidden ya da radio 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ği email, password, search, tel, text ya da url ise kullanıcının <input> etiketine girebileceği (Unicode türünden) karakterlerin toplam sayısını belirtir, diğer durumlarda size ö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> etiketinin type özniteliği email, password, search, tel, text ya da url 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ği email ya da file 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. Etiketin title özniteliği kullanılarak kullanıcıya kural ifadeleriyle ilgili yardımcı olunmalıdır; Yalnızca rakam girin ya da Noktalama işareti kullanmayın gibi... Bu öznitelik, etiketin type özniteliği eğer email, search, text, tel ya da url 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 durumda form denetiminin validity IDL'sinin valid 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 denetimine autofocus uygulanabilir, kullanıcı metin seçebilir ve form denetimiyle etkileşime geçebilir. readonly kullanımıyla etikette onay sınırlaması (constraint validation) yasaklanır.

<input> etiketinin kullanılırsaa etiketin type özniteliğinin değeri hidden, range, checkbox, radio, file ya da button ise görmezden gelinir.

required
Boolean özniteliktir. form gönderilmeden önce, kullanıcının form denetimini doldurmak zorunda olduğunu belirtir. type özniteliğinin değeri hidden, image ya da button ise kullanılamaz.

Bu sayfadaki CSS Sahte Seçicileri bölümüne bakın.

size
type özniteliği email, password, search, tel, text ya da url ise form 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örselin URLsi. Boş olmayan geçerli bir URL 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> etiketinin type ö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ğer pattern ö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

İlişkili Etiketler

<button> etiketi

<form> etiketi

<textarea> etiketi

Reklamı kapat görseli

Görüş Bildirin?

Toplam Oy Sayısı : Şimdilik hiç oy verilmemiş.

Ortalama Oy Değeri : Verilen oyun geçerli olması için yapılan yorumun onaylanması gerekiyor.

Görüşler yükleniyor . . .

Yorum Ekle?

1000
<input> Etiketi