Tutorial HTML 12 : Cara Membuat Form

Tutorial HTML 12 : Cara Membuat Form

 

Web tidak hanya berfungsi sebagai media untuk menampilkan informasi, tetapi juga sebagai alat untuk mengumpulkan data dari pengunjung. Salah satu cara yang umum digunakan untuk mengumpulkan informasi dari pengguna adalah melalui penggunaan form. Form dalam web dapat diibaratkan seperti formulir dalam dunia nyata, di mana pengguna dapat mengisi informasi yang diperlukan dan kemudian data tersebut dapat diproses menggunakan program tertentu. Dalam tutorial ini, kita akan fokus pada pembelajaran cara membuat form di HTML. Namun, kita hanya akan membahas langkah-langkah pembuatan form tanpa melakukan proses data lebih lanjut, karena hal tersebut termasuk dalam topik pembahasan yang berbeda. Jadi, mari kita mulai belajar cara membuat form di HTML.

Cara Membuat Form HTML

Cara Membuat Form di HTML sangatlah sederhana dan mudah dipahami. Kita dapat menggunakan tag <form> untuk membuat form, yang memiliki beberapa atribut penting seperti action dan method.

Atribut action digunakan untuk menentukan alamat URL dari endpoint yang akan memproses data yang dikirim melalui form. Misalnya, jika kita ingin data form dikirim ke halaman proses.php untuk diproses, maka kita dapat menentukan action="proses.php".

Selain itu, atribut method digunakan untuk menentukan metode pengiriman data. Metode yang paling sering digunakan ialah GET dan POST. Dalam contoh di atas, kita menggunakan method GET, yang berarti data form akan dikirim melalui URL. Metode POST digunakan untuk mengirim data secara tersembunyi dan lebih aman.

 

Berikut adalah contoh kode HTML untuk membuat form dengan action ke proses.php dan menggunakan method GET:

 

```html
<form action="proses.php" method="GET">
    <!-- Tambahkan field-field di sini -->
</form>
```

 

Namun, perlu diingat bahwa kode HTML di atas hanya merupakan kerangka dasar dari sebuah form. Kita juga perlu menambahkan field-field yang akan digunakan dalam form tersebut. Misalnya, field untuk nama, alamat email, atau pesan. Dengan menambahkan field-field tersebut, form kita akan siap untuk digunakan.

Dalam tutorial ini, kita hanya membahas cara membuat kerangka dasar form di HTML. Proses pengolahan data form menggunakan bahasa pemrograman lain seperti PHP akan dibahas pada kesempatan selanjutnya. Jadi, mari kita mulai dengan membuat form sederhana di HTML untuk memahami dasar-dasarnya.

 

Baca Juga 

• HTML 11 Membuat Tabel
• HTML 10 Membuat List

 

Apa Itu Field ?

Field adalah bagian dari sebuah form yang memungkinkan pengguna untuk memasukkan atau memilih data. Dalam konteks HTML, field direpresentasikan oleh elemen-elemen seperti <input>, <textarea>, atau <select>. Contoh field adalah kotak teks, area teks, atau dropdown menu.

Contoh kode HTML untuk membuat field input teks:

 

```html
<input type="text" name="nama" />
```

 

Di sini, kita menggunakan elemen <input> dengan atribut type="text" untuk membuat field input teks. Atribut name digunakan untuk memberikan nama atau kunci yang akan digunakan untuk mengidentifikasi field ini di dalam program.

Selain input teks, ada juga beberapa jenis field lainnya seperti checkbox, radio button, atau dropdown menu. Setiap jenis field memiliki atribut yang berbeda-beda tergantung pada jenis data yang akan dimasukkan atau dipilih oleh pengguna.

Dengan menggunakan field-field ini, kita dapat mengumpulkan berbagai jenis data dari pengguna melalui form, dan kemudian memprosesnya sesuai kebutuhan dalam program kita.

 

Latihan Membuat Form Login

Latihan ini memberikan kesempatan untuk memahami konsep dasar pembuatan form login dalam HTML. Form login merupakan salah satu elemen yang umum ditemui dalam pengembangan situs web atau aplikasi web, karena digunakan untuk mengautentikasi pengguna sebelum mengakses fitur-fitur tertentu.

Dalam form login yang dibuat, terdapat beberapa field dan elemen yang penting untuk menciptakan pengalaman login yang aman dan nyaman bagi pengguna:

 

1. Field untuk input username atau email: Pengguna diminta untuk memasukkan username atau email mereka, yang nantinya akan digunakan untuk mengidentifikasi akun pengguna saat login. Dengan menggunakan tag input type="text", pengguna dapat dengan mudah memasukkan informasi tersebut.
2. Field untuk input password: Untuk menjaga keamanan data pengguna, form login juga meminta pengguna untuk memasukkan password mereka. Namun, karena password bersifat rahasia, input type="password" digunakan untuk menyembunyikan karakter yang dimasukkan oleh pengguna.
3. Checkbox untuk remember me: Untuk memberikan kenyamanan kepada pengguna, form login juga menyediakan opsi "Remember me". Jika pengguna mencentang kotak ini, informasi login mereka akan disimpan untuk sesi berikutnya, sehingga mereka tidak perlu memasukkan username dan password setiap kali mengakses situs.
4. Tombol untuk login: Tombol submit dengan label "Login" digunakan untuk mengirimkan data login yang dimasukkan oleh pengguna ke server untuk diproses. Saat tombol ini ditekan, form akan mengirimkan data ke halaman login.php yang ditentukan dalam atribut action.

 

Dengan menggunakan kode HTML di atas, pengembang web dapat membuat form login yang sederhana namun efektif untuk digunakan dalam aplikasi web mereka. Selanjutnya, data login yang dikirimkan oleh pengguna melalui form ini dapat diproses oleh server untuk melakukan autentikasi dan memberikan akses kepada pengguna yang berhasil login.

 

Berikut adalah kode HTML lengkap untuk membuat form login:

 

```html
<!DOCTYPE html>
<html>
<head>
    <title>Form Login</title>
</head>
<body>
    <form action="login.php" method="POST">
        <fieldset>
        <legend>Login</legend>
        <p>
            <label>Username:</label>
            <input type="text" name="username" placeholder="username..." />
        </p>
        <p>
            <label>Password:</label>
            <input type="password" name="password" placeholder="password..." />
        </p>
        <p>
            <label><input type="checkbox" name="remember" value="remember" /> Remember me</label>
        </p>
        <p>
            <input type="submit" name="submit" value="Login" />
        </p>
        </fieldset>
    </form>
</body>
</html>
```

 

Dalam kode di atas:

 

- Tag `<form>` digunakan untuk membuat form, dengan atribut action yang menunjukkan halaman tempat data form akan dikirim untuk diproses (dalam kasus ini, login.php), dan atribut method yang menentukan metode pengiriman data (POST).

- Tag `<fieldset>` digunakan untuk mengelompokkan elemen-elemen form yang terkait secara logis, dengan tag `<legend>` untuk memberikan judul atau keterangan tentang grup elemen form tersebut.

- Elemen form yang dibutuhkan termasuk field untuk input username (`<input type="text">`), field untuk input password (`<input type="password">`), checkbox untuk remember me (`<input type="checkbox">`), dan tombol submit (`<input type="submit">`).

- Setiap field memiliki atribut name yang akan digunakan untuk mengidentifikasi nilai yang dikirimkan melalui form ketika form disubmit. Atribut placeholder digunakan untuk memberikan petunjuk tentang data yang diharapkan.

- Saat form disubmit, data akan dikirim ke halaman login.php untuk diproses menggunakan metode POST.

 

Dengan menggunakan kode di atas, Anda dapat membuat form login yang sederhana namun efektif untuk digunakan dalam aplikasi web Anda.

Published on May 02, 2024
Last updated on March 20, 2025