Jika Tautan Rusak atau Halaman Error,

Hubungi Halaman "Kontak Admin"

×

Cara Membuat Form HTML Rapi Dengan CSS

March 18th, 2023 By

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!



Pages: 1 2 3

RELATED POST