HTML Girdi Özellikleri

value özelliği

value Özellik, girdi alanının başlangıç değerini belirler:

Örnek

<form action="">
 İlk ad: <br>
<input type="text" name="firstname" value="Bill">
<br>
 Soyad: <br>
<input type="text" name="lastname">
</form>

Kişisel olarak deneyin

readonly özelliği

readonly Özellik, girdi alanının salt okunur (değiştirilemez) olduğunu belirler:

Örnek

<form action="">
 İlk ad: <br>
<input type="text" name="firstname" value="Bill" readonly>
<br>
 Soyad: <br>
<input type="text" name="lastname">
</form>

Kişisel olarak deneyin

readonly özelliği değer gerektirmez. readonly="readonly" ile eşdeğerdir.

disabled özelliği

disabled Özellik, girdi alanının devre dışı bırakıldığını belirler.

Devre dışı bırakılmış öğeler kullanılamaz ve tıklanamaz.

Devre dışı bırakılmış öğeler gönderilmez.

Örnek

<form action="">
 İlk ad: <br>
<input type="text" name="firstname" value="Bill" disabled>
<br>
 Soyad: <br>
<input type="text" name="lastname">
</form>

Kişisel olarak deneyin

disabled özelliği değer gerektirmez. disabled="disabled" ile eşdeğerdir.

size özelliği

size Özellik, girdi alanının boyutunu (karakter olarak) belirler:

Örnek

<form action="">
 İlk ad: <br>
<input type="text" name="firstname" value="Bill" size="40">
<br>
 Soyad: <br>
<input type="text" name="lastname">
</form>

Kişisel olarak deneyin

maxlength özelliği

maxlength Özellik, girdi alanının izin verdiği maksimum uzunluğu belirler:

Örnek

<form action="">
 İlk ad: <br>
<input type="text" name="firstname" maxlength="10">
<br>
 Soyad: <br>
<input type="text" name="lastname">
</form>

Kişisel olarak deneyin

maxlength özelliği ayarlandığında, giriş kontrolü, izin verilen karakter sayısını aşan karakterleri kabul etmez.

Bu özellik herhangi bir geri bildirim sağlamaz. Kullanıcıya bir uyarı gerekiyorsa, JavaScript kodu yazmanız gerekir.

Açıklama:Giriş sınırlamaları her zaman güvenli değildir. JavaScript, yasadışı girişleri artırmak için birçok yöntem sunar. Güvenli bir şekilde girişleri sınırlamak için, alıcı (sunucu) aynı zamanda sınırlamaları kontrol etmeli.

HTML5 özellikleri

HTML5, <input> türüne aşağıdaki özellikleri ekler:

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height ve width
  • list
  • min ve max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

ve <form> e gerekli özellikleri ekler:

  • autocomplete
  • novalidate

autocomplete özelliği

autocomplete özelliği, form veya giriş alanının otomatik tamamlanması olup olmadığını belirler.

Otomatik tamamlama açık olduğunda, tarayıcı kullanıcıların önceki giriş değerlerine dayanarak otomatik olarak değer doldurur.

İpucu:Formun autocomplete ayarını on yapabilir ve belirli bir giriş alanını off yapabilirsiniz, aksi takdirde de aynı şekilde.

autocomplete özelliği <form> ve aşağıdaki <input> türlerine uygulanır: text, search, url, tel, email, password, datepickers, range ve color.

Örnek

Otomatik tamamlama açılmış HTML formu (biri off):

<form action="action_page.php" autocomplete="on">
   İlk ad: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   E-posta: <input type="email" name="email" autocomplete="off"><br>
   <input type="submit">
</form>

Kişisel olarak deneyin

İpucu:Bazı tarayıcılarda, otomatik tamamlama fonksiyonunu manuel olarak etkinleştirmeniz gerekebilir.

novalidate özelliği

novalidate özelliği, <form> özelliğine aittir.

Ayarlanırsa, novalidate, formun gönderilirken form verilerinin doğrulanmamasını belirtir.

Örnek

Formun gönderilirken doğrulama yapılmamasını belirtir:

<form action="action_page.php" novalidate>
   E-posta: <input type="email" name="user_email">
   <input type="submit">
</form>

Kişisel olarak deneyin

autofocus özelliği

autofocus özelliği, bir boolean özelliktir.

Ayarlanırsa, sayfa yüklenirken <input> özelliğinin otomatik olarak odaklanması gerektiğini belirtir.

Örnek

"İlk ad" giriş alanını sayfa yüklenirken otomatik olarak odaklanmasını sağlayın:

İlk ad: <input type="text" name="fname" autofocus>

Kişisel olarak deneyin

form özelliği

form özelliği, <input> özelliğinin ait olduğu bir veya daha fazla formu belirtir.

İpucu:Birden fazla formun referans alınması gerekiyorsa, form id listesini boşlukla ayrılmış olarak kullanın.

Örnek

Giriş alanları HTML formunun dışında yer alır (ancak formun bir parçasıdır):

<form action="action_page.php" id="form1">
   First name: <input type="text" name="fname"><br>
   <gönder type="submit" value="Gönder">
</form>
 Soyadı: <input type="text" name="lname" form="form1">

Kişisel olarak deneyin

formaction özelliği

formaction özelliği, formu gönderirken bu girdi kontrolcüsünün dosyasını işleyen URL'yi belirtir.

formaction özelliği, <form> özelliğinin action özelliğini kapsar.

formaction özelliği, type="submit" ve type="image" için uygundur.

Örnek

İki tane iki tane sunum düğmesi olan ve farklı eylemlere sahip HTML formu:

<form action="action_page.php">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <gönder type="submit" value="Gönder"><br>
   <input type="submit" formaction="demo_admin.asp">
   value="Admin olarak gönder">
</form>

Kişisel olarak deneyin

formenctype özelliği

formenctype özelliği, form verilerini sunucuya gönderirken nasıl kodlanacağını belirtir (sadece method="post" olan formlar için).

formenctype özelliği, <form> özelliğinin enctype özelliğini kapsar.

formenctype özelliği type="submit" ve type="image" için uygundur.

Örnek

Varsayılan kodlama ve "multipart/form-data" kodlaması ile (ikinci gönder butonu) gönderilen form verilerini (form-data):

<form action="demo_post_enctype.asp" method="post">
   First name: <input type="text" name="fname"><br>
   <gönder type="submit" value="Gönder">
   <gönder type="submit" formenctype="multipart/form-data"
   value="Multipart/form-data olarak gönder">
</form>

Kişisel olarak deneyin

formmethod özelliği

formmethod özelliği, form verilerini (form-data) action URL'ye göndermek için kullanılan HTTP yöntemini tanımlar.

formmethod özelliği <form> öğesinin method özelliğini geçersiz kılar.

formmethod özelliği type="submit" ve type="image" için uygundur.

Örnek

İkinci gönder butonu formun HTTP yöntemini geçersiz kılar:

<form action="action_page.php" method="get">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <gönder type="submit" value="Gönder">
   <gönder type="submit" formmethod="post" formaction="demo_post.asp">
   value="POST kullanarak gönder">
</form>

Kişisel olarak deneyin

formnovalidate özelliği

novalidate özelliği bir boolean özelliktir.

Ayarlandıysa, formun gönderilmesi sırasında <input> öğesine doğrulama yapılmayacağını belirtir.

formnovalidate özelliği <form> öğesinin novalidate özelliğini geçersiz kılar.

formnovalidate özelliği type="submit" için kullanılabilir.

Örnek

İki gönder butonlu bir form (doğrulama ile ve doğrulama olmadan):

<form action="action_page.php">
   E-posta: <girdi type="email" name="userid"><br>
   <gönder type="submit" value="Gönder"><br>
   <gönder type="submit" formnovalidate value="Doğrulama yapmadan gönder">
</form>

Kişisel olarak deneyin

formtarget özelliği

formtarget özelliği tanımladığı ad veya anahtar kelime, formun gönderildikten sonra alınıan yanıtı nerede görüntüleneceğini belirtir.

formtarget özelliği, <form> elementinin target özelliğini geçersiz kılar.

formtarget özelliği type="submit" ve type="image" ile birlikte kullanılabilir.

Örnek

Bu form iki farklı hedef pencereye karşılık gelen iki gönderme düğmesi içerir:

<form action="action_page.php">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Submit as normal">
   <input type="submit" formtarget="_blank">
   value="Submit to a new window">
</form>

Kişisel olarak deneyin

height ve width özellikleri

height ve width özellikleri, <input> elementinin yüksekliğini ve genişliğini belirler.

height ve width özellikleri yalnızca <input type="image"> için geçerlidir.

Açıklama:Her zaman görselin boyutlarını belirtin. Eğer tarayıcı görsel boyutlarını bilmiyorsa, sayfa görsel yüklenirken parlamaya neden olabilir.

Örnek

Görseli bir gönderme düğmesi olarak tanımlayın ve height ve width özelliklerini ayarlayın:

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

Kişisel olarak deneyin

list özelliği

list özelliği, <datalist> elementi içindeki <input> elementinin ön tanımlı seçeneklerini içerir.

Örnek

Kullanarak <datalist> ön tanımlı değerleri belirleyen <input> elementi:

<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist>

Kişisel olarak deneyin

min ve max özellikleri

min ve max özellikleri, <input> elementinin en düşük ve en yüksek değerini tanımlar.

min ve max özellikleri, number, range, date, datetime, datetime-local, month, time ve week gibi girdi türlerine uygundur.

Örnek

En düşük ve en yüksek değeri olan <input> elementi:

1980-01-01'den önce bir tarih girin:
<input type="date" name="bday" max="1979-12-31">
 2000-01-01'den sonra bir tarih girin:
<input type="date" name="bday" min="2000-01-02">
 Miktar (1 ile 5 arasında):
<input type="number" name="quantity" min="1" max="5">

Kişisel olarak deneyin

multiple özelliği

multiple özelliği, boolean özelliğidir.

Ayarlanırsa, kullanıcıya <input> elementinde bir veya daha fazla değer girmesine izin verir.

multiple özelliği, email ve file gibi girdi türlerine uygundur.

Örnek

Birden fazla değeri kabul eden dosya yükleme alanı:

Bir resim seçin：<input type="file" name="img" multiple>

Kişisel olarak deneyin

pattern özelliği

pattern özelliği, <input> elementinin değerini kontrol etmek için kullanılan düzen ifadesini tanımlar.

pattern özelliği, text, search, url, tel, email ve password gibi girdi türlerine uygundur.

İpucu:Kullanıcıya yardımcı olmak için modeli açıklamak için genel title özelliğini kullanın.

İpucu:Daha fazla bilgi için bizim JavaScript eğitimimize bakın.

Örnek

Sadece üç harfli içerir girdi alanı (sayı veya özel karakterler içermez):

Ülke kodu: 
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Üç harfli ülke kodu">

Kişisel olarak deneyin

placeholder özelliği

placeholder özelliği, girdi alanının beklenen değerini tanımlamak için kullanılır (örnek değer veya formatta kısa bir açıklama).

Bu uyarı, kullanıcı değer girmeden önce girdi alanında görüntülenir.

placeholder özelliği aşağıdaki giriş türlerine uygulanır: text, search, url, tel, email ve password.

Örnek

Yer tutucu metni olan giriş alanları:

<input type="text" name="fname" placeholder="First name">

Kişisel olarak deneyin

required özelliği

required özelliği bir boolean özelliktir.

Ayarlandığında, formun gönderilmeden önce giriş alanlarının doldurulması gerektiğini belirtir.

required özelliği aşağıdaki giriş türlerine uygulanır: text, search, url, tel, email, password, date pickers, number, checkbox, radio ve file.

Örnek

Zorunlu giriş alanları:

Username: <input type="text" name="usrname" required>

Kişisel olarak deneyin

step özelliği

step özelliği <input> ögesinin yasal sayı aralığını belirler.

Örnek: step="3" ise, yasal sayılar -3, 0, 3, 6, vb. olmalıdır.

İpucu:step özelliği max ve min özellikleriyle birlikte kullanılabilir, böylece yasal değer aralığı oluşturulabilir.

step özelliği aşağıdaki giriş türlerine uygulanır: number, range, date, datetime, datetime-local, month, time ve week.

Örnek

Spesifik yasal sayı aralığına sahip giriş alanları:

<input type="number" name="points" step="3">

Kişisel olarak deneyin