52 – Html Input Attributes – Nitelikleri
Html form içerisinde en çok kullanılan input elemanı içerisinde kullanabileceğimiz niteliklere yer verilmiştir.
Örneğin bir html form elemanının zorunlu olup olmaması, varsayılan değeri, maximum yada minimum değer, telefon girişi gibi bir alanın giriş formatı gibi özellikleri inceliyoruz.
value Attribute
Form elemanlarına varsayılan bir değer verir.
Form içerisinde varsayılan değer oluşturma Örnek
<form>
<label for="meyve">Sevdiğiniz Bir Meyve Girin</label> <br><br>
<input type="text" id="meyve" name="meyve" value="Çilek">
</form>readonly Attribute
readonly eklendiği alanı sadece okunabilir yapar, form içerisinde her hangi bir giriş yapılamaz özelliğini ekler.
readonly olarak belirtilen içeriğin formu okuyup işlem yapacak dosyaya gönderilmesinde bir sıkıntı olmaz.
Kullanıcı isterse bu alanı seçerek kopyalama yapabilir.
Form içerisinde salt okunur alan oluşturma Örnek
<p>Aşağıdaki örnekte Türkiye yazılı alanın değiştirilemediğini göreceksiniz.</p>
<form>
<label for="ornekUlke">Bir Ülke İsmi Girin</label> <br><br>
<input type="text" id="ornekUlke" name="ornekUlke" value="Türkiye" readonly><br><br>
<label for="ulke">Ülke İsmini Yazın</label><br><br>
<input type="text" id="ulke" name="ulke" value="Almanya">
</form>disabled Attribute
disabled form giriş alanının devre dışı bırakıldığını belirtir.
Bu alan formu işleyecek olan sayfaya gönderilmeyecektir.
Form içerisinde bir alanı devre dışı bırakma Örnek
<form>
<label for="numaraDisabled">Verilen Tarihi Geçmiş Numara: </label> <br><br>
<input type="text" id="numaraDisabled" name="numaraDisabled" value="ABC2654987" disabled><br><br>
<label for="yeniNumaraAktif">Yeni Seri Numarasını Giriniz:</label><br><br>
<input type="text" id="yeniNumaraAktif" name="ulyeniNumaraAktifke" >
</form>size Attribute
size html input elemanının veri girecek alanının kaç karakter genişliğinde olacağını gösterir.
Bu alana yazarken bir sınırlama yapmaz. Yalnızca alanın genişliğinin kaç karakter olacağını belirtir. Görsel bir durumdur.
size attribute input type text, search, tel, url, email ve password alanları için geçerlidir.
Form input alanı genişliği Örnek
<form>
<label for="user">Lütfen Kullanıcı Adınızı Giriniz:</label> <br><br>
<input type="text" id="user" name="user"size="40"><br><br>
<label for="numara">Lütfen 4 Haneli Güvenlik Numaranızı Girin:</label> <br><br>
<input type="text" id="numara" name="numara"size="4"><br><br>
</form>maxlength Attribute
maxlength giriş alanında karakter girilebilecek maximum karakter uzunluğunu belirler.
maxlength ile kısıtlanan karakter uzunluğundan daha fazlası yazılamaz. Ancak kullanıcıya bir uyarı vermeyecektir.
Form input alanında karakter uzunluğunu belirleme Örnek
<form>
<label for="user">Lütfen Kullanıcı Adınızı Giriniz:</label> <br>
<input type="text" id="user" name="user" maxlength="30" size="30"><br>
<label for="numara">Lütfen 4 Haneli Güvenlik Numaranızı Girin:</label> <br>
<input type="text" id="numara" name="numara"maxlength="4" size="4"><br>
</form>min ve max Attributes
min html form giriş alanı için minumum değerin ne olacağını belirtir, max ise maksimum değerin ne olacağını belirtir.
min ve max değerleri input type number, range, date, datetime-local, month, time, week için geçerlidir.
Form Alanında Maksimum ve Minimum Değerler Örnek
<form action="min-max-oku.php">
<label for="maksimumTarih">2023-01-01 Tarihine Kadar Seçim Yapabilirsiniz</label>
<input type="date" id="maksimumTarih" name="maksimumTarih" max="2023-01-01"><br><br>
<label for="sayi">1 ile 50 arasında bir sayı giriniz:</label>
<input type="number" id="sayi" name="sayi" min="1" max="50"><br><br>
<input type="submit" value="Submit">multiple Attribute
Giriş alanına birden fazla girişe izin vermektedir. multiple url ve file giriş türleri ile çalışır.
Çoklu Dosya Seçme Örnek
<form>
<label for="files">Dosya Seç</label>
<input type="file" id="files" name="files" multiple>
</form>placeholder Attribute
placeholder giriş alanının içerisinde silik bir yazı ile istediğimiz bilgiyi göstermek için kullanılır. Genelde giriş formlarında giriş alanında, kullanıcının gireceği bilginin nasıl olması gerektiği bilgisini, ipucu şeklinde verir.
placeholder input type text, search, url, tel, email, password türleri ile çalışır.
Giriş Alanı İpucu Oluşturma Örnek
<form>
<label for="ad">Adınızı Yazınız: </label>
<input type="text" id="ad" name="ad" placeholder="Mehmet">
<label for="soyad">Soyadınızı Yazınız: </label>
<input type="text" id="soyad" name="soyad" placeholder="ESER">
</form>pattern Attribute
pattern desen anlamına gelmektedir. Giriş alanında formatın nasıl olacağını belirtmemize imkan tanır.
pattern input type ext, date, search, url, tel, email, ve password ile çalışır.
Kullanıcı formatın nasıl olacağını anlaması için placeholder, title veya bir paragraf ipucu belirtebilirsiniz.
Giriş Alanı Formatı Oluşturma Örnek
<form>
<label for="numara">İlgili Numarayı Giriniz:</label>
<input type="text" id="numara" name="numara"
pattern="[A-Za-z]{3}-[0-9]{4}" placeholder="ABC-1234" title="ABC-1234">
</form>required Attribute
Html form input alanını girilmesi zorunlu bir alan haline getirilir.
Html Form Girilmesi Zorunlu Alan Oluşturma Örnek
<form action="formOku.php" method="post">
<label for="adi">Adınızı Yazınız: </label><br>
<input type="text" id="adi" name="adi" placeholder="Mehmet" required><br>
<label for="soyadi">Soyadınızı Yazınız: </label><br>
<input type="text" id="soyadi" name="soyadi" placeholder="ESER" required> <br>
<input type="submit" value="Gönder">
</form>step Attribute
step adım anlamına gelmektedir, giriş yapılan input alanında sayı aralığını belirtir.
step input type number, range, date, datetime-local, month, time ve week için geçerlidir.
Bu örnekte minumum 100 değeri ve maksimum 1000 değeri verilmiştir. Adım sayısı ise 100 dür. Sayı yüzer yüzer artacak ya da eksilecektir.
Html Form Sayı Aralığı Örnek
<form >
<label for="sayi">Sayı Seçiniz: </label><br>
<input type="number" id="sayi" name="sayi" min="100" max="1000" step="100">
</form>autofocus Attribute
autofocus sayfa yüklendiğinde belirtildiği alana odaklanılmasını sağlar.
Aşağıdaki örnekte form yüklendiğinde telefon alanına odaklanıldığı görülmektedir.
Html Form Alanına Odaklanma Örnek
<form >
<label for="adi">Adınızı Giriniz: </label><br/>
<input type="text" id="adi" name="adi"><br/>
<label for="soyadi">Soyadınızı Giriniz: </label><br/>
<input type="text" id="soyadi" name="soyadi"><br/>
<label for="numara">Telefonu Giriniz: </label><br/>
<input type="text" id="adi" name="adi" autofocus><br/>
</form>height and width Attributes
Kullanıldığı html elemanının yüksekliğini ve genişliğini belirtmek için kullanılır.
height yüksekliği, width ise genişliği belirtmektedir.
Html Öğesine Genişlik ve Yükseklik Verme Örnek
<form action="formOku.php" method="post">
<label for="adi">Adınızı Giriniz: </label><br/>
<input type="text" id="adi" name="adi"><br/>
<label for="soyadi">Soyadınızı Giriniz: </label><br/>
<input type="text" id="soyadi" name="soyadi"><br/>
<input type="image" src="resim/gonder.jpg" height="60px" width="60px">
<input type="image" src="resim/gonder.jpg" height="45px" width="45px">
<input type="image" src="resim/gonder.jpg" height="30px" width="30px">
</form>list Attribute
Tanımlanmış bir liste öğesini oluşturur.
Html Öğesine Genişlik ve Yükseklik Verme Örnek
<form action="formOkuOkulGet.php" method="get">
<fieldset>
<legend>Okul Listesi</legend>
<input list="okul" name="okul">
<datalist id="okul">
<option value="Anadolu Lisesi">
<option value="Atatürk Lisesi">
<option value="Fen Lisesi">
<option value="İmam Hatip Lisesi">
</datalist>
<input type="submit" value="Gönder">
</fieldset>
</form>autocomplete Attribute
Giriş alanlarında otomatik tamamlamanın açılması için kullanılır.
Kullanıcı bir giriş alanına daha önce veri girdiyse, aynı verileri tekrar girerken hatırlanır ve otomatik tamamlama yapılması sağlanır.
autocomplete input type text, search, url, tel, email, password, datepickers, range, ve color için çalışır.
Bu özellik her tarayıcıda aktif değildir. Tarayıcı özelliklerinde tercihler kısmında otomatik tamamlamayı aktif etmeniz gerekebilir.
Html Form Girişlerinde Otomatik Tamamlama Örnek
<form action="formOkuAuto.php" autocomplete="on">
<label for="adi">Adınız: </label>
<input type="text" id="adi" name="adi"><br><br>
<label for="soyadi">Soyadınız:</label>
<input type="text" id="soyadi" name="soyadi"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" value="Gönder">
</form>formaction Attribute
Formun işleneceği sunucu tarafında form okuyucu dosyamıza formu gönderir.
form etiketleri içerisinde action tanımlandıysa geçersiz kılar.
formaction input type submit ve image ile çalışır.
Html formaction Örnek
<input type="submit" formaction="formOkuAuto.php" value="Form Bilgilerini Oku">formenctype Attribute
formenctype form gönderilirken kodlama yöntemini belirtmektedir. Bu kullanıldığında enctype attribute geçersiz kalır.
formenctype input type submit ve image ile çalışır.
formmethod Attribute
Formu gönderileceği metodu belirler. Get ve Post metodu kullanılır. Normal şartlarda form oluştururken <form action=”formOku.php” method=”get”> şeklinde bir kullanım yapıyorduk.
Aşağıdaki gibi <input type=”submit” formaction=”formOkuAuto.php” formmethod=”get” value=”Formu Oku”> şeklinde bir tanımlama yaptığımızda form içerisinde yazdığımız <form action=”formOku.php” method=”post”> geçersiz olacaktır.
post ve get yönetmlerini detaylı incelediğimiz yazı için tıklayın.
Html formmethod Örnek
<form action="formOku.php" method="post">
<label for="adi">Adınız: </label>
<input type="text" id="adi" name="adi"><br><br>
<label for="soyadi">Soyadınız:</label>
<input type="text" id="soyadi" name="soyadi"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" formaction="formOkuAuto.php" formmethod="get" value="Form Bilgilerini Oku">
</form>formtarget Attribute
Gönderilen formun, gelen cevabının hangi sayfada açılacağını belirtir.
input type submit ve image ile çalışır.
Daha önce target attribute ile ilgili detaylı yazımız için tıklayın.
Html formtarget Örnek
<input type="submit" formaction="formOkuAuto.php" formmethod="get" formtarget="_blank" value="Form Bilgilerini Oku">formnovalidate Attribute
Gönderilen form öğelerinin kontrolünün yapılmamasını sağlar.
validate özelliğini geçersiz kılar.
input type submit ile çalışır.
Html formnovalidate Örnek
<input type="submit" formnovalidate formaction="formOkuAuto.php" formmethod="get" formtarget="_blank" value="Form Bilgilerini Oku">Yukarıdaki örneğin bir farklı kullanımını form içerisine novalidate ekleyerekte yapabiliriz.
Bur örnek için ilgili yazımıza gidebilirsiniz. Form Attributes