En son web geliştirme öğreticiler

HTML Formlar


<form> Eleman

HTML formları kullanıcı girişi toplamak için kullanılır.

<form> öğesi bir HTML formu tanımlar:

<form>
.
HTML formları form elemanları içerir.

Form elemanları gönderme düğmeleri ve daha fazlasını girdi elemanları, onay kutuları, radyo düğmeleri farklı türleri vardır.


<input> Eleman

<input> öğesi en önemli formu unsurdur.

<input> elemanı bağlı olarak, bir çok varyasyonları vardır type öznitelik.

İşte bu bölümde kullanılan türleri şunlardır:

tip Açıklama
text Normal metin girişi tanımlar
radio Radyo düğmesi girişi tanımlar (for selecting one of many choices)
submit Gönder düğmesi tanımlar (for submitting the form)

Sen bu eğitimde daha sonra girdi türleri hakkında çok daha fazla öğreneceksiniz.


Metin Girişi

<input type="text"> Metin girişi için bir tek çizgi giriş alanı tanımlar:

Örnek

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>
Kendin dene "

Bu bir tarayıcıda nasıl görüneceğini geçerli:

İsim:

Soyadı:

Note: bir şekilde kendisini görülmez. Ayrıca metin alanının varsayılan genişliği 20 karakter olduğunu unutmayın.


Radio Düğmesi Girdi

<input type="radio"> Bir tanımlayan radio düğmesini.

Radio düğmeleri Kullanıcının seçimler sınırlı sayıda TEK seçin bakalım:

Örnek

<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>
Kendin dene "

Bu HTML kodunu yukarıda bir tarayıcıda nasıl görüntüleneceğini geçerli:

Erkek
Kadın
Diğer


Gönder Düğmesi

<input type="submit"> bir form işleyici için bir form göndermek için bir düğme tanımlar.

form işleyicisi tipik giriş verilerini işlemek için bir komut dosyası ile bir sunucu sayfası.

Form işleyicisi formun belirtilen action özniteliği:

Örnek

<form action="action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>
Kendin dene "

Bu HTML kodunu yukarıda bir tarayıcıda nasıl görüntüleneceğini geçerli:

İsim:

Soyadı:



Action Özellik

action özelliği, form gönderildiğinde eylem gerçekleştirilebilir tanımlar.

Bir sunucuya bir formu göndermek için yaygın yolu, bir Gönder düğmesini kullanmaktır.

Normalde, formu bir web sunucusunda bir web sayfasına gönderilir.

Yukarıdaki örnekte, bir sunucu tarafı komut gönderilen formu işlemek için belirtilir:

<form action="action_page.php ">

Eğer action nitelik atlandığında, aksiyon geçerli sayfaya ayarlanır.


Method Özellik

method özelliği, HTTP yöntemi (belirtir GET veya POST ) formlar göndererek kullanılacak:

<form action="action_page.php" method="get" >

veya:

<form action="action_page.php" method="post" >

Ne zaman Kullanılır GET ?

Sen kullanabilirsiniz GET (the default method) :

Form gönderme pasif ise (like a search engine query) ve hassas bilgileri olmadan.

Eğer kullandığınız zaman GET , form verileri sayfa adresinde görülebilecektir:

action_page.php?firstname=Mickey&lastname=Mouse

GET kısa veri miktarlarına uygundur. Boyut sınırlamaları tarayıcınızda ayarlanır.


Ne zaman Kullanılır POST ?

Sen kullanmalıdır POST :

Form verilerini güncelleme olduğunu veya hassas bilgiler içeriyorsa (password) .

POST gönderilen veri sayfası adresine görünür olmadığı için daha iyi güvenlik sağlar.


Name Özellik

Doğru sunulacak için, her giriş alanı olması gerekir name niteliği.

Bu örnek sadece sunacaktır "Last name" giriş alanını:

Örnek

<form action="action_page.php">
  First name:<br>
  <input type="text" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>
Kendin dene "

Ile Form Verilerini gruplandırma <fieldset>

<fieldset> bir formda benzer eleman grupları.

<legend> elemanı için bir başlık tanımlar <fieldset> elemanı.

Örnek

<form action="action_page.php">
  <fieldset>
    <legend>Personal information:</legend>
    First name:<br>
    <input type="text" name="firstname" value="Mickey"><br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>
Kendin dene "

Bu HTML kodunu yukarıda bir tarayıcıda nasıl görüntüleneceğini geçerli:

Kişisel bilgi: İsim:

Soyadı:



HTML Form Özellikleri

Bir HTML <form> elemanı, mümkün olan tüm özellikler ayarlanmış, bu gibi görünecektir:

<form action="action_page.php" method="post" target="_blank" accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
Egzersizleri ile Yourself test edin!

Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Alıştırma 4»


İşte listesi <form> öznitelikler:

nitelik Açıklama
accept-charset (: Sayfa charset varsayılan) gönderilen form kullanılan karakter kümesini belirtir.
action Bir adres belirtir (url) (: göndererek sayfa varsayılan) form gönderin.
autocomplete Tarayıcı formunu otomatik tamamlamak gerekiyorsa belirtir (default: on) .
enctype Gönderilen verinin kodlamasını belirtir (default: is url-encoded) .
method Formu gönderirken kullanılan HTTP yöntemini belirtir (default: GET) .
name (: Document.forms.name DOM kullanımı için) formunu tanımlamak için kullanılan bir ad belirler.
novalidate tarayıcı Formu gözden gerektiğini belirtir.
target Içinde adresin hedef belirtir action (: _self varsayılan) özniteliği.

Bir sonraki bölümlerde özellikler hakkında daha fazla öğreneceksiniz.


Diğer Örnekler

Bir formdan e-posta gönder
Nasıl bir formdan e-posta göndermek için.