Meydan okuma - Form ve anlamsal yapı
Anlamsal etiketlerle sarılı bir geri bildirim formu sayfası yazarsın.
Anlamsal etiketler ve form
Anlamsal etiketler, sayfayı bölümlere ayırır ve içeriğin rolünü açıklar. <header> üst bilgiyi, <nav> menüyü, <main> ana içeriği, <footer> alt bilgiyi taşır. Bu ayrım ekran okuyucular ve arama motorları için erişilebilirliği artırır.
Formlar <form> kabında toplanır. Tek satırlık metin için <input>, uzun metin için <textarea>, seçim listesi için <select> ve <option> kullanılır. Her alanın bir <label>'i olmalı; for ve id aynı değere eşitlenince ikisi bağlanır.
Uygulama Anlamsal yapıyla sarılı geri bildirim formu yaz
Body içine <header>, <nav>, <main> ve <footer> ekle. main içinde <form action="/geri-bildirim" method="post"> aç; içine bir <label> + <input type="text"> ikilisi, bir <label> + <textarea> ikilisi ve bir <button type="submit"> koy.
Örnek çözümü göster
<body>
<header>
<h1>Geri Bildirim</h1>
</header>
<nav>
<a href="/">Ana sayfa</a>
</nav>
<main>
<form action="/geri-bildirim" method="post">
<label for="ad">Adınız</label>
<input id="ad" name="ad" type="text">
<label for="mesaj">Mesajınız</label>
<textarea id="mesaj" name="mesaj"></textarea>
<button type="submit">Gönder</button>
</form>
</main>
<footer>
<p>© 2024 Kişisel Sayfa</p>
</footer>
</body>Kendini test et
-
Anlamsal etiketi rolüyle eşleştir
- <header>
- Üst bilgi
- <nav>
- Menü
- <main>
- Ana içerik
- <footer>
- Alt bilgi
- <form>
- Veri toplama kabı
-
Açılır listeyi yaz
<label for="konu">Konu</label> <____ id="konu" name="konu"> <option value="oneri">Öneri</option> <option value="sikayet">Şikayet</option> </select>Cevabı göster
<label for="konu">Konu</label> <select id="konu" name="konu"> <option value="oneri">Öneri</option> <option value="sikayet">Şikayet</option> </select> -
Çok satırlı, uzun kullanıcı metni (örneğin bir yorum) için hangi alan uygundur?
- <input type="text">
- <input type="textarea">
- <select>
- <textarea>
Cevabı göster
<textarea> — Doğru. <textarea> çok satırlı, uzun metinler içindir; bir input type="text" yalnız tek satıra izin verir.