HTML

HTML input Kullanımı

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.

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.

İ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.

input elementleri tek başına kullanılmazlar. Genellikle bir form etiketi içinde tanımlanarak kullanılırlar.

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

Yorum yapmak için tıklayın