HTML Ders 3: Formlar

HTML Formları

HTML formları, kullanıcıdan veri almak için kullanılan temel yapıdır. Formlar, giriş alanları, butonlar, onay kutuları ve radyo düğmeleri gibi bileşenleri içerir.

1. Temel Form Yapısı

Bir form oluşturmak için <form> etiketi kullanılır. İşte temel bir form örneği:



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

    <label for="ad">Adınız:</label>

    <input type="text" id="ad" name="ad">

    <label for="email">E-posta:</label>

    <input type="email" id="email" name="email">

    <input type="submit" value="Gönder">

</form>

2. Form Elemanları

HTML formları farklı giriş elemanları içerir. İşte en yaygın kullanılan bazı form elemanları:

Metin Kutusu: Kullanıcının metin girmesini sağlar.
Parola Alanı: Şifre girişi için kullanılır.
E-posta Alanı: Kullanıcının e-posta adresi girmesini sağlar.
Onay Kutusu (Checkbox): Çoklu seçim için kullanılır.
Radyo Butonu: Kullanıcının tek bir seçenek seçmesini sağlar.
Düğme (Button): Formu göndermek veya belirli bir işlem yapmak için kullanılır.

3. Form Örneği

Aşağıda çeşitli giriş elemanlarını içeren bir form örneği bulunmaktadır:



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

    <label for="username">Kullanıcı Adı:</label>

    <input type="text" id="username" name="username" required>

    <label for="password">Şifre:</label>

    <input type="password" id="password" name="password" required>

    <label for="email">E-posta:</label>

    <input type="email" id="email" name="email">

    <label>Cinsiyet:</label>

    <input type="radio" id="erkek" name="cinsiyet" value="erkek">

    <label for="erkek">Erkek</label>

    <input type="radio" id="kadin" name="cinsiyet" value="kadin">

    <label for="kadin">Kadın</label>

    <label for="hobi">Hobileriniz:</label>

    <input type="checkbox" id="spor" name="hobi" value="spor">

    <label for="spor">Spor</label>

    <input type="checkbox" id="müzik" name="hobi" value="müzik">

    <label for="müzik">Müzik</label>

    <label for="sehir">Şehir Seçiniz:</label>

    <select id="sehir" name="sehir">

        <option value="istanbul">İstanbul</option>

        <option value="ankara">Ankara</option>

        <option value="izmir">İzmir</option>

    </select>

    <label for="mesaj">Mesajınız:</label>

    <textarea id="mesaj" name="mesaj" rows="4"></textarea>

    <input type="submit" value="Gönder">

</form>

4. Form Verilerini Gönderme

HTML formları, action ve method parametreleri ile verileri bir sunucuya gönderebilir. İki yaygın metod vardır:

GET: Form verilerini URL üzerinden gönderir. Örnek: Google Arama
POST: Form verilerini HTTP isteği içinde gönderir, daha güvenlidir.

5. HTML5 ile Gelişmiş Form Elemanları

HTML5, formları daha güçlü hale getiren yeni giriş türleri ve özellikler sunar:



<input type="date" name="dogum_tarihi">

<input type="number" name="yas" min="18" max="100">

<input type="color" name="favori_renk">

6. Form Doğrulama (Validation)

HTML5 ile birlikte gelen form doğrulama özellikleri sayesinde, kullanıcıdan alınan verilerin belirli kurallara uygun olup olmadığı kontrol edilebilir.

6.1. Gerekli Alanlar (Required)

required özelliği, bir giriş alanının boş bırakılamayacağını belirtir.


<input type="text" name="ad" required>

6.2. Minimum ve Maksimum Uzunluk

minlength ve maxlength ile bir giriş alanına girilebilecek karakter sayısı sınırlandırılabilir.


<input type="text" name="kullanici_adi" minlength="5" maxlength="15" required>

6.3. Düzenli İfadeler (Pattern)

pattern özelliği, belirli bir formatta veri girişi yapılmasını zorunlu kılar.


<input type="text" name="telefon" pattern="\d{10}" placeholder="5551234567" required>

6.4. Sayı Aralıkları

min ve max ile bir sayı giriş alanının sınırlarını belirleyebilirsiniz.


<input type="number" name="yas" min="18" max="65" required>

7. Formda Kullanılan Özel HTML5 Giriş Tipleri

HTML5 ile birlikte gelen bazı yeni giriş türleri aşağıda listelenmiştir:

email: Sadece geçerli bir e-posta adresi girilmesine izin verir.
url: Geçerli bir URL formatında giriş yapılmasını zorunlu kılar.
tel: Telefon numarası girişi için kullanılır.
date: Takvim seçici ile tarih girişine olanak tanır.
range: Kaydırma çubuğu ile belirli bir aralıkta değer seçimi sağlar.

7.1. Örnek Kullanım


<form>
    <label for="email">E-posta:</label>
    <input type="email" id="email" name="email" required>

    <label for="web">Web Sitesi:</label>
    <input type="url" id="web" name="web">

    <label for="tel">Telefon:</label>
    <input type="tel" id="tel" name="tel">

    <label for="dogum">Doğum Tarihi:</label>
    <input type="date" id="dogum" name="dogum">

    <label for="puan">Puan (0-100):</label>
    <input type="range" id="puan" name="puan" min="0" max="100">

    <input type="submit" value="Gönder">
</form>

Uyarı! Eğer PHP, JavaScript ve CSS dillerine hakim değilseniz, ilerleyen dönemde yayınlayacağımız temel dersleri takip ederek formların tasarımını yapabilir veya denemeler gerçekleştirebilirsiniz. Bu diller hakkında bilgi sahibi değilseniz, şu an için beklemeniz daha uygun olacaktır.

8. Formları CSS ile Şekillendirme

Form elemanlarını CSS kullanarak daha estetik hale getirebiliriz.


<style>
    form {
        width: 400px;
        margin: auto;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background: #f9f9f9;
    }
    label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
    }
    input, select, textarea {
        width: 100%;
        padding: 8px;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    input[type="submit"] {
        background: #28a745;
        color: white;
        border: none;
        padding: 10px;
        cursor: pointer;
    }
    input[type="submit"]:hover {
        background: #218838;
    }
</style>

9. Form İşlemlerinde JavaScript Kullanımı

HTML formlarını daha etkileşimli hale getirmek için JavaScript kullanabiliriz. Örneğin, bir formun gönderilmeden önce doğrulama yapmasını sağlayabiliriz.

9.1. Formun Boş Gönderilmesini Engelleme

JavaScript kullanarak, zorunlu alanlar boş bırakıldığında formun gönderilmesini engelleyebiliriz.



<script>

function formDogrula() {

    let ad = document.getElementById("ad").value;

    let email = document.getElementById("email").value;

    

    if (ad == "" || email == "") {

        alert("Lütfen tüm alanları doldurunuz!");

        return false;

    }

    return true;

}

</script>

<form onsubmit="return formDogrula()">

    <label for="ad">Adınız:</label>

    <input type="text" id="ad" name="ad">

    <label for="email">E-posta:</label>

    <input type="email" id="email" name="email">

    <input type="submit" value="Gönder">

</form>

10. Form Verilerini Backend’e Gönderme

Bir form, genellikle PHP, Node.js veya başka bir backend dili kullanılarak işlenir. Aşağıda, bir formun PHP ile nasıl işleneceğine dair temel bir örnek verilmiştir.

10.1. PHP ile Form Verilerini Alma



<?php

if ($_SERVER["REQUEST_METHOD"] == "POST") {

    $ad = htmlspecialchars($_POST["ad"]);

    $email = htmlspecialchars($_POST["email"]);

    echo "Adınız: " . $ad . "<br>";

    echo "E-posta: " . $email;

}

?>

10.2. AJAX ile Form Gönderme

Sayfa yenilemeden form verilerini göndermek için AJAX kullanılabilir.



<script>

function formGonder() {

    let formData = new FormData(document.getElementById("ajaxForm"));

    

    fetch("submit.php", {

        method: "POST",

        body: formData

    })

    .then(response => response.text())

    .then(data => alert("Yanıt: " + data))

    .catch(error => console.error("Hata:", error));

    return false;

}

</script>

<form id="ajaxForm" onsubmit="return formGonder()">

    <label for="ad">Adınız:</label>

    <input type="text" id="ad" name="ad">

    <label for="email">E-posta:</label>

    <input type="email" id="email" name="email">

    <input type="submit" value="Gönder">

</form>

Son Söz

Bu derste, HTML formlarının temel yapısını, doğrulama yöntemlerini ve backend’e veri gönderme yöntemlerini öğrendik. CSS ile form stillendirme dersleri için ilerleyen HTML & CSS eğitimlerini takip edebilirsiniz.

Dynexplorer