HTML Formlar

Kullanıcıların veri girişlerini toplamak için bir HTML formları vardır. Kullanıcı girişi çoğunlukla işlenmek üzere bir sunucuya gönderilir.

<form> Etiketi

HTML <form> etiketi, kullanıcı girişi için bir HTML formu oluşturmak için kullanılır:

<form>
.
form elemanları
.
</form>

<input> etiketi, metin alanları, onay kutuları, radyo düğmeleri, gönder düğmeleri vb. gibi farklı türde giriş öğeleri için bir kaptır.

Tüm farklı form öğelerini ilerleyen yazılarda daha detaylı olarak anlatacağız.

HTML <input> Etiketi

<input> etiketi en çok kullanılan form etiketidir. Bir <input> ögesi, type özelliğine bağlı olarak bir çok şekilde kullanılmakta.

Aşağıdaki tabloyu inceleyebilirsiniz.

TypeAçıklama
<input type=”text”>Tek satırlık metin giriş alanı oluşturur
<input type=”radio”>Radio buton oluşturur. Çok seçenekli alandan tek seçim yapmak için kullanılır.
<input type=”checkbox”>Checkbox oluşturur. Çok seçenekli alandan çoklu seçim yapmak için kullanılır.
<input type=”submit”>Buton oluşturur. Bu buton formun verilerini göndermek için kullanılır.
<input type=”button”>Tıklanabilir buton oluşturur.

HTML Metin Alanları (Text Fields)

<input type=”text”> ile oluşturulur. Tek satırlık metin giriş alanıdır.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<form>
  <label for="ad">Adınız:</label><br>
  <input type="text" id="ad" name="ad"><br>
  <label for="soyad">Soyadınız:</label><br>
  <input type="text" id="soyad" name="soyad">
</form>

</body>
</html>

Metin kutusunun varsayılan genişliği 20 karakterdir.

<label> Etiketi

Yukarıdaki örnekte <label> etiketinin kullanımı gösterilmiştir. <label> etiketi birçok form ögesi için etiket tanımlar. label etiketinin kullanımı son derece önemlidir. Ekran okuyucusu kullanan kişilerde bu etiket yüksek sesle okunacaktır. Label etiketi ayrıca küçük bölgelere (radio button, check box gibi) tıklamakta zorluk çeken kullanıcılara yardımcı olur. Label’e tıklanması durumunda checkbox ya da radiobutton’un onay kutusu/ durumu değişir.

Label ile ilgili nesneyi birbirine bağlamak için <label> etiketinin for niteliği <input> etiketinin id değerine eşit olmalıdır.

Radio Button

<input type=”radio”> radio button tanımlamak için kullanılır. Bu butonlar çok seçenekli bir alandan tekli seçim yapmak için kullanılır.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<p>Dili Seçin:</p>

<form>
  <input type="radio" id="html" name="prog_dil" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="prog_dil" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="prog_dil" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

</body>
</html>

Checkbox

<input type=”checkbox”> ile tanımlanır.

Bir veya birden çok seçim yapılan yerlerde checkbox kullanılır.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bisiklet">
  <label for="vehicle1"> Bisiklet Kullanıyorum</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Araba">
  <label for="vehicle2"> Araba Kullanıyorum</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Motor">
  <label for="vehicle3"> Motor Kullanıyorum</label>
</form>

</body>
</html>

Submit Button

<input type=”submit”> ile form verilerini bir form işleyicisine göndermek için düğme tanımlanabilir. Form işleyicisi genellikle sunucuda bulunan giriş verilerini işlemeye yarayan komut dosyalarını barındırır.

Form işleyicisi formun action kısmında belirtilir.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<form action="/yonlendirme_sayfa.php">
  <label for="ad">Ad:</label><br>
  <input type="text" id="ad" name="ad" value=""><br>
  <label for="soyad">Soyad:</label><br>
  <input type="text" id="soyad" name="soyad" value=""><br><br>
  <input type="submit" value="Gönder">
</form>

</body>
</html>

<input> İçin Name Özelliği

Her giriş alanının birbirinden farklı name yani ad özelliğine sahip olması gerekir. name özelliği atlanırsa giriş alanının değeri hiç bir şekilde sunucuya gönderilmez.

Aşağıdaki örnekte Ad giriş alanının değeri gönderilmeyecektir.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<form action="/yonlendirme_sayfa.php">
  <label for="ad">Ad:</label><br>
  <input type="text" id="ad"><br> 
  <input type="submit" value="Gönder">
</form>

</body>
</html>
18 Ekim 2023
Was this article helpful?

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir