Html ile Web İşlemleri 28 - Form Özellikleri
3.7.4.1. Form Özellikleri
HTML5, form oluştururken formun genelinde otomatik tamamlama yapılmasına ve veri giriş
elemanı değerinin veri tipi uyumunun kontrol edilmesine olanak tanır.
elemanı değerinin veri tipi uyumunun kontrol edilmesine olanak tanır.
Autocomplete özelliği, form elemanlarına daha önce giriş yapılmış ise veri girişi sırasında otomatik
tamamlamak için kullanılır. Bu özellik “on” veya “off” değeri alır.
Novalidate özelliği, veri girişi sırasında veri giriş elemanı değerinin veri tipi ile uyumunu kontrol
etmemesi için kullanılır.
Sıra Sizde
Aşağıdaki HTML kodlarını inceleyiniz, form özelliklerine dikkat ederek formu oluşturup
tarayıcıda görüntüleyiniz.
tarayıcıda görüntüleyiniz.
<form action="islemyap.html" method="get" autocomplete="on" novalidate >
<label for="adsoyad">Ad Soyad:</label>
<input type="text" id="adsoyad" name="adsoyad"></br></br>
<label for="eposta">e-Posta:</label>
<input type="text" id="eposta" name="eposta"></br></br>
<input type="submit">
</form>
<input type="text" id="adsoyad" name="adsoyad"></br></br>
<label for="eposta">e-Posta:</label>
<input type="text" id="eposta" name="eposta"></br></br>
<input type="submit">
</form>
3.7.4.2. Veri Giriş Özellikleri
HTML5, tarayıcı ekranında forma veri girişi sırasında verilerin form elemanı özellikleri ile kontrol
edilmesine olanak tanır.
edilmesine olanak tanır.
Placeholder, bilgi alanıdır, kullanıcı bir değer girmeden önce giriş alanında görüntülenir.
Autocomplete, form genelinde otomatik tamamlama açık ya da kapalı olduğunda giriş elemanları
için otomatik tamamlama kapalıdır. Giriş elemanında bu özelliği kapatmak ya da açmak için
autocomplete özelliği giriş elemanında kullanılır.
Autofocus, input etiketi içinde autofocus özelliği varsa sayfa yüklendiğinde imleç, bu giriş elemanına
odaklanır. Sadece bir elemanda kullanılmalıdır.
List, önceden tanımlanmış datalist kullanmayı sağlar.
Min ve Max, veri giriş elemanının alacağı en büyük ve en küçük değerleri belirler. Sayı ve tarih
için kullanılır.
Pattern; metin, tarih, arama, URL, telefon, e-posta ve şifre giriş türlerinin belirli bir formatta
yazılıp yazılmadığını kontrol eder.
Required, gerekli alandır, required ifade eklenen veri giriş elemanının doldurulması zorunludur.
Metin, arama, URL, telefon, e-posta, şifre, tarih seçiciler, sayı, onay kutusu, radyo ve dosya
veri tipleri ile kullanılabilir.
Step, veri alanına girilebilecek sayı aralığını belirtir. Sayı, tarih, ay, hafta ve saat veri tipleri ile
kullanılabilir.
Multiple, eklendiği veri tipine birden çok değer girilmesini sağlar.
Autocomplete, form genelinde otomatik tamamlama açık ya da kapalı olduğunda giriş elemanları
için otomatik tamamlama kapalıdır. Giriş elemanında bu özelliği kapatmak ya da açmak için
autocomplete özelliği giriş elemanında kullanılır.
Autofocus, input etiketi içinde autofocus özelliği varsa sayfa yüklendiğinde imleç, bu giriş elemanına
odaklanır. Sadece bir elemanda kullanılmalıdır.
List, önceden tanımlanmış datalist kullanmayı sağlar.
Min ve Max, veri giriş elemanının alacağı en büyük ve en küçük değerleri belirler. Sayı ve tarih
için kullanılır.
Pattern; metin, tarih, arama, URL, telefon, e-posta ve şifre giriş türlerinin belirli bir formatta
yazılıp yazılmadığını kontrol eder.
Required, gerekli alandır, required ifade eklenen veri giriş elemanının doldurulması zorunludur.
Metin, arama, URL, telefon, e-posta, şifre, tarih seçiciler, sayı, onay kutusu, radyo ve dosya
veri tipleri ile kullanılabilir.
Step, veri alanına girilebilecek sayı aralığını belirtir. Sayı, tarih, ay, hafta ve saat veri tipleri ile
kullanılabilir.
Multiple, eklendiği veri tipine birden çok değer girilmesini sağlar.
Sıra Sizde
Aşağıdaki HTML kodlarını inceleyiniz, veri giriş özelliklerine dikkat ederek form oluşturup
tarayıcıda görüntüleyiniz.
tarayıcıda görüntüleyiniz.
<form action="islem1.html" autocomplete="on">
<input formmethod="get" placeholder="Form Metodu get|post">
<input formnovalidate="formnovalidate" placeholder="Veri Tip Uyumu Kontrolsüz"></br>
<input type="email" id="eposta" name="eposta" autocomplete="on" placeholder="Otomatik
açık">
<input type="date" id="tarihmin" name="tarihmin" min="2021-05-01">
<inputtype="number" id="aralik" name="aralik" min="1" max="5" placeholder="max">
<input type="password" pattern=".{6,}" title="Altı veya daha fazla" placeholder="daha
fazla">
<input type="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" placeholder = "Şifre">
<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" placeholder ="Eposta">
<input type="url" pattern="https?://.+" placeholder="http:// dâhil edin">
<input type="number" step="2" placeholder="Çift Sayı">
<input list="hazirliste"><datalist id="hazirliste">
<option value="Öğretmen">
<option value="Öğrenci">
<option value="Veli">
</datalist>
<input type="submit" value="Gönder">
<input type="submit" formaction="islem2.html" value="Başka Gönder">
</form>
<input formmethod="get" placeholder="Form Metodu get|post">
<input formnovalidate="formnovalidate" placeholder="Veri Tip Uyumu Kontrolsüz"></br>
<input type="email" id="eposta" name="eposta" autocomplete="on" placeholder="Otomatik
açık">
<input type="date" id="tarihmin" name="tarihmin" min="2021-05-01">
<inputtype="number" id="aralik" name="aralik" min="1" max="5" placeholder="max">
<input type="password" pattern=".{6,}" title="Altı veya daha fazla" placeholder="daha
fazla">
<input type="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" placeholder = "Şifre">
<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" placeholder ="Eposta">
<input type="url" pattern="https?://.+" placeholder="http:// dâhil edin">
<input type="number" step="2" placeholder="Çift Sayı">
<input list="hazirliste"><datalist id="hazirliste">
<option value="Öğretmen">
<option value="Öğrenci">
<option value="Veli">
</datalist>
<input type="submit" value="Gönder">
<input type="submit" formaction="islem2.html" value="Başka Gönder">
</form>
HTML5 kodları ile oluşturulan formlar görsel açıdan çok etkileyici değildir. Form elemanlarını hizalamak için HTML tabloları kullanılır. Görsel açıdan güzel formlar oluşturmak için ise CSS kullanılır.
Not
Form doğrulama işlemi, bir web sitesinin güvenliği ve kullanılabilirliği için hayati
öneme sahiptir. Doğrulama işlemi, giriş değerinin sunucuya gönderilmeden önce
doğru biçimde olup olmadığının tarayıcıda kontrol edilmesidir. Örneğin, herhangi
bir e-posta adresi için bir giriş alanı varsa değer kesinlikle geçerli bir e-posta adresi
içermelidir. E-posta; bir harf veya sayı ile başlamalı, ardından @ (kuyruklu a) simgesi
gelmeli ve bir alan adıyla bitmelidir.
öneme sahiptir. Doğrulama işlemi, giriş değerinin sunucuya gönderilmeden önce
doğru biçimde olup olmadığının tarayıcıda kontrol edilmesidir. Örneğin, herhangi
bir e-posta adresi için bir giriş alanı varsa değer kesinlikle geçerli bir e-posta adresi
içermelidir. E-posta; bir harf veya sayı ile başlamalı, ardından @ (kuyruklu a) simgesi
gelmeli ve bir alan adıyla bitmelidir.
HTML5, <input> elemanında pattern (desen) özelliği tanımlayarak, JavaScript'e başvurmadan
temel veri doğrulama işlemi yapılmasına izin verir.
temel veri doğrulama işlemi yapılmasına izin verir.
Araştırma
Pattern özelliğini kullanarak kullanıcı adının yalnızca küçük harflerden oluşması ve
kullanıcı adı uzunluğunun 10 karakterden fazla olmamasını sağlayan deseni oluşturup
tarayıcıda görüntüleyiniz. Oluşturduğunuz desene uymayan girişler yapıldığında
çıkan uyarıyı nasıl değerlendireceğinizi araştırınız.
kullanıcı adı uzunluğunun 10 karakterden fazla olmamasını sağlayan deseni oluşturup
tarayıcıda görüntüleyiniz. Oluşturduğunuz desene uymayan girişler yapıldığında
çıkan uyarıyı nasıl değerlendireceğinizi araştırınız.
Hiç yorum yok