48 – Html Formlar

Form sayfaları bizim kullanıcıdan istediğimiz verileri almamızı sağlar.

Html <form> Elemanı

Form oluşturabilmek için <form> etiketi ile açılış yaparız ve içerisine form ögelerini ekledikten sonra tekrar </form> etiketi ile kapanış yaparız.

Form elemanlarının kapsayıcı ögesidir.

Form elemanları: textfields, checkboxes, radio buttons, submit buttons olabilir.

<form>

.... form elemanları

</form>

Html <input> Elemanları

Html form elemanlarından olan input en sık kullanılan öğedir. input giriş anlamını taşımaktadır. input ile forma eklemek istediğimiz html elemanı tip olarak belirtilir.

Detaylı bir konu olduğu için 51. derste komple ele aldık.

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">

Html Form Text Field – Metin Giriş Alanı

<input type=”text”> Tek satırlık metin giriş alanı tanımlar.

<form>
  <label for="adi">Adınız:</label><br>
  <input type="text" id="adi" name="adi"><br>
  <label for="soyadi">Soy Adınız:</label><br>
  <input type="text" id="soyadi" name="soyadi">
</form>

Html Form <label> Elemanı

label form elemanları için bir etiket belirtir.

Bağlantılı olduğu html form elemanın id’si ile label etiketinin for attribute aynı değeri alır. Bu sayede birbiriyle bağlantılı hale gelir.

Ayrıca ekran okuyucular tarafından label etiketleri okunabilir.

Aşağıdaki örnekte dikkat edin, label elemanının for değeri, input elemanının id değeri ile aynı.

<label for="adi">Adınız:</label><br>
<input type="text" id="adi" name="adi">

Html Form Checkbox – Onay Kutuları

Html checkboxes (onay kutuları), kullanıcının bir veya daha fazla seçeneği seçmesine imkan tanır.

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

  <form>
    <input type="checkbox" id="hobi" name="hobi" value="music">
    <label for="hobi"> Müzik Dinlemek</label><br>
    <input type="checkbox" id="hobi2" name="hobi2" value="football">
    <label for="hobi2"> Futbol Oynamak</label><br>
    <input type="checkbox" id="hobi3" name="hobi3" value="swim">
    <label for="hobi3"> Yüzme</label>
  </form>

Html Form Radio Button – Radyo Düğmeleri

Radio Button seçeneklerden sadece birinin seçilmesine izin verir.

<input type=”radio”> şeklinde tanımlanır.

input içerisinde name attribute için hepsine aynı isim verilir ve bir grup gibi hareket eder. Seçeneklerden yalnızca birini seçmemize izin verir.

  <form>
    <input type="radio" id="html" name="yazilim" value="music">
    <label for="html"> html</label><br>
    <input type="radio" id="css" name="yazilim" value="football">
    <label for="css"> css</label><br>
    <input type="radio" id="javascript" name="yazilim" value="swim">
    <label for="javascript"> javascript</label>
  </form>

Html Form Submit Button – Gönder Düğmesi

Form içerisindeki verilerin, form verilerilerini işleyen sayfaya gönderilmesi için submit button tanımlanır.

Form verilerini okuyan sayfa, bu verileri okuyacak şekilde olan sunucu içerisinde bulunan bir dosyadır.

form elemanının action attributünde form işleyici sayfa tanımlanır.

  <form action="formOku.php" method="post">
      <label for="adi">Adınız:</label> <br/>
      <input type="text" id="adi" name="adi" value="mehmet"><br/>
      <label for="soyadi">Soyadınız:</label><br/>
      <input type="text" id="soyadi" name="soyadi" value="Eser"><br/>
      <input type="submit" value="Gönder">
  </form>

input içerisinde name alanının yazıldığına dikkat edin. Bu sayede veri formOku.php dosyasına gönderilecektir.

input içerisinde ki value değeri verildiğinde varsayılan olarak bir değer atanmış olacak ve içerisinde görünecektir.

Yukarıda ki örnekte formOku.php sayfasına verilerimizi gönderdik. Sunucu tarafından çalışan bu sayfa bizim verilerimizi aldı ve işledi. Merak edenler için formOku.php sayfasının içeriğini paylaşıyorum.

<?php
$adiniz = $_POST['adi'];
$soyadiniz = $_POST['soyadi'];
echo "Form verisi alındı ve işlendi, Buna göre;";
echo "<br />";
echo "Adınız: " ;
echo $adiniz;
echo "<br />";
echo "Soyadınız: ";
echo $soyadiniz;