Web Geliştirme
91 ~35 dk

Tablolar ve Formlar

HTML Tabloları

<table border="1">
    <caption>Öğrenci Not Listesi</caption>
    <thead>
        <tr>
            <th>No</th>
            <th>Ad Soyad</th>
            <th>Vize</th>
            <th>Final</th>
            <th>Ortalama</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Ali Yılmaz</td>
            <td>85</td>
            <td>90</td>
            <td>88</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Ayşe Kaya</td>
            <td>92</td>
            <td>88</td>
            <td>90</td>
        </tr>
    </tbody>
</table>

Hücre Birleştirme

<table border="1">
    <tr>
        <th colspan="2">İsim Bilgileri</th>
        <th rowspan="2">Not</th>
    </tr>
    <tr>
        <th>Ad</th>
        <th>Soyad</th>
    </tr>
    <tr>
        <td>Ali</td>
        <td>Yılmaz</td>
        <td>85</td>
    </tr>
</table>

HTML Formları

<form action="kayit.php" method="POST">
    <!-- Metin girişi -->
    <label for="ad">Adınız:</label>
    <input type="text" id="ad" name="ad" placeholder="Adınızı girin" required>

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

    <!-- Şifre -->
    <label for="sifre">Şifre:</label>
    <input type="password" id="sifre" name="sifre" minlength="6" required>

    <!-- Sayı -->
    <label for="yas">Yaş:</label>
    <input type="number" id="yas" name="yas" min="10" max="100">

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

    <!-- Açılır menü -->
    <label for="sehir">Şehir:</label>
    <select id="sehir" name="sehir">
        <option value="">Seçiniz...</option>
        <option value="ist">İstanbul</option>
        <option value="ank">Ankara</option>
        <option value="ant">Antalya</option>
    </select>

    <!-- Radyo buton -->
    <p>Cinsiyet:</p>
    <input type="radio" name="cinsiyet" value="erkek" id="e"> <label for="e">Erkek</label>
    <input type="radio" name="cinsiyet" value="kadin" id="k"> <label for="k">Kadın</label>

    <!-- Onay kutusu -->
    <input type="checkbox" id="sozlesme" name="sozlesme" required>
    <label for="sozlesme">Sözleşmeyi kabul ediyorum</label>

    <!-- Metin alanı -->
    <label for="mesaj">Mesajınız:</label>
    <textarea id="mesaj" name="mesaj" rows="4" cols="50"></textarea>

    <button type="submit">Gönder</button>
    <button type="reset">Temizle</button>
</form>
💡 Form Doğrulama: required, minlength, min, max, pattern gibi niteliklerle tarayıcı tarafında form kontrolü yapılabilir.

🎯 Uygulama

  1. Sınıf not listesini tablo olarak oluşturun (en az 5 öğrenci, hücre birleştirme kullanın)
  2. Öğrenci kayıt formu tasarlayın (ad, soyad, numara, bölüm, e-posta, doğum tarihi)
  3. Anket formu oluşturun (radyo buton, onay kutusu, açılır menü kullanarak)

Yorumlar 0

Giriş yapın — Yorumlarınız hemen yayınlansın
Henüz yorum yapılmamış. İlk yorumu siz yapın!