Close Menu

Formulir HTML

Table of Contents

Formulir HTML digunakan untuk mengumpulkan data dari pengguna. Data yang dikumpulkan kemudian dapat dikirimkan ke server untuk diproses lebih lanjut. Formulir dibuat menggunakan elemen <form> dan berbagai elemen input lainnya seperti <input>, <select>, dan <textarea>. Berikut adalah penjelasan lengkap tentang cara membuat dan mengatur formulir dalam HTML.

Elemen <form> #

Elemen <form> adalah elemen pembungkus untuk semua elemen input di dalam formulir. Elemen ini memiliki beberapa atribut penting seperti action, method, dan enctype.

<form action="submit_form.php" method="post">
    <!-- Elemen input akan ditempatkan di sini -->
</form>

    Penjelasan:

    • action: URL tujuan di mana data formulir akan dikirimkan.
    • method: Metode pengiriman data (biasanya GET atau POST).
    • enctype: Tipe encoding yang digunakan untuk mengirimkan data (biasanya application/x-www-form-urlencoded untuk formulir standar dan multipart/form-data untuk formulir yang mengandung file upload).

      Elemen Input #

      Input Teks #

      Elemen <input type="text"> digunakan untuk memasukkan teks satu baris.

      <label for="nama">Nama:</label>
<input type="text" id="nama" name="nama">

      Input Password #

      Elemen <input type="password"> digunakan untuk memasukkan kata sandi.

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

      Input Email #

      Elemen <input type="email"> digunakan untuk memasukkan alamat email.

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

      Input Radio #

      Elemen <input type="radio"> digunakan untuk pilihan tunggal dari beberapa opsi.

      <label>
    <input type="radio" name="gender" value="male"> Pria
</label>
<label>
    <input type="radio" name="gender" value="female"> Wanita
</label>

      Input Checkbox #

      Elemen <input type="checkbox"> digunakan untuk pilihan ganda.

      <label>
    <input type="checkbox" name="hobby" value="reading"> Membaca
</label>
<label>
    <input type="checkbox" name="hobby" value="traveling"> Traveling
</label>

      Dropdown (Select) #

      Elemen <select> digunakan untuk membuat dropdown.

      <label for="country">Negara:</label>
<select id="country" name="country">
    <option value="id">Indonesia</option>
    <option value="us">USA</option>
    <option value="uk">UK</option>
</select>

      Textarea #

      Elemen <textarea> digunakan untuk memasukkan teks yang panjang (multi-baris).

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

      Input Tanggal #

      Elemen <input type="date"> digunakan untuk memilih tanggal.

      <label for="dob">Tanggal Lahir:</label>
<input type="date" id="dob" name="dob">

      Input File #

      Elemen <input type="file"> digunakan untuk mengunggah file.

      <label for="resume">Unggah Resume:</label>
<input type="file" id="resume" name="resume">

      Tombol Submit #

      Elemen <input type="submit"> atau <button type="submit"> digunakan untuk mengirimkan formulir.

      <input type="submit" value="Submit">
<!-- atau -->
<button type="submit">Submit</button>

      Contoh Formulir Lengkap #

      Berikut adalah contoh lengkap dari formulir HTML yang mengumpulkan berbagai jenis data dari pengguna:

      <!DOCTYPE html>
<html>
<head>
    <title>Formulir Pendaftaran</title>
</head>
<body>
    <h1>Formulir Pendaftaran</h1>
    <form action="submit_form.php" method="post" enctype="multipart/form-data">
        <label for="nama">Nama:</label>
        <input type="text" id="nama" name="nama"><br><br>

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

        <label for="password">Password:</label>
        <input type="password" id="password" name="password"><br><br>

        <label>Jenis Kelamin:</label>
        <label>
            <input type="radio" name="gender" value="male"> Pria
        </label>
        <label>
            <input type="radio" name="gender" value="female"> Wanita
        </label><br><br>

        <label for="country">Negara:</label>
        <select id="country" name="country">
            <option value="id">Indonesia</option>
            <option value="us">USA</option>
            <option value="uk">UK</option>
        </select><br><br>

        <label for="hobbies">Hobi:</label>
        <label>
            <input type="checkbox" name="hobby" value="reading"> Membaca
        </label>
        <label>
            <input type="checkbox" name="hobby" value="traveling"> Traveling
        </label><br><br>

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

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

        <label for="resume">Unggah Resume:</label>
        <input type="file" id="resume" name="resume"><br><br>

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

      Dengan menggunakan elemen-elemen ini, Anda dapat membuat formulir yang kaya dan fungsional untuk mengumpulkan berbagai jenis data dari pengguna. Jika ada pertanyaan lebih lanjut atau bagian yang perlu diperjelas, jangan ragu untuk bertanya.

      What are your Feelings