HTML Form Elements Demo

📝 Basic Form Elements

💡 Struktur Dasar Form

Form HTML digunakan untuk mengumpulkan input pengguna dan mengirim data ke server.

basic-form.html

          
            <form action="/submit" method="post">

              <label for="name">Nama:</label>

              <input type="text" id="name" name="name" required>

              <label for="email">Email:</label>

              <input type="email" id="email" name="email" required>

              <label for="password">Password:</label>

              <input type="password" id="password" name="password" required>

              <button type="submit">Submit</button>

            </form>

🔍 Penjelasan Detail:

• <form> - Container utama untuk semua elemen form
• action - Menentukan URL tujuan pengiriman data
• method - Metode HTTP (get/post) untuk pengiriman data
• <label> - Label untuk aksesibilitas dan usability
• <input> - Elemen input dengan berbagai tipe (text, email, password)
• required - Membuat field wajib diisi
• <button> - Tombol untuk submit form

⚡ Pro Tips

Selalu gunakan atribut for pada label yang sesuai dengan id input untuk meningkatkan aksesibilitas!

🔗 Advanced Form Controls

💡 Kontrol Form Lanjutan

HTML5 memperkenalkan berbagai tipe input dan elemen form yang lebih canggih.

advanced-form.html

          
            <form>

              <label>Pilih warna favorit:

              <input type="color" name="favcolor"></label>

              <label>Tanggal lahir:

              <input type="date" name="bday"></label>

              <label>Range nilai:

              <input type="range" name="points" min="0" max="10"></label>

              <label>Upload file:

              <input type="file" name="myFile"></label>

              <label><input type="checkbox" name="subscribe"> Subscribe newsletter</label>

              <label>Pilih gender:

              <select name="gender">

                <option value="male">Male</option>

                <option value="female">Female</option>

                <option value="other">Other</option>

              </select></label>

              <label>Pesan:

              <textarea name="message" rows="4" cols="50"></textarea></label>

            </form>

🔍 Penjelasan Detail:

• type="color" - Picker warna
• type="date" - Picker tanggal
• type="range" - Slider dengan nilai min/max
• type="file" - Upload file
• type="checkbox" - Kotak centang
• <select> - Dropdown menu
• <textarea> - Input teks multi-baris
• HTML5 juga menyediakan validasi otomatis untuk email, url, number, dll

⚡ Pro Tips

Gunakan atribut placeholder untuk memberikan contoh input yang diharapkan di field!

🎨 Form Styling

💡 CSS untuk Form

Gunakan CSS untuk membuat form lebih menarik dan user-friendly.

style.css

          
            form {

              max-width: 600px;

              margin: 0 auto;

              padding: 1.5rem;

              background: #252525;

              border-radius: 8px;

            }

            label {

              display: block;

              margin-bottom: 0.5rem;

              font-weight: bold;

            }

            input, select, textarea {

              width: 100%;

              padding: 0.75rem;

              margin-bottom: 1rem;

              background: #333;

              border: 1px solid #444;

              border-radius: 4px;

              color: #fff;

            }

            button {

              background: #00bcd4;

              color: white;

              padding: 0.75rem 1.5rem;

              border: none;

              border-radius: 4px;

              cursor: pointer;

            }

            button:hover {

              background: #00e5ff;

            }

🔍 Penjelasan Detail:

• max-width - Membatasi lebar form untuk keterbacaan
• display: block pada label - Membuat label di atas input
• width: 100% - Input memenuhi container
• padding - Memberikan ruang dalam input
• border-radius - Membuat sudut elemen melengkung
• :hover - Efek hover untuk interaktivitas
• Warna kontras untuk tombol submit
• Media query bisa digunakan untuk form mobile-friendly

⚡ Pro Tips

Gunakan :focus styling untuk menunjukkan field yang sedang aktif, contoh: input:focus { border-color: #00bcd4; }