HTML ve HTML5 Input Attributes

HTML <input> öğesi, kullanıcıdan verileri almak için web formlarında etkileÅŸimli kontroller oluÅŸturmak için kullanılır; Girdi alanı , verilen öğeye uygulanan Attributes özniteliÄŸinin deÄŸerine baÄŸlı olarak farklı bir biçim alır.

Value Attribute(özniteliği)

Ä°nput value özelliÄŸi, bir giriÅŸ alanı için bir baÅŸlangıç ​​deÄŸerini belirtir.

<form>
  Adı:<br>
  <input type="text" id="adi" name="adi" value="Ahmet"><br>
  Meslek:<b>
  <input type="text" id="meslek" name="meslek" value="İşçi">
</form>

ÇIKTI:

readonly Attribute (özniteliği)

Ä°nput readonly özelliÄŸi, bir giriÅŸ alanının salt okunur olduÄŸunu belirtir.

Salt okunur bir giriş alanı değiştirilemez (ancak, bir kullanıcı sekmesine geçebilir, vurgulayabilir ve içindeki metni kopyalayabilir).

Bir salt okunur giriş alanının değeri, formu gönderirken gönderilecektir!

<form>
  Sadece okunur:<br>
  <input type="text" id="adi" name="adi" value="Mehmet" readonly><br>
  Meslek:<br>
  <input type="text" id="meslek" name="meslek" value="Öğrenci">
</form>

ÇIKTI:

Yukarıdaki sadece okunur yeri değiştiremezsiniz.

disabled Attribute

Ä°nput disabled özelliÄŸi, bir giriÅŸ alanının devre dışı bırakılması gerektiÄŸini belirtir.

Devre dışı bırakılan bir giriş alanı kullanılamaz ve tıklanamaz.

Devre dışı bırakılmış bir giriş alanının değeri, formu gönderirken gönderilmeyecektir!

<form>
  Adı:<br>
  <input type="text" id="adi" name="adi" value="Hasan" disabled><br>
  Meslek:<br>
  <input type="text" id="meslek" name="meslek" value="Doktor">
</form>

ÇIKTI:

size Attribute

Ä°nput size özelliÄŸi, bir giriÅŸ alanının karakter cinsinden görünür geniÅŸliÄŸini belirtir.

varsayılan deÄŸer size="20"'dir.

Not: size özelliÄŸi Åžu giriÅŸ (input) türleriyle çalışır: Metin, ara, tel, url, e-posta ve ÅŸifre.

<form>
  Adi:<br>
  <input type="text" id="adi" name="adi" size="50"><br>
  Pin:<br>
  <input type="text" id="pin" name="pin" size="4">
</form>

ÇIKTI:

maxlength Attribute

Ä°nput maxlength özelliÄŸi, bir giriÅŸ alanında izin verilen maksimum karakter sayısını belirtir.

<form>
  Adı:<br>
  <input type="text" id="fname" name="fname" size="15"><br>
  Pin:<br>
  <input type="text" id="pin" name="pin" maxlength="4" size="10">
</form>

ÇIKTI:

Yukarıda Pin alanı 10 karekter olmasına rağmen 4 karekter kabul eder.

min and max Attributes

GiriÅŸ min ve max özellikler, bir giriÅŸ alanı için minimum ve maksimum deÄŸerleri belirtir.

min Ve max Åžu tip giriÅŸ türleriyle çalışır: sayı, aralık, tarih, tarih saat yerel, ay, saat ve hafta.

İpucu: Bir dizi yasal değer oluşturmak için maksimum ve minimum nitelikleri birlikte kullanın.

<form>
  1980-01-01'den önce bir tarih girin:

  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>

  2000-01-01'den sonra bir tarih girin:

  <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>

  Sayı (1 ile 5 arasında):<br>
  <input type="number" id="sayi" name="sayi" min="1" max="5">
</form>

ÇIKTI:

multiple Attribute

Ä°nput multiple özelliÄŸi, kullanıcının bir giriÅŸ alanına birden fazla deÄŸer girmesine izin verildiÄŸini belirtir.

multiple E-posta ve dosya: niteliÄŸi, input türleriyle çalışır.

Birden çok değeri kabul eden bir dosya yükleme alanı:

<form>
  Dosya seç:<br>
  <input type="file" id="files" name="files" multiple>
</form>

ÇIKTI:

Birden fazla dosya seçmek için, seçim sırasında CTRL veya SHIFT tuşunu basılı tutun.

pattern Attribute

Ä°nput pattern özelliÄŸi, form gönderildiÄŸinde giriÅŸ alanı deÄŸerinin kontrol edildiÄŸi normal bir ifadeyi belirtir.

pattern Metin, tarih, arama, url, tel, e-posta ve ÅŸifre: input türleriyle çalışır.

ipucu: Kullanıcıya yardımcı olacak kalıbı açıklamak için genel başlık özniteliğini kullanın.

Yalnızca iki harf içerebilen bir giriş alanı (yanlızca sayı girin):

<form action="#">
  Ä°l Plaka:<br>
  <input type="text" id="il_code" name="il_code"
  pattern="[0-9]{2}" title="Ä°l Plaka girin">
</form>

ÇIKTI:

placeholder Attribute

Ä°nput placeholder özelliÄŸi, bir giriÅŸ alanının beklenen deÄŸerini (örnek bir deÄŸer veya beklenen formatın kısa bir açıklaması) açıklayan kısa bir ipucu belirtir.

Kısa ipucu, kullanıcı bir değer girmeden önce giriş alanında görüntülenir.

placeholder Metin, arama, url, tel, e-posta ve ÅŸifre: niteliÄŸi, aÅŸağıdaki input türleriyle çalışır.

<form>
  Tel Numara:<br>
  <input type="tel" id="phone" name="phone"
  placeholder="123-45-678"
  pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

ÇIKTI:

required Attribute

Ä°nput required özelliÄŸi, formu göndermeden önce bir giriÅŸ alanının doldurulması gerektiÄŸini belirtir.

required Metin, arama, url, tel, e-posta, ÅŸifre, tarih seçiciler, sayı, onay kutusu, radyo ve dosya niteliÄŸi, input türleriyle çalışır.

<form action="#">
  Adı:<br>
  <input type="text" id="adi" name="adi" required>
  <button>Gönder</button>
</form>

ÇIKTI:

Yukarıda ki örnekte Gönder butona basılınca bir isim girmediğiseniz size uyarı verecek.

step Attribute

Ä°nput step özelliÄŸi, bir giriÅŸ alanı için girilecek sayı aralıklarını belirtir.

Örnek: adım = "3" ise, girilecek sayılar -3, 0, 3, 6 vb. Olabilir.

step ÅŸu giriÅŸ türleriyle sayı, aralık, tarih, tarih saat yerel, ay, saat ve hafta ile çalışır.

Belirtilen yasal numara aralıklarına sahip bir giriş alanı:

<form>
  Puan</label>
  <input type="number" id="puan" name="puan" step="3">
</form>

autofocus Attribute

Ä°nput autofocus özelliÄŸi, sayfa yüklendiÄŸinde bir giriÅŸ alanının otomatik olarak odaklanması gerektiÄŸini belirtir.

<form>
  Adı:<br>
  <input type="text" id="adi" name="adi" autofocus><br>
  Meslek:<br>
  <input type="text" id="Meslek" name="meslek">
</form>

ÇIKTI:

Sayfa yüklendiğinde "Ad" giriş alanının otomatik olarak odaklanmasına izin verir:

height and width Attributes

Girdi(input) height ve width nitelikleri, bir <input type="image"> elemanın yüksekliÄŸini ve geniÅŸliÄŸini belirtir.

<form>
  Adı:<br>
  <input type="text" id="adi" name="adi"><br><br>
  Meslek:<br>
  <input type="text" id="meslek" name="meslek"><br><br>
  <input type="image" src="submit.gif" alt="Submit" width="48" height="48">
</form>

ÇIKTI:

list Attribute

Ä°nput list özelliÄŸi <datalist>, bir <input> öğesi için önceden tanımlanmış seçenekleri içeren bir öğeyi ifade eder.

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

ÇIKTI:

autocomplete Attribute

Ä°nput autocomplete özelliÄŸi, bir formun veya bir giriÅŸ alanının otomatik tamamlamanın açık veya kapalı olması gerektiÄŸini belirtir.

Otomatik tamamlama, tarayıcının değeri tahmin etmesini sağlar. Bir kullanıcı bir alana yazmaya başladığında, tarayıcı, daha önce yazılan değerlere göre alanı doldurmak için seçenekler görüntülemelidir.

autocomplete Ä°le nitelik eserler <form> ve ÅŸu <input> türleri: metin, arama, url, tel, e-posta, ÅŸifre, datepickers, aralık ve renk.

Bir giriş alanı için otomatik tamamlama açık ve kapalı olan bir HTML formu:

<form action="/action_page.php" autocomplete="on">
  Adı:<br>
  <input type="text" id="adi" name="adi"><br><br>
  Meslek:<br>
  <input type="text" id="Meslek" name="meslek"><br><br>
  Email:<br>
  <input type="email" id="email" name="email" autocomplete="off"><br><br>
  <input type="submit" value="Gönder">
</form>