Formulir dalam HTML

Dalam HTML, kita bisa membuat suatu formulir yang dapat digunakan untuk suatu keperluan tertentu. Contoh penggunaannya yaitu pada halaman register dan halaman login. Di materi kali ini kita akan mempelajari tentang pembuatan tampilan form nya saja, tidak dengan pemrosesan datanya. Untuk memproses data dari form, itu masuk ke pembahasan Back-End.

Elemen <form>

Untuk membuat form pada HTML, kita harus menggunakan tag <form>. Elemen <form> ini berfungsi sebagai wadah dari beberapa elemen input. Karena dalam penerapannya sendiri, form terdiri dari beberapa input yang berbeda-beda.

<form>
    <!--Form Input-->
</form>

Pada elemen ini, terdapat beberapa atribut yang biasanya digunakan, yaitu:

• Atribut method
Atribut ini mempunyai nilai get atau post. Method get membuat data yang diinput oleh user akan terlihat dalam URL bar. Sedangkan method post akan menyembunyikan data yang diinput oleh user pada URL bar.

<form method="get">

• Atribut action
Atribut ini berfungsi untuk memproses data dari form. Ketika form di submit, maka file yang didefinisikan dalam atribut action ini akan dieksekusi.

<form action="register.php">

Atribut method dan action tersebut digunakan untuk keperluan pemrosesan data yang masuk ke dalam pembahasan Back-End.

Elemen <input>

Elemen <input> dalam form berfungsi untuk menerima suatu input dengan berbagai macam tipe yang bisa digunakan. Dalam HTML, terdapat beberapa tipe input diantaranya yaitu:

1. button
2. checkbox
3. color
4. date
5. datetime
6. datetime-local
7. email
8. file
9. hidden
10. image
11. month
12. number
13. password
14. radio
15. range
16. reset
17. search
18. submit
19. tel
20. text
21. time
22. url
23. week

Input Type Text

Input type text digunakan menerima input berupa teks. Teks dapat berupa huruf, angka, atau karakter spesial. Input tipe text ini hanya dapat memuat 1 baris teks saja.

Contoh Penerapan:

<input type="text">

Output Dalam Web Browser:

Tidak menarik bukan?

Kita bisa menggunakan atribut placeholder untuk memberikan hint tentang informasi apa yang harus diisi dalam input.

<input type="text" placeholder="Masukkan Nama Anda">

Output Dalam Web Browser:

Input Type Radio

Input type radio digunakan untuk menerima input berupa radio button yang berbentuk bulat. 

Contoh Penerapan:

<input type="radio" name="gender"> Laki-Laki
<br>
<input type="radio" name="gender"> Perempuan

Fungsi name di kedua input tersebut bernilai sama yaitu supaya hanya dapat input di salah satu button, bukan di keduanya.

Output Dalam Web Browser:

Input Type Checkbox

Input type checkbox digunakan untuk menerima input berupa ceklis yang berbentuk kotak.

Contoh Penerapan:

<input type="checkbox"> Pisang<br>
<input type="checkbox"> Mangga<br>
<input type="checkbox"> Pepaya

Output Dalam Web Browser:

Input Type Password

Input type password digunakan untuk menerima input teks yang berupa password. Tipe ini sama seperti tipe text, perbedaannya yaitu dalam tipe password teks akan disensor dengan simbol bintang (*).

Contoh Penerapan:

<input type="password">

Output Dalam Web Browser:

Elemen <label>

Elemen <label> digunakan untuk memberikan keterangan untuk suatu input dalam form.

Contoh Penerapan:

<label>Nama:</label>
<input type="text" placeholder="Masukkan Nama Anda">

Output Dalam Web Browser:

Textarea

Textarea merupakan suatu cara untuk menerima data berupa teks. Ini sama seperti elemen <input> dengan tipe "text". Perbedaannya yaitu textarea bisa menampung lebih dari satu baris teks.

Contoh Penerapan:

<textarea placeholder="Isi teks disini" style="width: 200px; height: 100px;"></textarea>

Output Dalam Web Browser:

Dropdown Lists

Dalam form HTML, kita juga bisa membuat input berupa dropdown list. Dropdown list ini akan memberikan beberapa opsi yang dapat dipilih.

Contoh Penerapan:

<select>
    <option>HTML</option>
    <option>CSS</option>
    <option>JavaScript</option>
    <option>React</option>
</select>

Output Dalam Web Browser:

Penjelasan Kode:

• <select>  | sebagai elemen yang mempunyai kontrol terhadap beberapa opsi dalam <option>.
• <option>  | merupakan opsi yang diberikan.

Atribut Required

Atribut ini akan memaksa pengguna untuk wajib dalam mengisi suatu input tertentu dalam form.

Contoh Penerapan:

<label>Nama:</label>
<input type="text" placeholder="Masukkan Nama Anda" required>
<input type="submit">

Output Dalam Web Browser:

Ketika form di submit tetapi data belum diisi, maka akan diberikan peringatan tersebut.

Practice: Membuat Form Registrasi

Pada latihan ini, kamu akan membuat formulir registrasi sederhana untuk meningkatkan pemahamanmu dalam menerapkan form dalam HTML.

Kode:

<!DOCTYPE html>
<html>

<head>
    <title>Register Form</title>
</head>

<body>
    <form action="register.php" method="post">
        <fieldset>
            <legend>Register</legend>
            <p>
                <label>Name</label><br>
                <input type="text" name="name" placeholder="Enter Your Name" required>
            </p>
            <p>
                <label>Email</label><br>
                <input type="email" name="email" placeholder="Enter Your Email" required>
            </p>
            <p>
                <label>Username</label><br>
                <input type="text" name="username" placeholder="Username For Your Account" required>
            </p>
            <p>
                <label>Password</label><br>
                <input type="password" name="password" placeholder="Password For Your Account" required>
            </p>
            <p>
                <label>Repeat Password</label><br>
                <input type="password" name="rpassword" placeholder="Repeat Your Password" required>
            </p>
            <p>
                <label>Gender:</label>
                <label><input type="radio" name="gender" value="male">Male</label>
                <label><input type="radio" name="gender" value="female">Female</label>
            </p>
            <p>
                <label>Profile:</label>
                <textarea name="profile"></textarea>
            </p>
            <p>
                <label>Interests:</label><br>
                <input type="checkbox" value="web_dev">Web Development<br>
                <input type="checkbox" value="ai">Artificial Intelligence<br>
                <input type="checkbox" value="cloud_compute">Cloud Computing
            </p>
            <p>
                <label>Working Status:</label> <select>
                    <option value="employed">Employed</option>
                    <option value="freelance">Freelance</option>
                    <option value="unemployed">Unemployed</option>
                </select>
            </p>
            <p>
                <input type="checkbox" value="user_verify" required> By creating an account, I agree with the <a
                    href="#">privacy policy</a> provided.
            </p>
            <input type="submit" name="submit" value="Register">
            <input type="reset">
        </fieldset>
    </form>
</body>

</html>

Penjelasan:

• <fieldset>   | Mengelompokkan elemen masukan form dan memberikan border kepada elemen yang ada didalamnya.
• <legend>   | Memberikan keterangan pada elemen <fieldset> yang berada di atas.
• input type="submit"   | Membuat button submit. Apabila ditekan, akan memproses form menggunakan atribut action pada elemen <form>.
• input type="reset"   | Membuat button reset. Apabila ditekan, akan me-reset semua data yang telah diisikan pada form.

Output Dalam Web Browser: