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>

Bu içeriği beğendiyseniz paylaşarak destek olabilirsiniz!


Eğitim İçeriği

Eğitim HTML Dersleri
Kategori Web Programlama
Ders Adeti 19 Ders
Dil Türkçe
Güncelleme 12/2020
  • HTML Dersleri

    HTML Dersleri Sıfırdan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 19 Ders
    Dil Türkçe
    Güncelleme 12/2020
    Derse Başla
  • Java Dersleri

    Java Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 125 Ders
    Dil Türkçe
    Güncelleme 09/2020
    Derse Başla
  • CSS Dersleri

    CSS Dersleri Başlangıçtan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 41 Ders
    Dil Türkçe
    Güncelleme 10/2021
    Derse Başla