HTML 5 Dersleri 5 - Form Özellikleri

Merhaba dostlar, bu dersimiz ile "Form Özellikleri" konusunu işleyerek yapacağınız formlarda yeni nesil elementler ve nitelikler kullanmanızı sağlayacağız. Pratik yapmayı unutmayınız.

Taha Furkan Bayar Taha Furkan Bayar
Ekim 17, 2022 - 11:02 Updated: Ekim 30, 2022 - 17:07
0 232
HTML 5 Dersleri 5 - Form Özellikleri

HTML 5 İle Yeni Form Özellikleri Nelerdir ?

HTML5 <form> ve <input> yeni özellikler ile geldi.

<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 ve Input Autocomplete Özelliği Nedir ?

autocomplete niteliği form yada input'ın autocomplete özelliğini kapatığ açma özelliğini belirtir.

autocomplete açıldığında, tarayıcı auto olarak kullanıcıların daha önceden girdiği bilgileri kendiliğinden tamamlar.

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

İsim:
Soyisim:
E-mail:

Form Novalidate Niteliği Ne İşe Yarar ?

Novalidate niteliği 0 ve 1 özelliğidir. True ve False seçeneği işlevini görür.

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

E-mail:

Input Autofocus Niteliği Ne İşe Yarar ?

Kullanıldığı zaman, sayfa yüklenirken herhangi bir <input> focus almayı sağlar. Yani, ilk olarak o veri arenasına veri girmenizi tavsiye eder.

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

İsim :

Input Form Niteliği Ne İşe Yarar ?

Form niteliği, Input elementinin form olarak hangi elemente ait olduğunu belirler.

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

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

İsim:


Soyisim:

Input Formaction Niteliği Ne İşe Yarar ?

Formaction, bir form için Input'ın gideceği URL'yi velirtir. Input hangi dosya yolunu gösterir ise Formaction özelliği oraya yönlendirir.

<form action="#">
  İ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>

İsim:


Soyisim:


   

Input Formenctype Niteliği Ne İşe Yarar ?

Formenctype özniteliği, sunucuya gönderildiğinde form verilerinin nasıl şifrelenmesi gerektiğini belirtir. (yalnızca method="post" içeren formlar için)

Formenctype niteliği, <form> öğesinin enctype niteliğini geçersiz kılar.

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

<form action="#" 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>

İsim:


     

Input Formmethod Niteliği Ne İşe Yarar ?

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

Formmethod özniteliği, <form> öğesinin yöntem özniteliğini geçersiz kılar.

Not: formmethod niteliği type="submit" ve type="image" ile kullanılabilir.

<form action="#" 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>

İsim:


Soyisim:


     

Formnovalidate Niteliği Ne İşe Yarar ?

Formnovalidate bir 0/1 özelliğidir (boolean) (doğru-yanlış).

<input> öğelerinin kullanıldığında doğrulanmaması gerektiğini belirtir.

formnovalidate niteliği, <form> öğesinin novalidate niteliğini geçersiz kılar.

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

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

E-mail:


     

Formtarget Niteliği Ne İşe Yarar ?

Formtarget özelliği, form gönderildikten sonra alınan yanıtın nerede görüntüleneceğini belirten bir ad veya anahtar sözcük belirtir.

formtarget niteliği, <form> öğesinin hedef niteliğini geçersiz kılar.

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

<form action="#">
  İ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>

İsim:


Soyisim:


     

*Sizler de pratikler yaparak bu yeni özellikleri deneyerek öğrenebilirsiniz.

Etiketler: