HTML5 Form Özellikleri

HTML5 Yeni Form Özellikleri

HTML5 <form> ve <input> için bir kaç yeni özelliğe sahiptir.

<form> için yeni özellikleri:

• autocomplete
• novalidate

<input> için yeni özellikler:

• autocomplete
• autofocus
• form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• height ve width
• list
• min ve max
• multiple
• pattern (regexp)
• placeholder
• required
• step

<form> / <input> autocomplete özelliği

autocomplete özelliği bir form ya da input alanının autocomplete özelliğinin on ya da off olacağını belirtir.

autocomplete açık olduğunda, tarayıcı otomatik olarak kullanıcı tarafından önceden girilen bilgileri tamamlar.

İpucu: form'larda autocomplete on yapmak ve belli input alanlarında off yapmak mümkündür, ya da tam tersi.

Not: autocomplete özelliği <form> ile ve şu <input> tipleri ile çalışır: text, search, url, tel, email, password, datepickers, range, ve color.

Örnek

Autocomplete on olan bir HTML form'u. (ve input alanı için off):

<form action="demo_form.php" autocomplete="on">
  İsim:<input type="text" name="fname"><br>
  Soyisim: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

Kendin Dene »

İpucu: Bazı tarayıcılarda bu örneğin çalışması için "otomatik tamamlama" özelliğini aktifleştirmeniz gerekebilir.

<form> novalidate Özelliği

novalidate özelliği bir 0/1 özelliğidir (boolean) (TRUE - FALSE).

Kullanıldığında, form verisinin (input) doğrulanmasına gerek olmadığını belirtir.

Örnek

Gönderileceği zaman, formun doğrulanmadığını belirtir:

<form action="demo_form.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>

Kendin Dene »

<input> autofocus Özelliği

Autofocus özelliği bir 0/1 özelliğidir (boolean) (TRUE - FALSE).

Kullanıldığında, sayfa yüklendiği anda bir <input> elementine odaklanılmasını sağlar. Yani, ilk başta o kısıma veri girmenizi önerir.

Örnek

Sayfa yüklendiğinde "İsim" kısmına odaklanmayı mümkün hale getirelim:

İsim:<input type="text" name="fname" autofocus>

Kendin Dene »

<input> form Özelliği

Form özelliği, bir <input> elementinin hangi form ya da formlara ait olduğunu belirtir.

İpucu: Bir form'dan fazla ise form'ların id'lerini aralarında boşluklar bırakarak giriniz.

Örnek

HTML form elementinin dışında olmasına rağmen, halen o form'a ait olan input alanı:

<form action="demo_form.php" id="form1">
  İsim: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
</form>

Soyisim: <input type="text" name="lname" form="form1">

Kendin Dene »

<input> formaction Özelliği

Formaction özelliği, bir form gönderildiğinde giriş denetimi (input control) işleyecek bir dosyanın URL'sini belirtir.

Formaction <form> elemanın eylem özniteliği geçersiz kılar.

Not: Formaction özelliği type="submit" ve type="image" ile kullanılır.

Örnek

Farklı iş gören iki submit (gönder) butonu olan bir HTML form:

<form action="demo_form.php">
  İsim: <input type="text" name="fname"><br>
  Soyisim: <input type="text" name="lname"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formaction="demo_admin.php"
  value="Submit as admin">
</form>

Kendin Dene »

<input> formenctype Özelliği

Formenctype özelliği, form-data'nın sunucuya gönderilirken nasıl şifrelenmesi gerektiğini belirtir. (sadece method="post" olan form'lar için)

Formenctype özelliği, <form> elemanının enctype özniteliği geçersiz kılar.

Not: Formenctype özelliği type="submit" ve type="image" ile kullanılır.

Örnek

Birinci submit butonu normal kodlanırken, ikinci olan ise "multipart/form-data" olarak kodlanmıştır:

<form action="demo_post_enctype.php" method="post">
  İsim: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data"
  value="Submit as Multipart/form-data">
</form>

Kendin Dene »

<input> formmethod Özelliği

Formmethod özelliği, eylem URL'sine form-data göndermek için HTTP yöntemini tanımlar

Formmethod özelliği, <form> elementinin method özelliğini geçersiz kılar.

Not: Formmethod özelliği type="submit" vetype="image" ile kullanılabilir.

Örnek

İkinci gönderme düğmesi formun HTTP yöntemini geçersiz kılar:

<form action="demo_form.php" method="get">
  İsim: <input type="text" name="fname"><br>
  Soyisim: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formmethod="post" formaction="demo_post.php"
  value="Submit using POST">
</form>

Kendin Dene »

<input> formnovalidate Özelliği

Formnovalidate bir 0/1 özelliğidir (boolean) (TRUE - FALSE).

Kullanıldığında, <input> elementinin doğrulanmaması gerektiğini belirtir.

Formnovalidate özelliği, <form> elementinin novalidate özelliğini geçersiz kılar.

Not: Formnovalidate özelliği type="submit" ile kullanılabilir.

Örnek

İki submit butonu olan bir form (doğrulamalı ve doğrulamasız)

<form action="demo_form.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formnovalidate value="Submit without validation">
</form>

Kendin Dene »

<input> formtarget Özelliği

Formtarget özelliği, form gönderildikten sonra alınan cevabın nerede görüntüleneceğini gösteren bir isim (name) ya da anahtar kelime (keyword) belirtir.

Formtarget özelliği, <form> elementinin target özelliğini geçersiz kılar.

Not: Formtarget özelliği type="submit" ve type="image" ile kullanılabilir.

Örnek

İki submit butonu olan ve farklı hedef pencereleri olan bir form:

<form action="demo_form.php">
  İsim: <input type="text" name="fname"><br>
  Soyisim: <input type="text" name="lname"><br>
  <input type="submit" value="Submit as normal">
  <input type="submit" formtarget="_blank"
  value="Submit to a new window">
</form>

Kendin Dene »

<input> height (yükseklik) ve width (genişlik) Özelliği

Height ve width özelliği, bir <input> elementinin yükseklik ve genişliğini belirtir.

Not: Height ve width özelliği sadece <input type="image"> ile kullanılabilir.

İpucu: Resimler için her zaman bu iki özelliği de kullanın. Yükseklik ve genişlik ayarlı ise sayfa yüklendiğinde, görüntü için gerekli alan ayrılmış olacaktır. Ancak, bu özellikler olmadan, tarayıcı görüntünün boyutunu bilmediği için buna uygun bir alan ayıramaz. Etkisi (görüntüler yüklenirken) sayfa düzeni yüklemesi sırasında değişecektir.

Örnek

Submit butonu olarak yüksekliği ve genişliği ayarlanmış olan bir resim tanımlayın:

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

Kendin Dene »

<input> list Özelliği

List özelliği, bir <input> elemanı için önceden tanımlanmış seçenekler içeren bir <datalist> element anlamına gelir.

Örnek

Bir <datalist> içinde değeleri önceden tanımlanmış bir <input> elementi:

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

Kendin Dene »

<input> min ve max Özelliği

Min ve max özelliği, bir <input> elementi için minimum ve maksimum değerleri belirtir.

Not: Min ve max şu input tipleri ile çalışır: number, range, date, datetime, datetime-local, month, time ve week.

Örnek

Min ve max değerleri olan <input> elementleri:

01-01-1980'den önce bi tarih girin:
<input type="date" name="bday" max="1979-12-31">

01-01-2000'den sonra bir tarih girin:
<input type="date" name="bday" min="2000-01-02">

1 ile 5 arasında bir değer girin:
<input type="number" name="quantity" min="1" max="5">

Kendin Dene »

<input> multiple Özelliği

Multiple özelliği bir 0/1 özelliğidir (boolean) (TRUE - FALSE).

Kullanıldığında, kullanıcının <input> elementine 1'den fazla değer girmesine izin verir.

Not: Multiple özelliği, şu input tipleri ile çalışır: email ve file.

Örnek

1'den fazla değer kabul eden dosya yükleme alanı:

Resimleri seçiniz: <input type="file" name="img" multiple>

Kendin Dene »

<input> pattern Özelliği

Pattern özelliği, bir <input> alanına girilecek olan değerin hangi düzende olması gerektiğini belirtir.

Not: Pattern özelliği şu input tipleri ile çalışır: text, search, url, tel, email ve password.

Örnek

Sadece üç harfe izin veren bir input alanı (rakam yok, özel karakter yok):

Ülke kodu: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Üç karakterli ülke kodu">

Kendin Dene »

<input> placeholder Özelliği

Placeholder özelliği, bir giriş alanının beklenen değerini açıklayan kısa bir ipucu belirtir.

Kullanıcı bir değer girmeden önce kısa bir ipucu gözükecektir.

Not: Placeholder özelliği şu input tipleri ile çalışır: text, search, url, tel, email ve password.

Örnek

Placeholder metni olan bir input alanı:

<input type="text" name="fname" placeholder="İsim">

Kendin Dene »

<input> required Özelliği

Required özelliği bir 0/1 özelliğidir (boolean) (TRUE - FALSE).

Kullanıldığında, form gönderilmeden önce istenen input alanlarının mutlaka doldurulması gerektiğini belirtir.

Not: Required özelliği şu input tipleri ile çalışır: text, search, url, tel, email, password, date pickers, number, checkbox, radio ve file.

Örnek

Required (zorunlu) olan bir input alanı:

Kullanıcı adı: <input type="text" name="usrname" required>

Kendin Dene »

<input> step Özelliği

Step özelliği, bir input alanı için girilebilecek sayı değeri aralığını belirtir.

Örnek: Eğer step="3" ise, değerler -3, 0, 3, 6, vs. olabilir.

İpucu: Bir gerçek değerler aralığı oluşturmak için step özelliği max and min özellikleri ile kullanılabilir.

Not: Step özelliği şu input tipleri ile çalışır: number, range, date, datetime, datetime-local, month, time ve week.

Örnek

Değer aralığı belirtilmiş bir input alanı:

<input type="number" name="points" step="3">

Kendin Dene »