Menu
Coddy logo textTech

Özet - Formlar #2

Coddy'nin HTML Journey'sinin Temeller bölümünün bir parçası. Ders 47 / 60.

challenge icon

Görev

Kolay

Aşağıdaki resimdeki gibi basit bir kayıt formu oluşturalım!

Şunları eklemelisin:

  1. <form> etiketi her şeyi bir arada sarmalıdır.
  2. Etiketi ve metin girişi olan bir Kullanıcı Adı alanı. Etiket "Username:" demeli ve for="username" kullanmalıdır. Girdide id="username", name="username", type="text" ve "Enter your username" yer tutucusu bulunmalıdır.
  3. Etiketi ve e-posta girdisi olan bir E-posta alanı. Etiket "Email:" demeli ve for="email" kullanmalıdır. Girdide id="email", name="email", type="email", ve "Enter your email" yer tutucusu bulunmalıdır.
  4. Etiketi ve parola girdisi olan bir Parola alanı. Etiket "Password:" demeli ve for="userpassword" kullanmalıdır. Girdide id="userpassword", name="userpassword", type="password" ve "Enter your password" yer tutucusu bulunmalıdır.
  5. Kullanıcıların türlerini seçmesine olanak tanıyan bir radyo düğmesi grubu: "Student" veya "Teacher". Radyo düğmelerinin üstüne "User Type:" diyen bir paragraf veya başlık ekle. "Student" radyo düğmesinde id="student", name="usertype", value="student" ve "Student" diyen bir etiket bulunmalıdır. "Teacher" radyo düğmesinde id="teacher", name="usertype", value="teacher" ve "Teacher" diyen bir etiket bulunmalıdır. Unutma: Aynı anda yalnızca birinin seçilebilmesi için her iki radyo düğmesinin de aynı name niteliğine ("usertype") sahip olması gerekir.
  6. Kullanıcıların ilgi alanlarını seçmesine olanak tanıyan bir onay kutusu grubu: "Sports", "Music" ve "Technology". Onay kutularının üstüne "Interests:" diyen bir paragraf veya başlık ekle. "Sports" onay kutusunda id="sports", name="interests", value="sports" ve "Sports" diyen bir etiket bulunmalıdır. "Music" onay kutusunda id="music", name="interests", value="music" ve "Music" diyen bir etiket bulunmalıdır. "Technology" onay kutusunda id="technology", name="interests", value="technology" ve "Technology" diyen bir etiket bulunmalıdır. Unutma: Aynı grupta oldukları için tüm onay kutuları aynı name niteliğine ("interests") sahip olmalıdır.
  7. Formun sonunda bir Kayıt Ol düğmesi ve bir Temizle düğmesi. Kayıt Ol düğmesinde type="submit", Temizle düğmesinde ise type="reset" bulunmalıdır. Kayıt Ol düğmesinde "Kayıt Ol", Temizle düğmesinde ise “Temizle” metni görüntülenmelidir.

Kullanıcı dostu bir deneyim için uygun etiketleri ve başlıkları eklediğinden emin ol!

Unutma, girdiler şu önemli nitelikleri içermelidir: type, id, name ve value.

Kendin dene

<!DOCTYPE html>
<html>
    <body>
        <!-- Kodunuzu buraya yazın -->
    </body>
</html>

Temeller bölümündeki tüm dersler

Kendi başına pratik yap: Web playground