Tag Form (form, input, select, textarea)

Berikut adalah penjelasan lengkap tentang tag <form>, serta elemen-elemen dalamnya seperti <input>, <select>, dan <textarea>:

Tag <form>

Tag <form> digunakan untuk membuat formulir di HTML. Formulir digunakan untuk mengumpulkan input dari pengguna. Properti action menentukan URL ke mana data akan dikirim, dan method menentukan metode HTTP yang akan digunakan (biasanya GET atau POST).

Contoh:

<form action="/submit-form" method="post">
    <!-- Konten formulir -->
</form>

Elemen <input>

Elemen <input> digunakan untuk membuat kontrol input dalam formulir. Berikut adalah beberapa jenis input yang umum digunakan dalam formulir HTML, beserta penjelasan atribut-atribut yang sering digunakan:

1. Input Teks

Input teks digunakan untuk memungkinkan pengguna memasukkan teks.

htmlCopy code<label for="username">Username:</label>
<input type="text" id="username" name="username" maxlength="30" required>

• type: Jenis input, dalam kasus ini adalah "text".

• id: ID unik untuk elemen input.

• name: Nama elemen input yang akan dikirimkan dalam formulir.

• maxlength: Batas maksimum karakter yang dapat dimasukkan pengguna.

• required: Membuat input menjadi wajib diisi sebelum pengguna dapat mengirimkan formulir.

2. Input Kata Sandi

Input kata sandi digunakan untuk memasukkan kata sandi yang sensitif.

<label for="password">Password:</label>
<input type="password" id="password" name="password" minlength="8" required>

• type: Jenis input, dalam kasus ini adalah "password".

• minlength: Panjang minimum karakter yang harus dimasukkan oleh pengguna.

• required: Membuat input menjadi wajib diisi.

3. Tombol Radio

Tombol radio memungkinkan pengguna memilih satu opsi dari beberapa opsi.

<label>Jenis Kelamin:</label><br>
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">Laki-laki</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Perempuan</label><br>

• type: Jenis input, dalam kasus ini adalah "radio".

• id: ID unik untuk elemen input.

• name: Nama elemen input yang sama untuk mengelompokkan tombol radio.

• value: Nilai yang akan dikirimkan dalam formulir jika tombol radio tersebut dipilih.

• checked: Membuat tombol radio dipilih secara default.

4. Kotak Centang

Kotak centang memungkinkan pengguna untuk memilih atau tidak memilih opsi.

<input type="checkbox" id="subscribe" name="subscribe" value="yes" checked>
<label for="subscribe">Berlangganan Newsletter</label>

• type: Jenis input, dalam kasus ini adalah "checkbox".

• id: ID unik untuk elemen input.

• name: Nama elemen input yang akan dikirimkan dalam formulir.

• value: Nilai yang akan dikirimkan dalam formulir jika kotak centang tersebut dicentang.

• checked: Membuat kotak centang tercentang secara default.

5. Input Angka

Input angka membatasi masukan pengguna hanya untuk angka.

<label for="quantity">Jumlah:</label>
<input type="number" id="quantity" name="quantity" min="1" max="100" step="1">

• type: Jenis input, dalam kasus ini adalah "number".

• min: Nilai minimum yang diperbolehkan.

• max: Nilai maksimum yang diperbolehkan.

• step: Langkah yang diizinkan saat pengguna menekan tombol panah.

6. Input Tanggal

Input tanggal memungkinkan pengguna untuk memilih tanggal.

<label for="birthdate">Tanggal Lahir:</label>
<input type="date" id="birthdate" name="birthdate" min="1900-01-01" max="2024-12-31">

• type: Jenis input, dalam kasus ini adalah "date".

• min: Nilai minimum yang diperbolehkan.

• max: Nilai maksimum yang diperbolehkan.

7. Input Warna

Input warna memungkinkan pengguna untuk memilih warna.

htmlCopy code<label for="color">Pilih Warna:</label>
<input type="color" id="color" name="color">

• type: Jenis input, dalam kasus ini adalah "color".

8. Input Email

Input email memvalidasi alamat email yang dimasukkan.

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

• type: Jenis input, dalam kasus ini adalah "email".

• required: Membuat input menjadi wajib diisi.

9. Input URL

Input URL memvalidasi URL yang dimasukkan.

<label for="website">Website:</label>
<input type="url" id="website" name="website" placeholder="http://www.example.com">

• type: Jenis input, dalam kasus ini adalah "url".

• placeholder: Teks yang ditampilkan dalam input sebelum pengguna memasukkan nilai.

10. Input File

Input file memungkinkan pengguna mengunggah file.

<label for="file">Pilih File:</label>
<input type="file" id="file" name="file" accept=".jpg, .jpeg, .png" multiple>

• type: Jenis input, dalam kasus ini adalah "file".

• accept: Jenis file yang diterima oleh input.

• multiple: Menerima multiple file untuk diunggah.

11. Input Submit

Input submit digunakan untuk mengirimkan formulir.

<input type="submit" value="Kirim">

• type: Jenis input, dalam kasus ini adalah "submit".

• value: Nilai yang akan ditampilkan pada tombol submit.

Elemen <select>

Elemen <select> digunakan untuk membuat kotak dropdown dalam formulir, yang memungkinkan pengguna memilih satu atau beberapa opsi dari daftar yang tersedia.

Contoh penggunaan elemen <select>:

<label for="cars">Pilih mobil:</label>
<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Atribut-atribut <select>:

• id: ID unik untuk elemen.

• name: Nama elemen yang akan dikirimkan saat formulir diserahkan.

• size: Menentukan jumlah tampilan opsi yang ditampilkan secara default (hanya untuk kotak dropdown dengan beberapa opsi).

• multiple: Mengizinkan pengguna memilih beberapa opsi (gunakan multiple untuk memilih beberapa opsi).

Elemen <textarea>

Elemen <textarea> digunakan untuk membuat area teks multibaris dalam formulir, yang memungkinkan pengguna memasukkan teks dalam jumlah besar.

Contoh penggunaan elemen <textarea>:

<label for="message">Pesan:</label>
<textarea id="message" name="message" rows="4" cols="50">
Isi pesan Anda di sini...
</textarea>

Atribut-atribut <textarea>:

• id: ID unik untuk elemen.

• name: Nama elemen yang akan dikirimkan saat formulir diserahkan.

• rows: Menentukan jumlah baris teks yang akan ditampilkan secara default.

• cols: Menentukan jumlah kolom teks yang akan ditampilkan secara default.

Contoh Form

Berikut ini adalah contoh formulir pendaftaran sederhana yang memanfaatkan semua tag yang sudah dibuat sebelumnya, seperti <input>, <select>, dan <textarea>:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulir Pendaftaran</title>
</head>
<body>
    <h2>Formulir Pendaftaran</h2>
    <form action="/submit-form" method="post">
        <label for="fullname">Nama Lengkap:</label><br>
        <input type="text" id="fullname" name="fullname" required><br><br>

        <label for="gender">Jenis Kelamin:</label><br>
        <input type="radio" id="male" name="gender" value="male" checked>
        <label for="male">Laki-laki</label>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">Perempuan</label><br><br>

        <label for="birthdate">Tanggal Lahir:</label><br>
        <input type="date" id="birthdate" name="birthdate" required><br><br>

        <label for="email">Email:</label><br>
        <input type="email" id="email" name="email" required><br><br>

        <label for="country">Negara:</label><br>
        <select id="country" name="country">
            <option value="indonesia">Indonesia</option>
            <option value="singapura">Singapura</option>
            <option value="malaysia">Malaysia</option>
            <option value="thailand">Thailand</option>
        </select><br><br>

        <label for="message">Pesan Tambahan:</label><br>
        <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

        <input type="submit">
    </form>
</body>
</html>

Dalam contoh ini, formulir pendaftaran mencakup berbagai jenis elemen input termasuk input teks, tombol radio, tanggal, email, select box, dan textarea. Setiap elemen input memiliki atribut-atribut seperti required untuk memastikan data diisi, value untuk menentukan nilai default, dan name untuk memberikan nama pada elemen yang akan dikirimkan saat formulir disubmit.

Anda dapat mengubah atribut dan nilai default sesuai dengan kebutuhan formulir pendaftaran Anda.