Bu bölümde <input> HTML etiketinin farklı niteliklerini açıklamaya çalışacağım.
value Niteliği
value özelliği, bir giriş alanı için bir varsayılan başlangıç değeri belirtir:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form>
<label for="ad">Ad:</label><br>
<input type="text" id="ad" name="ad" value="Turk"><br>
<label for="soyad">Soyad:</label><br>
<input type="text" id="soyad" name="soyad" value="Yazilimci">
</form>
</body>
</html>
readonly Niteliği
readonly yani Salt okunur giriş özelliği, bir giriş alanının salt okunur olduğunu belirtir.
Salt okunur bir giriş alanı değiştirilemez (ancak kullanıcı sekmeyle bu alana gidebilir, onu vurgulayabilir ve buradan metni kopyalayabilir).
Formu gönderirken salt okunur giriş alanının kendi değeri gönderilir.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form>
<label for="ad">Ad:</label><br>
<input type="text" id="ad" name="ad" value="Turk" readonly><br>
<label for="soyad">Soyad:</label><br>
<input type="text" id="soyad" name="soyad" value="Yazilimci">
</form>
</body>
</html>
Örneği deneyerek sonucu görebilirsiniz.
disabled Niteliği
disabled yani devre dışı özelliği, bir giriş alanının devre dışı bırakıldığını belirtir.
Devre dışı bırakılmış bir giriş alanı kullanılamaz ve tıklatılamaz.
Form gönderilirken devre dışı bırakılan giriş alanının değeri gönderilmez.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form>
<label for="ad">Ad:</label><br>
<input type="text" id="ad" name="ad" value="Turk" disabled><br>
<label for="soyad">Soyad:</label><br>
<input type="text" id="soyad" name="soyad" value="Yazilimci">
</form>
</body>
</html>
size Niteliği
size yani Giriş boyutu özelliği, bir giriş alanının karakter cinsinden görünür genişliğini belirtir. Boyut için varsayılan değer 20’dir.
Not: Size özelliği metin, arama, tel, url, e-posta ve şifre alanlarıyla çalışır.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form>
<label for="ad">Ad:</label><br>
<input type="text" id="ad" name="ad" value="Turk" size="50"><br>
<label for="soyad">Soyad:</label><br>
<input type="text" id="soyad" name="soyad" value="Yazilimci" size="15">
</form>
</body>
</html>maxlength Niteliği
maxlength yani maksimum uzunluğu özelliği, bir giriş alanında izin verilen maksimum karakter sayısını belirtir.
Not: Maksimum uzunluk ayarlandığında, giriş alanı belirtilen sayıda karakterden fazlasını kabul etmez. Ancak bu özellik herhangi bir geri bildirim sağlamaz. Yani kullanıcıyı uyarmak istiyorsanız JavaScript kodu yazmalısınız.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form>
<label for="ad">Ad:</label><br>
<input type="text" id="ad" name="ad" value="Turk" size="50"><br>
<label for="soyad">Soyad:</label><br>
<input type="text" id="soyad" name="soyad" value="Yazilimci" maxlength="10" size="10">
</form>
</body>
</html>min ve max Niteliği
min ve max yani minimum ve maksimum nitelikleri, bir giriş alanı için minimum ve maksimum değerleri belirtir.
Min ve max nitelikleri sayı, aralık, tarih, tarihsaat-yerel, ay, saat ve hafta giriş türleriyle çalışır.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form>
<label for="datemax">1980-01-01 öncesi tarih girin</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">2000-01-01 sonrası tarih girin</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>
<label for="quantity">1-5 arası puan verin</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
</body>
</html>
multiple Niteliği
multiple yani çoklu giriş özelliği, kullanıcının bir giriş alanına birden fazla değer girmesine izin verildiğini belirtir.
Bu özellik e-posta ve dosya giriş türleriyle çalışır.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form>
<label for="files">Dosya Seçin:</label>
<input type="file" id="files" name="files" multiple>
</form>
</body>
</html>
pattern Niteliği
pattern yani giriş modeli özelliği, form gönderildiğinde giriş alanının değerinin kontrol edildiği normal bir ifadeyi belirtir. Bu özellik metin, tarih, arama, url, tel, e-posta ve şifre girişleriyle çalışır.
Aşağıdaki örnekte yalnızca üç harf içerebilen (sayı veya özel karakter içermeyen) bir giriş alanı yer almaktadır.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form>
<label for="dilkodu">Dil Kodu:</label>
<input type="text" id="dilkodu" name="dilkodu"
pattern="[A-Za-z]{2}" title="2 Haneli Dil Kodu">
</form>
</body>
</html>placeholder Niteliği
placeholder yani yer tutucu özelliği, bir giriş alanının beklenen değerini (örnek değer veya beklenen formatın kısa açıklaması) açıklayan kısa bir ipucu belirtir.
Kullanıcı bir değer girmeden önce giriş alanında kısa ipucu görüntülenir.
Yer tutucu özelliği şu giriş türleriyle çalışır: metin, arama, url, tel, e-posta ve şifre.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form>
<label for="telefon">Telefon Numarası:</label>
<input type="tel" id="telefon" name="telefon"
placeholder="123-456-78-90"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{2}-[0-9]{2}">
</form>
</body>
</html>
required Niteliği
required yani gerekli özelliği, formu göndermeden önce bir giriş alanının doldurulması gerektiğini belirtir.
Bu özellik şu giriş türleriyle çalışır: metin, arama, url, tel, e-posta, şifre, tarih seçiciler, numara, onay kutusu, radyo ve dosya.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form>
<label for="kadi">Kullanıcı Adı:</label>
<input type="text" id="kadi" name="kadi" required>
</form>
</body>
</html>
step Niteliği
step özelliği giriş alanı için sayı aralığı belirtir. Örneğin step=”3″ ise sayılar -3,0,3,6 vb. olabilir.
NOT: bu nitelik bir dizi sayısal değer oluşturmak için max ve min değerleriyle kullanılabilir. Step özelliği sayı,range(aralık), tarih,tarih saat yerel ay, saat ve hafta ile kullanılabilir.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form>
<label for="puan">Puan:</label>
<input type="number" id="puan" name="puan" step="3">
</form>
</body>
</html>
Not: Step ile giriş kısıtlaması kusursuz bir şekilde çalışmaz. Javascript dili kısıtlamayı sağlamak için bir çok yol sağlar. Buna rağmen kısıtlama özelliği sunucu tarafında da kontrol edilmelidir.
autofocus Niteliği
autofocus yani otomatik odaklama, sayfa yüklendiğinde bir girişin otomatik olarak seçilmesini sağlar. Bunu en iyi aşağıdaki örnekte görebiliriz.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form>
<label for="ad">Ad:</label><br>
<input type="text" id="ad" name="ad" autofocus><br>
<label for="sad">Soyad:</label><br>
<input type="text" id="sad" name="sad">
</form>
</body>
</html>
height ve weight Nitelikleri
<input type=”image”> yani resim girişi ile çalışan özelliklerdir. Resmin boyutlarının belirlenmesini sağlar.
Not : Görsellerin her zaman hem yükseklik hem de genişlik niteliklerini belirtin. Yükseklik ve genişlik ayarlanmışsa sayfa yüklendiğinde resim için gerekli alan ayrılır. Bu nitelikler olmadan tarayıcı görüntünün boyutunu bilemez ve ona uygun alanı ayıramaz. Bunun etkisi, yükleme sırasında (görüntüler yüklenirken) sayfa düzeninin değişmesi olacaktır.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form>
<label for="ad">Ad:</label><br>
<input type="text" id="ad" name="ad"><br>
<label for="sad">Soyad:</label><br>
<input type="text" id="sad" name="sad"><br>
<input type="image" src="gonder.gif" alt="Gönder" width="48" height="48">
</form>
</body>
</html>
list Niteliği
<input> için önceden tanımlanmış veri listesi seçeneklerini göstermek için <datalist> kullanılır.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form>
<input list="tarayicilar">
<datalist id="tarayicilar">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
<option value="Wyzo">
<option value="Internet Explorer">
</datalist>
</form>
</body>
</html>
autocomplete Niteliği
autocomplete yani otomatik tamamlama özelliği, bir formun veya giriş alanının otomatik tamamlama özelliğinin açık mı yoksa kapalı mı olması gerektiğini belirtir.
Otomatik tamamlama, tarayıcının değeri tahmin etmesini sağlar. Kullanıcı bir alana yazmaya başladığında, tarayıcının daha önce yazılan değerlere göre alanı doldurma seçeneklerini görüntülemesi gerekir. Otomatik tamamlama özelliği <form> ve şu <input> türleriyle çalışır: metin, arama, url, tel, e-posta, şifre, tarih seçiciler, aralık ve renk. (text, search, url, tel, email, password, datepickers, range, color.)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form action="/sayfa.php" autocomplete="on">
<label for="ad">Ad:</label>
<input type="text" id="ad" name="ad"><br><br>
<label for="soyad">Soyad:</label>
<input type="text" id="soyad" name="soyad"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" value="Gönder">
</form>
</body>
</html>İpucu: Bazı tarayıcılarda autocomplete niteliğinin çalışması için otomatik tamamlama işlevini etkinleştirmeniz gerekebilir.
