HTML input Kullanımı – Tasarım Kodlama
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)

AttributeDeğerTanımı
acceptfile_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)
alttextResimler için alternatif bir metin belirtir (yalnızca type = “image” için)
autocompleteon
off
Bir <input> öğesinin otomatik tamamlamanın etkinleştirilip etkinleştirilmeyeceğini belirtir
autofocusautofocusSayfa yüklendiğinde bir <input> öğesinin otomatik olarak odaklanması gerektiğini belirtir
checkedcheckedSayfa yüklendiğinde bir <input> öğesinin önceden seçilmesi gerektiğini belirtir (type = “checkbox” veya type = “radio” için)
dirnameinputname.dirMetin yönünün gönderileceğini belirtir
disableddisabledBir <input> öğesinin devre dışı bırakılması gerektiğini belirtir
formform_id<input> elemanının ait olduğu formu belirtir
formactionURLForm gönderildiğinde giriş denetimini işleyecek dosyanın URL’sini belirtir (type = “submit” ve type = “image” için)
formenctypeapplication/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)
formmethodget
post
Eylem URL’sine veri göndermek için HTTP yöntemini tanımlar (type = “submit” ve type = “image” için)
formnovalidateformnovalidateForm öğ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)
heightpixelsBir <input> öğesinin yüksekliğini belirtir (yalnızca type = “image” için)
listdatalist_idBir <input> öğesi için önceden tanımlanmış seçenekleri içeren bir <datalist> öğesini ifade eder
maxnumber
date
<input> öğesi için maksimum değeri belirtir
maxlengthnumber<input> öğesinde izin verilen maksimum karakter sayısını belirtir
minnumber
date
<input> öğesi için minimum bir değer belirtir
minlengthnumberBir <input> öğesinde gerekli olan minimum karakter sayısını belirtir
multiplemultipleBir kullanıcının bir <input> öğesine birden fazla değer girebileceğini belirtir
nametext<input> öğesinin adını belirtir
patternregexp<input> öğesinin değerinin kontrol edildiği normal bir ifadeyi belirtir
placeholdertextBir <input> öğesinin beklenen değerini açıklayan kısa bir ipucu belirtir
readonlyreadonlyBir giriş alanının salt okunur olduğunu belirtir
requiredrequiredFormu göndermeden önce bir giriş alanının doldurulması gerektiğini belirtir
sizenumberBir <input> elemanının karakter cinsinden genişliğini belirtir
srcURLGönder düğmesi olarak kullanılacak resmin URL’sini belirtir (yalnızca tür = “resim” için)
stepnumber
any
Bir giriş alanındaki yasal numaralar arasındaki aralığı belirtir
typebutton
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
valuetext<input> öğesinin değerini belirtir
widthpixelsBir <input> öğesinin genişliğini belirtir (yalnızca type = “image” için)

1 Yorum

Yorum bırak