HTML Dersleri 19 - Formlar Input Parametreleri


Merhaba değerli Kodlama Vakti okuyucuları, geçen dersimizde Formlarda Input Türleri adlı yazımızda HTML’de Form Input Türlerinin kullanımını ve özelliklerini öğrenmiştik. Önceki dersimizi incelemediyseniz HTML Dersleri 18 - Formlar Input Türleri linkine tıklayarak ulaşabilirsiniz.

Bu dersimizde HTML Formlar'da input etiketlerinde kullanılan parametreleri göreceğiz. Önceki dersimizde, formlarda input etiketinin "type" parametresine verdiğimiz değerler ile formlarda ki girdi türünü değiştirebiliyorduk. Şimdi bu girdi türlerinin aldıkları parametreleri inceleyelim :

readonly parametresi

HTML Formlarda "readonly" parametresi , yazıldığı form öğesini sadece "okunabilir" yapmaktadır ve değiştirilemez ama kopyalanabilir, seçilebilir. Form gönderildiğinde , bu değerde gönderilir. Herhangi bir input etiketinin içerisine direk parametre şeklinde yazılabilir ve hiç bir nicelik almasına gerek yoktur.

HTML "readonly" Örneği :

<form>
  <label for="ad">Adınız :</label><br>
  <input type="text" id="ad" name="ad" value="Kodlama" readonly><br>
  <label for="soyad">Soyadınız :</label><br>
  <input type="text" id="soyad" name="soyad" value="Vakti">
</form>

disabled parametresi

HTML Formlarda "disabled" parametresi, yazıldığı form öğesinin değiştirilemez,seçilemez ve düzenlenemez olmasını sağlar. 

<form>
  <label for="ad">Adınız :</label><br>
  <input type="text" id="ad" name="ad" value="Kodlama" disabled><br>
  <label for="soyad">Soyadınız :</label><br>
  <input type="text" id="soyad" name="soyad" value="Vakti">
</form>

size parametresi

HTML Formlarda "size" parametresi, yazıldığı form öğesinin karakter cinsinden görünür genişliğini belirtir. Varsayılan değer 20'dir.

<form>
  <label for="ad">Adınız :</label><br>
  <input type="text" id="ad" name="ad" size="50"><br>
  <label for="pin">PIN Kodu:</label><br>
  <input type="text" id="pin" name="pin" size="4">
</form>

maxlength parametresi

HTML Formlarda "maxlength" parametresi, yazıldığı form öğesinin izin verilen maksimum karakter sayısını belirtir.

<form>
  <label for="ad">Adınız :</label><br>
  <input type="text" id="ad" name="ad" size="50"><br>
  <label for="pin">PIN Kodu:</label><br>
  <input type="text" id="pin" name="pin" max-length="4" size="4">
</form>

min ve max parametresi

HTML Formlarda "min ve max" parametreleri, yazıldığı form öğesinin minimum ve maksimum değerleri belirtir. Bu parametreler  bazı input türleriyle çalışır: number, range, date, datetime-local, month, time ve week.

<label for="maxtarih">2000-01-01 tarihinden küçük bir değer giriniz : </label>
  <input type="date" id="maxtarih" name="maxtarih" max="1999-12-31"><br><br>

  <label for="mintarih">2000-01-01 tarihinden büyük bir değer giriniz : </label>
  <input type="date" id="mintarih" name="mintarih" min="2000-01-02"><br><br>

  <label for="miktar">Lütfen 1 ve 5 değerleri arasında bir sayı giriniz . </label>
  <input type="number" id="miktar" name="miktar" min="1" max="5">
</form>

multiple parametresi

HTML Formlarda "multiple" parametresi, yazıldığı form öğesinin birden fazla değer girmesine izin verir.

<form>
  <label for="dosyalar">Dosyaları Seçiniz :</label>
  <input type="file" id="dosyalar" name="dosyalar" multiple>
</form>

placeholder parametresi

HTML Formlarda "placeholder" parametresi, yazıldığı form öğesinin beklenen değerini (örnek bir değer veya beklenen biçimin 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 parametresi ayrıca şu form girdi türleri ilede çalışır : text, search, url, tel, email, and password.

<form>
  <label for="telefon">Telefon Numaranız:</label>
  <input type="tel" id="telefon" name="telefon"
  placeholder="0553-xxx-xx-xx" >
</form>

required parametresi

HTML Formlarda "required" parametresi, yazıldığı form öğesinin doldurulmasının zorunlu olduğunu belirtir.Genellikle formlarda doldurulmasını kesin istediğimiz durumlarda kullanırız, kullanıcı bu alanı doldurmadı ise formu gönderemez.

<form>
  <label for="sifre">Şifreniz :</label>
  <input type="text" id="sifre" name="sifre" required>
</form>