Cara Membuat Form HTML Rapi Dengan CSS


Membuat Form HTML Dengan CSS – Saat ini banyak orang yang familiar dengan web. Sebenarnya sebuah web bisa memiliki banyak sekali fungsi. Salah satunya adalah menampilkan sebuah informasi.



Selain itu web juga bisa berfungsi untuk mengambil informasi yang diisi oleh pengunjung. Kita bisa melakukannya dengan membuat suatu form. Perlu diketahui, form dalam web tidak jauh berbeda dengan formulir yang biasa tercetak dalam kertas.

Form di web juga dapat diisi dan diproses dengan suatu program. Form yang biasa dijumpai dalam web ini bisa bermacam-macam. Misalnya form untuk registrasi, pemesanan, pengisian data diri dan lain sebagainya. Karena fungsinya yang beragam pada kesempatan ini kami jelaskan bagaimana membuat form dengan CSS.

Baca juga: Cara Membuat Tabel Di HTML

Membuat Form di HTML

Pada HTML kita buat form dengan tag <form>. Tag tersebut mempunyai beberapa atribut yang harus diberikan. Misalnya action untuk menentukan aksi yang dilakukan saat data dikirim dan method yang merupakan metode pengiriman data.

Contoh:

<form action=”prosess.php” method=”GET”>



<!– form field di sini –>

</form>

Pada atribut action kita bisa mengisinya dengan alamat URL dari endpoint yang akan memproses form. Contoh di atas pada dasarnya kita menyuruh file process.php untuk memproses data form.

Perlu dicatat bahwa kode yang tertulis di atas masih belum menghasilkan apapun. Kita perlu membuat field terlebih dahulu.



Pengertian Field

Field adalah ruas yang bisa diisi dengan contoh. Contohnya adalah seperti berikut:

<input type=”text” name=”info” />

Sama halnya dengan form, field mempunyai beberapa atribut yang harus diberikan. Seperti type yang merupakan tipe dari field dan name yang merupakan nama field yang akan menjadi kunci dan variabel di dalam program.

Supaya lebih jelas, di bawah ini kita berlatih membuat form login hingga form registrasi. Kita mulai dari form login yang lebih sederhana.

Membuat Form Login

Untuk membuat form login, kita memerlukan beberapa elemen dan field. Berikut rinciannya:



  1. FIeld untuk memasukkan username atau email
  2. Field untuk memasukkan password
  3. Checkbox untuk opsi remember me
  4. Tombol untuk melakukan login

Berdasarkan elemen dan field di atas, kita buat kodenya seperti berikut:

<!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>

Hasilnya akan seperti gambar di bawah ini:



Leave a Comment