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:

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.

Untuk <select></option> sifatnya sama seperti radio, namun bentuknya yang berbeda. Sedangkan untuk memasukkan teks yang panjang kita gunakan tag <textarea>.

Membuat Form dengan Tanggal

Sebenarnya field yang biasa digunakan dalam pembuatan form sangat banyak macamnya. Ada meter, color, url, number, date, datetime, dan lain-lain. Misalnya kita ingin membuat form dengan tambahan tanggal lahir, maka kita masukkan kode berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Form HTML</title>
</head>
<body>
    <form action="contact.php" method="POST">
        <fieldset>
        <legend>Form</legend>
        <p>
            <label>Alamat Web:</label>
            <input type="url" name="name" placeholder="Masukan URL Web..." />
        </p>
        <p>
            <label>Tanggal Lahir:</label>
            <input type="date" name="tanggal" />
        </p>
        <p>
            <label>Umur:</label>
            <input type="number" min="10" max="90" name="umur" />
        </p>
        <p>
            <input type="submit" name="submit" value="Send" />
        </p>
        </fieldset>
    </form>
</body>
</html>

Dari kode di atas akan menghasilkan tampilan seperti berikut:

Baca juga: Cara Membuat Database MySQL Dengan Mudah

Membuat Desain Form Login Transparan

Contoh di atas memang masih terlihat sederhana. Akan tetapi kita bisa berkreasi sehingga tampilan form yang kita buat lebih menarik untuk dipandang. Misalnya kita buat agar form login tampil dengan efek transparan. Langkah-langkahnya adalah sebagai berikut.

  • Buat folder baru terlebih dahulu dengan nama terserah.
  • Buka aplikasi kode editor atau aplikasi notepad dan buat file index.html yang disimpan dalam folder yang baru kita buat.
  • Copy dan paste kode atau script di bawah ini pada file index.html.
<!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <title>Login Page</title>
    <link rel="stylesheet" href="style.css" media="screen" title="no title">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
      <div class="login">

          <div class="avatar">
            <i class="fa fa-user"></i>
          </div>

          <h2>Login Form</h2>

          <div class="box-login">
            <i class="fas fa-envelope-open-text"></i>
            <input type="text" placeholder="Email">
          </div>

          <div class="box-login">
            <i class="fas fa-lock"></i>
            <input type="text" placeholder="Password">
          </div>

          <button type="submit" name="login" class="btn-login">Login</button>
          <div class="bottom">
            <a href="#">Register</a>
            <a href="#">Forgot Password</a>
          </div>
      </div>
  </head>
  </html>

Kode di atas masih menghasilkan tampilan yang sederhana.

  • Berikutnya tambahkan script css untuk membuat desain tampilannya. Caranya dengan membuat file dengan nama style.css dan simpan pada folder yang kita buat tadi.
  • Copy dan paste script berikut ini.
body {
   margin: 0;
   padding: 0;
   background: #90caf9 ;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   background-attachment: fixed;
   font-family: sans-serif;
 }
 .login {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-30%, -50%);
   background: rgba(4, 29, 23, 0.5);
   padding: 50px;
   width: 270px;
   box-shadow: 0px 0px 25px 10px black;
   border-radius: 15px;
 }
 .avatar {
   font-size: 30px ;
   background: #E59866;
   width: 50px;
   height: 50px;
   line-height: 50px;
   position: fixed;
   left: 50%;
   top: 0;
   transform: translate(-50%, -50%);
   text-align: center;
   border-radius: 50%;
 }
 .login h2 {
   text-align: center;
   color: white;
   font-size: 30px;
   font-family: sans-serif;
   letter-spacing: 3px;
   padding-top: 0;
   margin-top: -20px;
 }
 .box-login {
   display: flex;
   justify-content:space-between;
   margin: 10px;
   border-bottom: 2px solid white;
   padding: 8px 0;
 }
 .box-login i {
   font-size: 23px;
   color: white;
   padding: 5px 0;
 }
 .box-login input {
   width: 85%;
   padding: 5px 0;
   background: none;
   border: none;
   outline: none;
   color: white;
   font-size: 18px;
 }
 .box-login input::placeholder {
   color: white;
 }
 .btn-login
 .box-login input:hover{
   background: rgba(10, 10, 10,s 0.5);
 }
 .btn-login {
   margin-left: 10px;
   margin-bottom: 20px;
   background: none;
   border: 1px solid white;
   width: 92.5%;
   padding: 10px;
   color: white;
   font-size: 18px;
   letter-spacing: 3px;
   cursor: pointer;
   }
 .btn-login:hover{
   background: rgba(12, 30, 15, 0.5);
 }
 .bottom {
   margin-left: 10px;
   margin-right: 10px;
   display: flex;
   justify-content: space-between;
 }
 .bottom a {
   color: white;
   font-size: 15px;
   text-decoration: none;
 }
 .bottom a:hover {
 text-decoration: underline;
 }
  • Setelah selesai, Anda bisa membuka index.html pada web browser. Hasilnya kurang lebih akan seperti berikut.

  • Untuk menambahkan background gambar, Anda bisa copy-paste gambar yang diinginkan ke dalam folder tadi. Beri nama gambar tersebut misalnya background.
  • Selanjutnya, buka script style.css tadi dan cari background. Ubah script yang tertulis dengan format seperti berikut.

  • Hasilnya akan menjadi seperti berikut ini.

Perlu dicatat, pada url(background.jpg) harus disesuaikan dengan nama file beserta ekstensinya. Misalnya jika gambar tersebut memiliki nama gambar.png, maka script yang ditulis menjadi url(gambar.png).

Dari kode-kode di atas Anda bisa melakukan modifikasi dan mengaturnya sesuai dengan keinginan. Dengan kata lain Anda bisa mengembangkan sendiri form yang Anda inginkan berdasarkan contoh-contoh sederhana di atas. Semoga tutorial membuat form HTML dengan CSS di atas bermanfaat untuk Anda. Selamat belajar dan tetap semangat!

Loading...

Leave a Comment