Tanım ve Kullanım
- <input> etiketi, kullanıcının veri girebileceği bir giriş alanını belirtir.
- <input> öğesi, en önemli form öğesidir.
- <input> öğesi, type özelliğine bağlı olarak birkaç şekilde görüntülenebilir.
type niteliğinde “text” değerine sahip olan input öğesi, metin girişi için bir alanı temsil eder. Bu alanla ilişkili kontrol, kullanıcıların tek bir satır düz metin düzenlemesine olanak tanıyan bir metin kutusudur. Metin kontrolleri, başlıklar, adlar, soyadlar, kısa açıklamalar, anahtar kelimeler, etiketler vb. gibi kısa metinleri toplamak için kullanışlıdır. En basit haliyle şöyle oluşturulur.
1 2 3 | <input type="text"> |
Ancak bu şekilde oluşturmak yeterli değildir. Sunucularda kullanılabilmesi için name ve tarayıcı tarafında scriptler ile çalışabilmesi için id niteliklerine de ihtiyaç duyulmaktadır.
1 2 3 | <input type="text" id="soyad" name="soyad"> |
İlk örneğimizde, üç metin input kontrolüne sahip bir form oluşturacağız. Sayfaya göz atan kullanıcının Ahmet olduğundan neredeyse emin olduğumuzdan, adını ilk kontrolün value özelliğine yerleştireceğiz.
Üçüncü kontrolde, HTML5’te tanıtılan yer tutucu özelliğini kullanacağız. Bu öznitelik, örnekler veya kısa açıklamalar gibi denetimde sağlanması beklenen veriler hakkında bir ipucu vermemizi sağlar. Bu placeholder, kontrolün içinde (sanki değermiş gibi) yalnızca kontrolün gerçek bir değeri olmadığında görüntülenecektir. Kullanıcı yazmaya başladığında, yer tutucu metin kontrolden kaldırılacaktır.
1 2 3 4 5 | Ad: <input type="text" name="ad" value="Ahmet"><br> Soyad: <input type="text" name="soyad"><br> Favori Renk: <input type="text" name="renk" placeholder="Favori Renk?"> |
input elementleri tek başına kullanılmazlar. Genellikle bir form etiketi içinde tanımlanarak kullanılırlar.
1 2 3 4 5 6 7 | <form action="kayit-sayfasi" method="post"> Ad: <input type="text" name="ad" /> Soyad: <input type="text" name="soyad" /> <input type="submit" value="Formu Gönder" /> </form> |
Farklı input kontrolleri
<input type="button">
<input type="checkbox">
<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="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
(varsayılan değer)<input type="time">
<input type="url">
<input type="week">
HTML input Nitelikleri(Attribute)
Attribute | Değer | Tanımı |
---|---|---|
accept | file_extension audio/* video/* image/* media_type | Kullanıcının dosya girişi iletişim kutusundan seçebileceği dosya türleri için bir filtre belirtir (yalnızca type = “file” için) |
alt | text | Resimler için alternatif bir metin belirtir (yalnızca type = “image” için) |
autocomplete | on off | Bir <input> öğesinin otomatik tamamlamanın etkinleştirilip etkinleştirilmeyeceğini belirtir |
autofocus | autofocus | Sayfa yüklendiğinde bir <input> öğesinin otomatik olarak odaklanması gerektiğini belirtir |
checked | checked | Sayfa yüklendiğinde bir <input> öğesinin önceden seçilmesi gerektiğini belirtir (type = “checkbox” veya type = “radio” için) |
dirname | inputname.dir | Metin yönünün gönderileceğini belirtir |
disabled | disabled | Bir <input> öğesinin devre dışı bırakılması gerektiğini belirtir |
form | form_id | <input> elemanının ait olduğu formu belirtir |
formaction | URL | Form gönderildiğinde giriş denetimini işleyecek dosyanın URL’sini belirtir (type = “submit” ve type = “image” için) |
formenctype | application/x-www-form-urlencoded multipart/form-data text/plain | Sunucuya gönderirken form verilerinin nasıl kodlanması gerektiğini belirtir (type = “submit” ve type = “image” için) |
formmethod | get post | Eylem URL’sine veri göndermek için HTTP yöntemini tanımlar (type = “submit” ve type = “image” için) |
formnovalidate | formnovalidate | Form öğelerinin gönderildiğinde doğrulanmaması gerektiğini tanımlar |
formtarget | _blank _self _parent _top framename | Formu gönderdikten sonra alınan yanıtın nerede görüntüleneceğini belirtir (type = “submit” ve type = “image” için) |
height | pixels | Bir <input> öğesinin yüksekliğini belirtir (yalnızca type = “image” için) |
list | datalist_id | Bir <input> öğesi için önceden tanımlanmış seçenekleri içeren bir <datalist> öğesini ifade eder |
max | number date | <input> öğesi için maksimum değeri belirtir |
maxlength | number | <input> öğesinde izin verilen maksimum karakter sayısını belirtir |
min | number date | <input> öğesi için minimum bir değer belirtir |
minlength | number | Bir <input> öğesinde gerekli olan minimum karakter sayısını belirtir |
multiple | multiple | Bir kullanıcının bir <input> öğesine birden fazla değer girebileceğini belirtir |
name | text | <input> öğesinin adını belirtir |
pattern | regexp | <input> öğesinin değerinin kontrol edildiği normal bir ifadeyi belirtir |
placeholder | text | Bir <input> öğesinin beklenen değerini açıklayan kısa bir ipucu belirtir |
readonly | readonly | Bir giriş alanının salt okunur olduğunu belirtir |
required | required | Formu göndermeden önce bir giriş alanının doldurulması gerektiğini belirtir |
size | number | Bir <input> elemanının karakter cinsinden genişliğini belirtir |
src | URL | Gönder düğmesi olarak kullanılacak resmin URL’sini belirtir (yalnızca tür = “resim” için) |
step | number any | Bir giriş alanındaki yasal numaralar arasındaki aralığı belirtir |
type | button checkbox color date datetime-local file hidden image month number password radio range reset search submit tel text time url week | Görüntülenecek <input> öğesinin türünü belirtir |
value | text | <input> öğesinin değerini belirtir |
width | pixels | Bir <input> öğesinin genişliğini belirtir (yalnızca type = “image” için) |
1 Yorum