Menu
CoddyTech

Rangkuman, Formulir #2

Termasuk bagian Dasar-Dasar dalam perjalanan HTML di Coddy. Pelajaran 47 dari 60.

challenge icon

Tantangan

Mudah

Mari buat formulir pendaftaran sederhana seperti yang ada pada gambar di bawah ini!

Berikut hal-hal yang perlu disertakan:

  1. Tag <form> untuk membungkus semuanya.
  2. Kolom Username dengan label dan input teks. Label harus bertuliskan "Username:" dan menggunakan for="username". Input harus memiliki id="username", name="username", type="text", dan placeholder "Enter your username".
  3. Kolom Email dengan label dan input email. Label harus bertuliskan "Email:" dan menggunakan for="email". Input harus memiliki id="email", name="email", type="email", dan placeholder "Enter your email".
  4. Kolom Password dengan label dan input password. Label harus bertuliskan "Password:" dan menggunakan for="userpassword". Input harus memiliki id="userpassword", name="userpassword", type="password", dan placeholder "Enter your password".
  5. Sekelompok tombol radio agar pengguna dapat memilih jenisnya: "Student" atau "Teacher". Tambahkan paragraf atau judul bertuliskan "User Type:" di atas tombol radio. Tombol radio "Student" harus memiliki id="student", name="usertype", value="student", dan label bertuliskan "Student". Tombol radio "Teacher" harus memiliki id="teacher", name="usertype", value="teacher", dan label bertuliskan "Teacher". Ingat: kedua tombol radio harus memiliki atribut name yang sama ("usertype") agar hanya satu yang dapat dipilih pada satu waktu.
  6. Sekelompok kotak centang agar pengguna dapat memilih minatnya: "Sports", "Music", dan "Technology". Tambahkan paragraf atau judul bertuliskan "Interests:" di atas kotak centang. Kotak centang "Sports" harus memiliki id="sports", name="interests", value="sports", dan label bertuliskan "Sports". Kotak centang "Music" harus memiliki id="music", name="interests", value="music", dan label bertuliskan "Music". Kotak centang "Technology" harus memiliki id="technology", name="interests", value="technology", dan label bertuliskan "Technology". Ingat: semua kotak centang harus memiliki atribut name yang sama ("interests") karena semuanya berada dalam grup yang sama.
  7. Tombol Sign Up dan tombol Clear di akhir formulir. Tombol Sign Up harus memiliki type="submit" dan tombol Clear harus memiliki type="reset". Tombol Sign Up harus menampilkan teks "Sign Up" dan tombol Clear harus menampilkan teks “Clear”.

Pastikan untuk menyertakan label dan judul yang sesuai agar pengalaman pengguna menjadi lebih mudah!

Ingat, input harus menyertakan atribut penting berikut: type, id, name, dan value.

Coba sendiri

<!DOCTYPE html>
<html>
    <body>
        <!-- Tulis kodemu di sini -->
    </body>
</html>

Semua pelajaran di Dasar-Dasar

Latihan sendiri: Playground Web