Jika Tautan Rusak atau Halaman Error,

Hubungi Halaman "Kontak Admin"

×

Cara Membuat Form HTML Rapi Dengan CSS

March 18th, 2023 By

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:

Dari form di atas kita bisa menjumpai beberapa field baru seperti field radio, <select><option> dan <textarea>. Yang menjadi pertanyaan apa perbedaan radio dan checkbox?

Jika Anda ingin pengunjung hanya dapat memilih satu pilihan saja, maka yang digunakan adalah radio. Sedangkan jika ingin pengunjung bisa memilih lebih dari satu, maka gunakan checkbox.



Pages: 1 2 3

RELATED POST