Otomatik tamamlama fonksiyonu internet üzerinde artık sevilen bir özellik haline gelmiştir. Bir form alanına bir şey yazdığınızda, tarayıcılar - işlev etkinleştirildiyse ve tarayıcı tarafından destekleniyorsa - kelime önerilerinin bir listesini sunar.
Bu tür uygulamalar artık çok kolay bir şekilde gerçekleştirilebilir. Bunun için input öğesine autocomplete özniteliği atanır.
<input type="text" autocomplete="on" />
on değeri ile otomatik tamamlama alanı etkinleştirilir. Artık tarayıcı, alana girilen değerleri hatırlar ve daha sonra bir seçim listesi üzerinden sunar. Böylece formlar çok daha hızlı doldurulabilir.
Bu davranış her alanda istenmeyebilir. Bu durumlarda otomatik tamamlama özellikle devre dışı bırakılabilir. Bunun için autocomplete özniteliğine off değeri atanır
<input type="text" autocomplete="off" />
Bunun yerine, form öğesine de autocomplete özniteliği eklenebilir. Burada on veya off değerinin kullanılmasına bağlı olarak, otomatik tamamlama fonksiyonu form genelinde etkinleştirilir veya devre dışı bırakılır.
<form autocomplete="on"> .. </form>
Form içinde karşıt değerler verildiğinde, bunlar geçerlilik kazanır.
<form autocomplete="on"> Ad: <input type="text" name="vname" autocomplete="off" /><br /> Soyad: <input type="text" name="nname" /><br /> Posta Kodu: <input type="text" name="plz" /><br /> Şehir: <input type="text" name="ort" /> </form>
Bu örnekte, başlangıçtaki form öğesinde autocomplete değeri on olarak ayarlandığı için otomatik tamamlama tüm form alanlarına uygulanacaktır. Tek istisna, vname alanıdır. Bu alanda otomatik tamamlama açıkça devre dışı bırakıldı.
Otomatik tamamlamanın çalışabilmesi için bu işlevin tarayıcı tarafından desteklenmesi ve devre dışı bırakılmamış olması gerekmektedir. Ayrıca, öneri listesinde yalnızca daha önce en az bir kez girilmiş olan değerler görüntülenir.
Vorschlagsliste herhangi bir değeri kabul etmesi için HTML5 ile gelen datalist öğesi tanıtıldı. Bu öğe, tarayıcıda görünür bir çıktı oluşturmaz. Alt öğeler olan option öğeleri aracılığıyla öneri listeleri için değerler tanımlanabilir. Bir örnek:
<div> Dil: <br /> <input type="text" autocomplete="on" list="sprache" /> </div> <datalist id="sprache"> <option value="HTML5"></option> <option value="XHTML"></option> <option value="PHP"></option> <option value="JavaScript"></option> </datalist>
input öğesinin list özniteliği ile giriş alanı ve datalist öğesi arasında mantıksal bir bağlantı kurulur. Bunun için list ve datalist özniteliğinde aynı değerlerin kullanılması gerekmektedir.
Odaklan
Bir sayfa yüklendiğinde bir form alanına otomatik olarak odak atanabilir. Bu tür bir işlevi Google'ın ana sayfasından örneğin tanıyabilirsiniz. Bu sayfa açıldığında, arama terimini el ile arama/giriş alanına yerleştirmeden doğrudan yazabilirsiniz.
HTML5'te, bu tür durumlar için autofocus özniteliği bulunmaktadır. Bu öznitelik, sayfa yüklendiğinde bu şekilde donatılan form alanına otomatik odaklanmayı sağlar.
Bir örnek:
<form> <input name="suchfeld" autofocus="autofocus" /> <input type="submit" value="Suche" /> </form>
autofocus özniteliğini tanımayan tarayıcılar, sadece görmezden gelir. Bu görmezden gelme olumsuz etkiler oluşturmaz. (Ancak alan odaklanmaz).
Girişleri Kontrol Et
Şimdiye kadar, yalnızca HTML araçlarıyla form girişlerini doğrulamak mümkün değildi. Örneğin, bir kullanıcının gerçekten form alanına bir e-posta adresi girip girmediğini test etmek istiyorsanız, genellikle bunun için JavaScript veya PHP'ye başvurulurdu. HTML5'te ise bu 'bükülmeler' artık gereksiz değil. Çünkü artık HTML tarafından bir doğrulama API'si bulunmaktadır. Ve oldukça etkili bir API'dir. Çok az çaba ile artık form girişleri kontrol edilebilir.
HTML5, alanların nasıl doğrulandığına dair bazı kurallara sahiptir. Örneğin, email türündeki giriş alanları, geçerli bir e-posta adresinin girilip girilmediğini kontrol eder.
• url - URL kontrolü yapar
• email - E-posta adresi kontrolü yapar
• range - Ondalık sayı kontrolü yapar
• number - Ondalık sayı kontrolü yapar
Bir alanı zorunlu alan olarak işaretlemek için required özniteliği atanır.
<input id="vname" name="vname" type="text" required="required" />
Bu şekilde işaretlenmiş bir alan doldurulmalıdır, yani boş olmamalıdır.
Ancak dikkat: Alanların doğrulanması için belirli koşullar yerine getirilmelidir.
• Öğeye name özniteliği atanmalıdır.
• Öğe, bir form öğesinin içinde olmalıdır, yani bir HTML formunda bulunmalıdır. Bunun alternatifi olarak, form ile bağlantı form özniteliği aracılığıyla da kurulabilir.
• Öğe readonly ya da disabled özniteliğine sahip olmamalıdır.
Doğru bir kullanım aşağıdaki gibi olmalıdır:
<form action="form.php">
<input id="vname" name="vname" type="text" required="required" />
<input type="submit" />
</form>
Burada tarayıcı alanın doldurulup doldurulmadığını kontrol eder. Alan boşsa ve yine de form gönderilmeye çalışılırsa, tarayıcının bir hata mesajı çıkarması gerekmektedir.
Bu seride, email, range, number, tel ve url form alanı türlerine defalarca değinildi. Bu alanlar sadece bir değer içerip içermediği değil aynı zamanda girilen değerin doğru olup olmadığı da kontrol edilir.
<form action="form.php">
<input id="email" name="email" type="email" />
<input type="submit" />
</form>email türündeki alanlar için örneğin, girilen değerin sözdizimsel olarak doğru bir e-posta adresi olup olmadığı kontrol edilir. Eğer değilse, tarayıcı bir hata mesajı gösterir.
Hata mesajlarının görüntülenmesi tarayıcıların sorumluluğundadır.
Alanların otomatik olarak kontrol edilmemesi
Her durumda girişlerin otomatik olarak doğrulanması gerekmeyebilir. Tüm formun doğrulanmasını engellemek istenirse, başlatıcı form öğesine novalidate özniteliği atanır.
<form action="form.php" novalidate>
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
Bunun alternatifi olarak, bir Gönder düğmesine formnovalidate özniteliği eklenir. Bu özellik örneğin, bir Formu gönder düğmesi yanında formun geçici olarak kaydedilmesine olanak tanıyan bir düğme sunulacağı zaman ilginç olabilir.
<form action="form.cgi" method="post">
<input id="email" name="email" type="email" />
<input type="submit" name="submit" value="Gönder" />
<input type="submit"
formnovalidate="formnovalidate" value="Kaydet" />
<input type="submit"
formnovalidate="formnovalidate" value="Çıkış Yap" />
</form>
Bu durumda form sadece ilk Gönder düğmesiyle doğrulanır. Diğer ikisi ise formun kaydedilmesi ve çıkış yapılması için kullanılır. Bu durumda doğrulama gereksizdir.
