Proje: İletişim formu
5 derslik projenin genel bakışı: doğrulamalı iletişim formu.
Proje: İletişim formu
Bu 5 derslik projede Kafe Dem için bir iletişim formu yapacaksın. Ziyaretçiler adlarını, e-postalarını ve mesajlarını gönderebilecek.
Her ders bir parça ekler:
- Ders 1: Belge iskeleti
- Ders 2: Form iskeleti (fieldset, legend, label, input)
- Ders 3: Kişi alanları (text, email, tel)
- Ders 4: Mesaj ve konu (select, textarea)
- Ders 5: Düğme ve son düzenlemeler
İletişim formunun parçaları
İletişim formu birkaç parçadan oluşur:
<form>tüm alanları sarar<fieldset>alanları gruplar,<legend>başlık verir<label>alan adını söyler<input>kullanıcı yazısını alır<textarea>uzun mesajları alır<button>formu gönderir
Sıradaki derslerde bunları tek tek ekleyeceğiz. Her ders bir öncekinin üzerine çıkar ve sonunda form tamamlanır.
Belge iskeletinden başlıyoruz
İlk derste her zamanki gibi bir HTML belge iskeleti yazacağız: DOCTYPE, <html>, <head> ve <body>. Head içine charset, viewport ve title koyacağız. Body'yi hemen boş bırakacağız.
Title Kafe Dem - İletişim olsun. Böylece tarayıcı sekmesinde sayfanın adı doğru görünür. Body'yi sonraki derslerde dolduracağız. Şimdi sıfırdan başlayalım.
Uygulama Belge iskeletini yaz
Boş bir HTML belge iskeleti yaz. İçinde DOCTYPE, <html lang='tr'>, <head> (charset, viewport, title='Kafe Dem - İletişim') ve boş <body> bulunsun.
Ö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>
</body>
</html>Kendini test et
-
Tüm form alanlarını saran ana etiket hangisidir?
- form
- fieldset
- label
- input
Cevabı göster
form — Doğru. <form> tüm alanları içinde tutar ve gönderilecek veriyi toplar.
-
Dersleri çıktılarıyla eşleştir
- Ders 2
- Form iskeleti
- Ders 3
- Kişi alanları
- Ders 4
- Mesaj ve konu
- Ders 5
- Düğme ve son düzenlemeler