# 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:

```html
<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.

```html
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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
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.

```html
<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.

```html
<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.

```html
<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.

```html
<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>`:

```html
<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>`:

```html
<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>`:

```html
<!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.
