banner
htmldersleri
Ana SayfaANA SAYFA Dersler | Örnekler | Forum | Sıkça Sorulan Sorular |Hakkında
HTML Temel
HTML Giriş
HTML Elementler
HTML Etiketler
HTML Parametreler
HTML Biçimlendirme
HTML Özeller
HTML Bağlantılar
HTML Çerçeveler
HTML Tablolar
HTML Listeleme
HTML Formlar
HTML Resimler
HTML Arka Plan
HTML Renkler
HTML Renk Değerleri
HTML Renk İsimleri
HTML Hızlı Liste

HTML5 Ana Menü
HTML5 Giriş
HTML5 Anlamlandırma
HTML5 Giriş Tipleri
HTML5 Form Elementleri
HTML5 Form Özellikleri
HTML5 Canvas
HTML5 SVG
HTML5 Video
HTML5 Audio
HTML5 Konum
HTML5 Sürükle/Bırak
HTML5 Web Depolama
HTML5 Uygulama Bellekleme
HTML5 Web Çalışanı
HTML5 SSE

HTML Gelişmiş
HTML Tasarım
HTML Fontlar
HTML Stiller
HTML Başlık
HTML Meta
HTML URL
HTML Scriptler
HTML Std. Nitelikler
HTML Olaylar
HTML ASCII
HTML Web Sunucu

HTML Örnekler/Test
HTML Örnekler
HTML Örnek Site
HTML Test

HTML5 Form Özellikleri

Önceki Sonraki

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.

OperaSafariChromeFirefoxInternet Explorer

Ö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.

OperaSafariChromeFirefoxInternet Explorer

Ö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.

OperaSafariChromeFirefoxInternet Explorer

Ö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.

OperaSafariChromeFirefoxInternet Explorer

Ö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.

OperaSafariChromeFirefoxInternet Explorer

Ö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.

OperaSafariChromeFirefoxInternet Explorer

Ö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.

OperaSafariChromeFirefoxInternet Explorer

Ö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.

OperaSafariChromeFirefoxInternet Explorer

Ö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.

OperaSafariChromeFirefoxInternet Explorer

Ö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.

OperaSafariChromeFirefoxInternet Explorer

Ö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.

OperaSafariChromeFirefoxInternet Explorer

Ö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.

OperaSafariChromeFirefoxInternet Explorer

Ö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.

OperaSafariChromeFirefoxInternet Explorer

Ö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.

OperaSafariChromeFirefoxInternet Explorer

Ö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.

OperaSafariChromeFirefoxInternet Explorer

Ö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.

OperaSafariChromeFirefoxInternet Explorer

Ö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.

OperaSafariChromeFirefoxInternet Explorer

Örnek

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

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

Kendin Dene »

Önceki Sonraki

Dersler | Örnekler | Forum | Sıkça Sorulan Sorular |Hakkında
Copyright © 2008 | Tüm Hakları Saklıdır. | Webmaster: destek@htmldersleri.org

76 kişi şuan sayfamızda geziniyor.

English Deutsch Français Español Dutch Italiano Português Български
html dersleri
Dersler Örnekler Online Test