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