HTML formu

HTML formu, farklı türdeki kullanıcı girdilerini toplamak için kullanılır.

<form> elementi

HTML formu, kullanıcıdan veri toplamak için kullanılır.

<form> elementi HTML formunu tanımlar:

Örnek

<form>
 .
form elements
 .
</form>

HTML formuform elementleri。

Form elementleri, farklı türdeki input elementleri, onay kutuları, seçenek düğmeleri, gönderme düğmeleri vb.'dir.

<input> elementleri

<input> elementleri en önemlilerindendirform elementleri。

<input> elementi, farklı type özellikleri

Bu bölümde kullanılan türler şunlardır:

Tür Açıklama
text Normal metin girdisini tanımlar
radio Seçenek düğmesi girdisini (birkaç seçenekten birini seçmeyi) tanımlayın
submit Gönderme düğmesini (formu göndermeyi) tanımlayın

Açıklama:Bu eğitim sırasında daha fazla bilgi edineceksiniz.

Metin girdisi

<input type="text"> tanımlar:Metin girdisisatırlı girdi alanları olarak tanımlar:

Örnek

<form>
 İsim:<br>
<input type="text" name="firstname">
<br>
 Soyadı:<br>
<input type="text" name="lastname">
</form>

Deneyin

Tarayıcıda şu şekilde görünecektir:

Adı:


Soyadı:

Açıklama:Form kendisi görünmezdir. Ayrıca, metin alanlarının varsayılan genişliği 20 karakterdir.

Seçenek düğmesi girdisi

<input type="radio"> tanımlarSeçenek düğmeleri。

Seçenek düğmeleri, kullanıcıya sınırlı sayıda seçenekten birini seçme izni verir:

Örnek

<form>
<input type="radio" name="sex" value="male" checked>Erkek
<br>
<input type="radio" name="sex" value="female">Kadın
</form>

Deneyin

Seçenek düğmeleri tarayıcıda şu şekilde görünecektir:

Erkek

Kadın

Gönderme düğmesi

<input type="submit"> kullanıcıdan veri almak için tanımlananForm işleyici（form-handler）Gönderform düğmeleri

Form işleyici, girdi verilerini işleyecek betikleri içeren sunucu sayfasıdır.

Form işleyici, formun action Özellikte belirtildiği gibi:

Örnek

<form action="action_page.php">
İsim:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Soyadı:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

Deneyin

Tarayıcıda şu şekilde görünecektir:

Adı:


Soyadı:


Action özelliği

action özelliğiFormu gönderirken gerçekleştirilecek eylemi tanımlayın.

Formu sunucuya göndermenin yaygın yolu, gönderme düğmesini kullanmaktır.

Genellikle, form web sunucusundaki bir web sayfasına gönderilir.

Örnekte, sunulan formu işleyecek belirli bir sunucu betiği belirtildi:

<form action="action_page.php">

action özelliği atlanırsa, action mevcut sayfa olarak ayarlanır.

Method Özelliği

method özelliğiFormu gönderirken kullanılan HTTP yöntemini belirler (GET veya POST)

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

veya:

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

GET ne zaman kullanılır?

GET (varsayılan yöntem) kullanabilirsiniz:

Form gönderimi pasifse (örneğin, arama motoru sorgusu) ve duyarlı bilgi içermezse.

GET kullanıldığında, form verileri sayfa adres çubuğunda görülebilir:

action_page.php?firstname=Mickey&lastname=Mouse

Açıklama:GET, az miktarda verinin gönderilmesine en uygunudur. Tarayıcı, kapasite sınırlaması belirler.

POST ne zaman kullanılır?

POST kullanmanız gerektiğini düşünmelisiniz:

Form verileri güncelleniyor veya duyarlı bilgiler (örneğin, parola) içeriyorsa.

POST, sayfa adres çubuğunda gönderilen verilerin görünmez olması nedeniyle daha güvenlidir.

Name Özelliği

Her girdi alanının doğru bir şekilde gönderilebilmesi için her bir girdi alanına bir name özelliği ayarlanmalıdır.

Bu örnekte sadece "Soyadı" girdi alanı gönderilecektir:

Örnek

<form action="action_page.php">
İsim:<br>
<input type="text" value="Mickey">
<br>
Soyadı:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

Deneyin

<fieldset> ile form verilerini bir araya getirin

<fieldset> Formdaki ilgili verileri bir araya getirir.

<legend> Element, <fieldset> elementi tarafından tanımlanan başlığı tanımlar.

Örnek

<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
İsim:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Soyadı:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>

Deneyin

Bu HTML kodu tarayıcıda şu şekilde görünecektir:

Kişisel bilgiler:
Adı:


Soyadı:


HTML Form Özellikleri

HTML <form> örneği, tüm olası özellikleri şu şekilde ayarlanmıştır:

Örnek

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form elements
 .
</form>

Aşağıda <form> özelliklerinin listesi bulunmaktadır:

Özellik Açıklama
accept-charset Gönderilen formda kullanılan karakter setini belirtir (varsayılan: sayfa karakter seti).
action Formun nereye gönderileceği adresini (URL) belirtir (gönderim sayfası).
autocomplete Tarayıcının formu otomatik olarak tamamlamasını belirtir (varsayılan: açıktır).
enctype Gönderilen verilerin kodlamasını belirtir (varsayılan: url-encoded).
method Formun gönderilirken kullanılan HTTP yöntemini belirtir (varsayılan: GET).
name Formun adını tanımlar (DOM için: document.forms.name).
novalidate Tarayıcının formu doğrulamamasını belirtir.
target action özelliğinde adresin hedefini belirtir (varsayılan: _self).

Açıklama:Aşağıdaki bölümlerde özellikler hakkında daha fazla bilgi öğreneceksiniz.