Membuat Form Pada HTML

Form adalah elemen membuat formulir yang digunakan oleh pengguna untuk memasukan data yang dikirim ke peladen (server) untuk diproses. Form HTML paling sering Anda ketemui dibila masuk dan daftar pada halaman web. Jadi ini sangat penting untuk Anda pelajari dan paling sering digunakan kalau Anda memulai untuk membuat halaman daftar aplikasi web.

Daftar isi:

• Form sederhana
  • Atribut form
    • Atribut method pada form
    • Atribut action pada form
    • Atribut enctype pada form
  • Elemen form
    • Elemen select pada form
    • Elemen textarea pada form
    • Elemen button pada form
• Jenis tipe input HTML
  • Tipe text input
  • Tipe email input
  • Tipe password input
  • Tipe search input
• Bonus tutorial form HTML
  • Form halaman register
  • Form pencarian seperti e-commerce
  • Form daftar diri

Catatan: Pada pembahasan form, saya akan menggunakan elemen-elemen form yang paling sering digunakan saat membuat aplikasi web. Jadi Anda bisa belajar lebih dalam lagi dibeberapa layanan tutorial lainnya.

Form sederhana

Pada contoh berikut saya memberikannya sedikit lengkap, sebagai awal contoh form HTML. Berikut contoh sederhananya:

<form method="POST">
    <p>
        <label for="email">Alamat email</label><br>
        <input type="email" name="email" id="email">
    </p>
    <p>
        <label for="password">Kata sandi</label><br>
        <input type="password" name="password" id="password">
    </p>
    <p>
        <button type="submit">Masuk</button>
    </p>
</form>

Penjelasan singkat:

• Tag <form> adalah elemen yang digunakan untuk membuat formulir HTML yang di input oleh pengguna.
• Tag <label> digunakan untuk judul bagi banyak elemen form dan memiliki atribut for yang harus sama dengan atribut id dari tag <input> untuk mengikat mereka bersama-sama.
• Tag <input> adalah elemen formulir yang paling banyak digunakan dan akan ditampilkan berdasarkan type atributnya.

Catatan: Saya menggunakan tag <p> dan <br> pada form agar ada jarak dari keduanya.

Atribut form

Setiap kali menggunakan form Anda harus mengenal atribut yang terpenting agar Anda tidak kebingungan jika ada kendala yang terjadi. Seperti field dari input berkas tidak tampil di BackEnd. Berikut atribut yang sering digunakan:

Atribut method pada form

Atribut method menentukan method HTTP untuk digunakan ketika mengirim data formulir, ada 2 nilai bawaan yaitu GET dan POST berikut penjelesannya:

• GET digunakan untuk formulir yang dapat dikirim sebagai variabel URL.
• POST digunakan sebagai transaksi HTTP POST.

Secara bawaan jika Anda tidak menggunakan atribut method, maka sebenarnya Anda menggunakan method="GET" sebagai bawaannya. Berikut contohnya:

<form method="POST">
    ...
</form>

Catatan: Jika Anda ingin mengirim sebuah formulir sensitif maka saya sarankan untuk menggunakan nilai POST.

Atribut action pada form

Atribut action digunakan untuk melakukan tindakan ketika formulir dikirim ke peladen. Saya contohkan dengan PHP salah satu BackEnd sisi peladen, Berikut contohnya:

<form action="action.php">
    ...
</form>

Atribut enctype pada form

Atribut enctype menentukan bagaimana suatu data harus dienkode ketika pengiriman ke peladen, akan tetapi atribut ini dikhususkan untuk atribut method bernilai POST. Berikut nilai bawaannya:

• application/x-www-form-urlencoded ini nilai bawaan.
• multipart/form-data gunakan ini jika formulir berisi tag <input> dengan type=file.
• text/plain diperkenalkan pada versi HTML5 untuk tujuan debugging.

Berikut contohnya:

<form enctype="multipart/form-data">
    <input type="file">
</form>

Elemen form

Elemen form memiliki 11 elemen untuk membuat formulir sesuai kebutuhan Anda, tetapi saya akan pratekan beberapa saja dari 11 elemen tersebut.

Elemen select pada form

Elemen <select> untuk membuat daftar secara drop-down, perlu diketahui ada beberapa atribut yang tidak kalah penting untuk Anda, yaitu selected, multiple, atau size. Berikut contohnya:

<label for="buah">Buah</label>
<select name="buah" id="buah">
    <optgroup label="Pilih buah">
        <option hidden>Pilih buah</option>
        <option value="durian">Durian</option>
        <option value="jeruk">Jeruk</option>
        <option value="semangka">Semangka</option>
    </optgroup>
</select>

Elemen textarea pada form

Elemen <textarea> digunakan untuk formulir multi-line seperti kolom untuk alamat, deskripsi, atau semisalnya. Berikut contohnya:

<label for="alamat">Alamat</label>
<textarea name="alamat" id="alamat" cols="30" rows="10"></textarea>

Elemen button pada form

Elemen <button> mendifinisikan tombol yang dapat diklik yang memiliki atribut type dengan nilai button, menu, submit, dan reset. Berikut contohnya:

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

Jenis tipe input HTML

Tipe atau atribut type pada tag <input> ada 22 nilai bawaannya, maka Anda bisa menyesuaikan untuk kepeluan apa menggunakan nilai tipe tersebut. Saya akan berikan contoh yang sering digunakan.

Tipe text input

Tipe text digunakan untuk input teks dan baris, berikut contohnya:

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

Tipe email input

Tipe email digunakan untuk alamat email, berikut contohnya:

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

Tipe password input

Tipe password digunakan untuk kata sandi, berikut contohnya:

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

Tipe search input

Tipe search digunakan untuk bidang pencarian teks biasa, berikut contohnya:

<input type="search" name="search">

Bonus tutorial form HTML

Berikut saya sajikan agar Anda bisa menambahkan wawasan dengan contoh berikut:

Form halaman register

<form method="POST">
    <p>
        <label for="nama">Nama Lengkap</label><br>
        <input type="text" name="nama" id="nama" placeholder="Tulis namamu...">
    </p>
    <p>
        <label for="email">Alamat Email</label><br>
        <input type="email" name="email" id="email" required>
    </p>
    <p>
        <label for="password">Kata Sandi</label><br>
        <input type="password" name="password" id="password" placeholder="******">
    </p>
    <p>
        <label for="confirm_password">Konfir Kata Sandi</label><br>
        <input type="password" name="confirm_password" id="confirm_password" placeholder="******">
    </p>
    <p>
        <button type="submit">Daftar</button>
    </p>
</form>

Hasilnya:

Form pencarian seperti e-commerce

<form method="GET">
    <p>
        <label for="cari">Cari Barang</label><br>
        <input type="search" name="cari" id="cari" placeholder="Silakan cari sesuatu...">
    </p>
    <p>
        <label>Kondisi</label><br>
        <label for="kondisi1">
            <input type="radio" name="kondisi" id="kondisi1"> Baru
        </label>
        <label for="kondisi2">
            <input type="radio" name="kondisi" id="kondisi2"> Bekas
        </label>
    </p>
    <p>
        <label>Penawaran</label><br>
        <label for="penawaran1">
            <input type="checkbox" name="penawaran" id="penawaran1"> Gratis ongkir
        </label>
        <label for="penawaran2">
            <input type="checkbox" name="penawaran" id="penawaran2"> Diskon
        </label>
        <label for="penawaran3">
            <input type="checkbox" name="penawaran" id="penawaran3"> COD
        </label>
    </p>
</form>

Hasilnya:

Form daftar diri

<form method="POST">
    <fieldset>
        <legend>Daftar diri Anda</legend>
        <p>
            <label for="nama">Nama Lengkap</label><br>
            <input type="text" name="nama" id="nama" placeholder="Tulis namamu...">
        </p>
        <p>
            <label for="telepom">Nomor Telepon</label><br>
            <input type="tel" name="telepom" id="telepom" value="08xxxxx">
        </p>
        <p>
            <label for="agama">Agama</label><br>
            <select name="agama" id="agama">
                <optgroup label="Pilih agama">
                    <option hidden>Pilih agama</option>
                    <option>Islam</option>
                    <option>Protestan</option>
                    <option>Katolik</option>
                    <option>Hindu</option>
                    <option>Buddha</option>
                    <option>Konghucu</option>
                </optgroup>
            </select>
        </p>
        <p>
            <label for="jurusan">Jurusan</label><br>
            <input list="jurusan" name="jurusan" placeholder="Cari jurusan">
            <datalist id="jurusan">
                <option>Teknik Informatika</option>
                <option>Sistem Informasi</option>
                <option>Manajemen Informatika</option>
            </datalist>
        </p>
        <p>
            <label for="alamat">Alamat</label><br>
            <textarea name="alamat" id="alamat" cols="30" rows="10">Jl. Kebenaran</textarea>
        </p>
    </fieldset>
</form>

Hasilnya:

Sumber:

• W3Schools
• MDN Web Docs