HTML Girdi Nitelikleri
Bu bölüm, HTML <input>öğesinin farklı özniteliklerini açıklar.
değer Özellik
input valueniteliği, bir giriş alanı için bir başlangıç değeri belirtir:
Örnek
Başlangıç (varsayılan) değerlere sahip giriş alanları:
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
Salt okunur Özellik
input readonlyözelliği, bir girdi alanının salt okunur olduğunu belirtir.
Salt okunur bir giriş alanı değiştirilemez (ancak, bir kullanıcı üzerine gelebilir, onu vurgulayabilir ve metni ondan kopyalayabilir).
Form gönderilirken salt okunur bir giriş alanının değeri gönderilecektir!
Örnek
Salt okunur bir giriş alanı:
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John" readonly><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
Engelli Özelliği
input disabledözelliği, bir giriş alanının devre dışı bırakılması gerektiğini belirtir.
Devre dışı bırakılmış bir giriş alanı kullanılamaz ve tıklanamaz.
Formu gönderirken devre dışı bırakılmış bir giriş alanının değeri gönderilmeyecektir!
Örnek
Devre dışı bırakılmış bir giriş alanı:
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John" disabled><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
boyut Özelliği
input sizeniteliği, bir girdi alanının karakter cinsinden görünür genişliğini belirtir.
için varsayılan değer size20'dir.
Not: Özellik sizeşu giriş türleriyle çalışır: metin, arama, tel, url, e-posta ve parola.
Örnek
Bir giriş alanı için bir genişlik ayarlayın:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" size="50"><br>
<label
for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin"
size="4">
</form>
maksimum uzunluk Özelliği
input maxlengthözelliği, bir giriş alanında izin verilen maksimum karakter sayısını belirtir.
Not: a maxlengthayarlandığında, giriş alanı belirtilen karakter sayısından fazlasını kabul etmeyecektir. Ancak bu özellik herhangi bir geri bildirim sağlamaz. Yani kullanıcıyı uyarmak istiyorsanız JavaScript kodu yazmalısınız.
Örnek
Bir giriş alanı için maksimum uzunluk ayarlayın:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" size="50"><br>
<label
for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin"
maxlength="4" size="4">
</form>
Min ve max Nitelikler
Giriş minve maxnitelikler, bir giriş alanı için minimum ve maksimum değerleri belirtir.
and öznitelikleri şu mingiriş maxtürleriyle çalışır: sayı, aralık, tarih, tarih-saat-yerel, ay, saat ve hafta.
İpucu: Bir dizi yasal değer oluşturmak için max ve min özelliklerini birlikte kullanın.
Örnek
Bir maksimum tarih, bir minimum tarih ve bir dizi yasal değer belirleyin:
<form>
<label for="datemax">Enter a date before
1980-01-01:</label>
<input type="date" id="datemax" name="datemax"
max="1979-12-31"><br><br>
<label for="datemin">Enter a date
after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin"
min="2000-01-02"><br><br>
<label for="quantity">Quantity
(between 1 and 5):</label>
<input type="number" id="quantity"
name="quantity" min="1" max="5">
</form>
Çoklu Nitelik
input multipleözelliği, kullanıcının bir girdi alanına birden fazla değer girmesine izin verildiğini belirtir.
Öznitelik şu multiplegiriş türleriyle çalışır: e-posta ve dosya.
Örnek
Birden çok değeri kabul eden bir dosya yükleme alanı:
<form>
<label for="files">Select files:</label>
<input
type="file" id="files" name="files" multiple>
</form>
desen Niteliği
input patternözelliği, form gönderildiğinde giriş alanının değerinin kontrol edildiği normal bir ifadeyi belirtir.
Nitelik patternşu giriş türleriyle çalışır: metin, tarih, arama, url, tel, e-posta ve parola.
İpucu: Kullanıcıya yardımcı olmak için kalıbı açıklamak için genel başlık özelliğini kullanın.
İpucu: JavaScript eğitimimizde normal ifadeler hakkında daha fazla bilgi edinin .
Örnek
Yalnızca üç harf içerebilen (sayı veya özel karakter içermeyen) bir giriş alanı:
<form>
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
</form>
yer tutucu Özellik
input placeholderözniteliği, bir girdi alanının beklenen değerini açıklayan kısa bir ipucu belirtir (örnek bir değer veya beklenen biçimin kısa bir açıklaması).
Kısa ipucu, kullanıcı bir değer girmeden önce giriş alanında görüntülenir.
Nitelik placeholderşu giriş türleriyle çalışır: metin, arama, url, tel, e-posta ve parola.
Örnek
Yer tutucu metin içeren bir giriş alanı:
<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
Gerekli Nitelik
input requiredözelliği, formu göndermeden önce bir giriş alanının doldurulması gerektiğini belirtir.
Nitelik requiredşu giriş türleriyle çalışır: metin, arama, url, tel, e-posta, parola, tarih seçiciler, sayı, onay kutusu, radyo ve dosya.
Örnek
Gerekli bir giriş alanı:
<form>
<label for="username">Username:</label>
<input
type="text" id="username" name="username" required>
</form>
adım Özelliği
input stepözelliği, bir giriş alanı için yasal sayı aralıklarını belirtir.
Örnek: step="3" ise yasal sayılar -3, 0, 3, 6 vb. olabilir.
İpucu: Bu öznitelik, bir dizi yasal değer oluşturmak için maks ve min öznitelikleri ile birlikte kullanılabilir.
Nitelik stepşu giriş türleriyle çalışır: sayı, aralık, tarih, yerel tarih-saat, ay, saat ve hafta.
Örnek
Belirtilen yasal sayı aralıklarına sahip bir giriş alanı:
<form>
<label for="points">Points:</label>
<input
type="number" id="points" name="points" step="3">
</form>
Not: Giriş kısıtlamaları kusursuz değildir ve JavaScript, geçersiz giriş eklemek için birçok yol sağlar. Girişi güvenli bir şekilde kısıtlamak için alıcı (sunucu) tarafından da kontrol edilmelidir!
Otomatik odaklama Özelliği
input autofocusözelliği, sayfa yüklendiğinde bir giriş alanının otomatik olarak odaklanması gerektiğini belirtir.
Örnek
Sayfa yüklendiğinde "Ad" giriş alanının otomatik olarak odaklanmasına izin verin:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
yükseklik ve genişlik Nitelikleri
Giriş heightve nitelikler, bir öğenin widthyüksekliğini ve genişliğini belirtir .<input
type="image">
İpucu: Görüntüler için her zaman hem yükseklik hem de genişlik özelliklerini belirtin. Yükseklik ve genişlik ayarlanırsa, sayfa yüklendiğinde görüntü için gerekli alan ayrılır. Bu nitelikler olmadan tarayıcı görüntünün boyutunu bilmez ve ona uygun alanı ayıramaz. Efekt, yükleme sırasında (resimler yüklenirken) sayfa düzeninin değişmesi olacaktır.
Örnek
Bir resmi, yükseklik ve genişlik öznitelikleriyle birlikte gönder düğmesi olarak tanımlayın:
<form>
<label for="fname">First name:</label>
<input
type="text" id="fname" name="fname"><br><br>
<label for="lname">Last
name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
Liste Özelliği
input listniteliği, <datalist>bir <input> öğesi için önceden tanımlanmış seçenekleri içeren bir öğeye başvurur.
Örnek
Bir <datalist> içinde önceden tanımlanmış değerlere sahip bir <input> öğesi:
<form>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
otomatik tamamlama Özelliği
input autocompleteözniteliği, bir formun veya bir giriş alanının otomatik tamamlamanın açık mı yoksa kapalı mı olması gerektiğini belirtir.
Otomatik tamamlama, tarayıcının değeri tahmin etmesine olanak tanır. Bir kullanıcı bir alana yazmaya başladığında, tarayıcı, daha önce yazılan değerlere göre alanı doldurma seçeneklerini göstermelidir.
autocompleteÖznitelik şu türlerle çalışır : metin <form>, <input>arama, url, tel, e-posta, parola, tarih seçiciler, aralık ve renk.
Örnek
Bir giriş alanı için otomatik tamamlamanın açık ve kapalı olduğu bir HTML formu:
<form action="/action_page.php" autocomplete="on">
<label for="fname">First
name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname"
name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" value="Submit">
</form>
İpucu: Bazı tarayıcılarda bunun çalışması için bir otomatik tamamlama işlevini etkinleştirmeniz gerekebilir (Tarayıcının menüsünde "Tercihler" altına bakın).
HTML Alıştırmaları
HTML Formu ve Giriş Öğeleri
| Tag | Description |
|---|---|
| <form> | Defines an HTML form for user input |
| <input> | Defines an input control |
Mevcut tüm HTML etiketlerinin tam listesi için HTML Etiket Referansımızı ziyaret edin .