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:

Jika diperhatikan, ada empat buah field yang dibuat:

  1. Input username dengan tipe text
  2. Input password dengan tipe password
  3. Input remember me dengan tipe checkbox
  4. Input login dengan tipe submit

Field-field tersebut dibungkus dalam tag <fieldset>. Nantinya tag ini akan membuat sebuah garis.

Dalam tag <fieldset> dibuat tag <legend> untuk memberikan teks pada fieldset. Selain itu cermati atribut yang dipakai pada setiap field. Atribut placeholder berfungsi untuk menampilkan teks sementara. Lalu atribut value untuk memberikan nilai default pada field.

Setiap field  dibungkus dalam tag <p>, tujuannya supaya terlihat rapi. Lalu jangan lupa untuk memberikan label dengan tag <label>.

Membuat Form Contact

Setelah selesai membuat form untuk login, berikutnya kita buat form kontak. Sesuai dengan namanya form ini berfungsi untuk menghubungi admin dari suatu web. Berikut adalah kode untuk membuat form ini.

<!DOCTYPE html>
<html>
<head>
    <title>Hubungi Kami</title>
</head>
<body>
    <form action="contact.php" method="POST">
        <fieldset>
        <legend>Hubungi Kami</legend>
        <p>
            <label>Name:</label>
            <input type="text" name="name" placeholder="Masukkan nama..." />
        </p>
        <p>
            <label>Subject:</label>
            <input type="text" name="subject" placeholder="Subjek..." />
        </p>
        <p>
            <label>Email:</label>
            <input type="email" name="email" placeholder="Masukkan email..." />
        </p>
        <p>
            <input type="submit" name="submit" value="Send" />
        </p>
        </fieldset>
    </form>
</body>
</html>

Hasil dari kode di atas adalah sebagai berikut:

Untuk form ini kita gunakan type=email untuk field email. Sehingga field tersebut harus diisi dengan email. Jika yang dimasukkan bukan merupakan sebuah email, maka akan muncul peringatan yang meminta kita untuk memasukkan alamat email.

Membuat Form Register

Selesai membuat form kontak, kita tambah lagi dengan form registrasi. Pada form ini ada beberapa field yang kita perlukan, antara lain:

  1. Input nama lengkap
  2. Input username
  3. Input email
  4. Input password
  5. Input jenis kelamin
  6. Input agama
  7. Input biografi

Berikut kode untuk form registrasi:

<!DOCTYPE html>
<html>
<head>
    <title>Registrasi</title>
</head>
<body>
    <form action="contact.php" method="POST">
        <fieldset>
        <legend>Registrasi</legend>
        <p>
            <label>Nama:</label>
            <input type="text" name="nama" placeholder="Nama lengkap..." />
        </p>
        <p>
            <label>Username:</label>
            <input type="text" name="username" placeholder="Username..." />
        </p>
        <p>
            <label>Email:</label>
            <input type="email" name="email" placeholder="Your email..." />
        </p>
        <p>
            <label>Password:</label>
            <input type="password" name="password" placeholder="Password..." />
        </p>
        <p>
            <label>Jenis kelamin:</label>
            <label><input type="radio" name="jenis_kelamin" value="laki-laki" /> Laki-laki</label>
            <label><input type="radio" name="jenis_kelamin" value="perempuan" /> Perempuan</label>
        </p>
        <p>
            <label>Agama:</label>
            <select name="agama">
                <option value="islam">Islam</option>
                <option value="kristen">Kristen</option>
                <option value="hindu">Hindu</option>
                <option value="budha">Budha</option>
            </select>
        </p>
        <p>
            <label>Biografi:</label>
            <textarea name="biografi"></textarea>
        </p>
        <p>
            <input type="submit" name="submit" value="Daftar" />
        </p>
        </fieldset>
    </form>
</body>
</html>

Maka hasilnya kurang lebih akan seperti berikut:



Leave a Comment