HTML
Proje sonu - İletişim formu
Doğrulama, gönder butonu ve erişilebilirlik özniteliklerini ekleyip tamamlayıp dokümante edersin.
Son dokunuşlar: button, autocomplete, pattern ve yorum
Formu tamamlamak için üç şey kaldı: <button type='submit'> formu gönderir, autocomplete tarayıcının ad/e-posta gibi alanları otomatik doldurmasına izin verir, pattern telefon gibi alanlara biçim denetimi yapar.
Son olarak body'nin başına kısa bir <!-- yorum --> eklemek dosyayı okuyan kişiye formun ne işe yaradığını söyler. Yorum tarayıcıda görünmez ama kaynak kodunda kalır ve bakımı kolaylaştırır.
Yorum eklemek
HTML yorumu <!-- ile başlar ve --> ile biter. Yorumlar tarayıcıda görünmez ama kaynak kodunda kalır. Dosyanın başına veya bir bölümün önüne yorum eklemek, kodu okuyan kişiye bağlam verir.
Örneğin <!-- İletişim formu: Kafe Dem --> gibi kısa bir not, dosyayı açan geliştiriciye hemen söyler sayfanın ne işe yaradığını.
Uygulama Formu tamamla
Body'nin başına, hemen <body>'den sonra, kısa bir yorum ekle (örnek <!-- İletişim formu: Kafe Dem -->). Ad input'una autocomplete='name' ekle. Tel input'una pattern='[0-9+ ]{10,}' ekle. Form'un sonuna <button type='submit'>Gönder</button> ekle.
Örnek çözümü göster
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kafe Dem - İletişim</title>
</head>
<body>
<!-- İletişim formu: Kafe Dem -->
<form action="/bize-yazin" method="post">
<fieldset>
<legend>İletişim bilgileri</legend>
<label for="ad">Adınız</label>
<input type="text" id="ad" name="ad" autocomplete="name">
<label for="eposta">E-posta</label>
<input type="email" id="eposta" name="eposta" placeholder="ad.soyad@eposta.com" required>
<label for="telefon">Telefon</label>
<input type="tel" id="telefon" name="telefon" placeholder="+90 555 123 45 67" pattern="[0-9+ ]{10,}">
</fieldset>
<fieldset>
<legend>Konu</legend>
<label for="konu">Konu</label>
<select id="konu" name="konu">
<optgroup label="Sipariş">
<option value="teslimat">Teslimat</option>
</optgroup>
<optgroup label="Diğer">
<option value="oneri">Öneri</option>
</optgroup>
</select>
<label for="mesaj">Mesaj</label>
<textarea id="mesaj" name="mesaj" maxlength="500" placeholder="Mesajınızı buraya yazın..."></textarea>
</fieldset>
<button type="submit">Gönder</button>
</form>
</body>
</html>
Proje tamamlandı
Beş dersin sonunda elinde tam bir iletişim formu var: belge iskeleti, kişisel alanlar, açılır konu menüsü, mesaj kutusu ve gönder düğmesi. Her parçayı sırayla ekledik ve son hâli tek bir HTML dosyası.
Bundan sonraki gruplarda bu formu erişilebilirlik ve anlamsal yapı ile daha da güçlendireceğiz. Şimdilik formunu bir tarayıcıda açıp doldurmayı dene.
Kendini test et
-
Formu gönderen düğme için doğru type nedir?
<button type="?">Gönder</button>
Cevabı göster
submit — Doğru! type='submit' düğmenin formu göndermesini sağlar.
-
Boşluğu doldur: submit düğmesini tamamla
<button ____>Gönder</button>
Cevabı göster
<button type="submit">Gönder</button>
-
Elementleri görevleriyle eşleştir
- form
- Veriyi toplar
- select
- Açılır menü
- textarea
- Çok satırlı metin
- button
- Formu gönderir
Sıradaki ders: Header yapısı
