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

Sıradaki ders: Form iskeleti

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler