Membuat Form menggunakan HTML dan CSS

Salah satu aspek penting dalam pengembangan website adalah pembuatan formulir yang interaktif dan menarik. Dalam tutorial ini, kita akan membahas langkah-langkah untuk membuat form menggunakan HTML dan CSS. Dengan memadukan kedua bahasa pemrograman ini, kita dapat menciptakan pengalaman pengguna yang lebih baik dan estetis

Langkah Kerja:

Buatlah file HTML dengan isi berikut terlebih dahulu

<!DOCTYPE html>
<html lang="en">


<head>
  <title>Form Style</title>
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
</head>

<body>
  <div class="container">
    <h2>Form Login</h2>
    <form action="">
      <label for="email">Email</label><br>
      <div class="group-item">
        <i class="material-symbols-outlined"> mail </i>
        <input type="email" class="email" /><br />
      </div>
      <label for="password" class="password">Password</label>
      <div class="group-item">
        <i class="material-symbols-outlined"> lock </i>
        <input type="password" /><br />
      </div>
      <div class="register">
        <p>Belum Punya akun ? <a href="#">Register Here!!!</a></p>
      </div>
      <button>Submit</button>
    </form>
  </div>
</body>


</html>

Lalu buat class pada tag yang ingin diberi style, berikut adalah contohnya

<div class="container">

Berikut adalah beberapa properti CSS yang akan digunakan

  1. font-family
    Fungsi: Menentukan jenis font yang akan digunakan untuk teks di dalam elemen yang dipilih.
  2. background-color
    Fungsi: Menentukan warna latar belakang dari elemen yang dipilih.
  3. width
    Fungsi: Menentukan lebar elemen.
  4. padding
    Fungsi: Menentukan ruang di sekitar konten di dalam elemen.
  5. margin
    Fungsi: Menentukan ruang di sekitar elemen di luar border.
  6. border-radius
    Fungsi: Menentukan radius sudut dari elemen dengan border.
  7. color
    Fungsi: Menentukan warna teks.
  8. height
    Fungsi: Menentukan tinggi elemen.
  9. text-transform
    Fungsi: Mengubah kapitalisasi teks.
  10. font-weight
    Fungsi: Menentukan ketebalan huruf teks.
  11. border
    Fungsi: Menentukan border elemen.
  12. display
    Fungsi: Menentukan bagaimana elemen ditampilkan dalam layout dokumen.
  13. font-style
    Fungsi: Menentukan gaya font teks (seperti normal, italic, atau oblique).
  14. text-decoration
    Fungsi: Menentukan dekorasi teks, seperti menghapus garis bawah pada tautan (hyperlink).


Lalu buatlah file CSS dengan isi berikut

body{
         font-family: Arial, Helvetica, sans-serif;
}
.container{
         background-color: gray;
         width: 25%;
         padding: 10px;
         margin: 18% auto;
         border-radius: 10px;
}
button{
         background-color: green;
         width: 100%;
         color: white;
         height: 35px;
         text-transform: uppercase;
         font-weight: bold;
         border: 0;
         border-radius: 5px;
         margin-bottom: 20px;
}
input{
         width: 90%;
         margin-bottom: 10px;
         margin-top: 10px;
         border: 0;
         border-radius: 5px;
         height: 30px;
}
.group-item{
         display: flex;
}
.group-item i{
         padding-top: 15px;
         padding-right: 10px;
}
.register p{
         font-style: 10px;
}
.register p a{
         text-decoration: none;
}

Buka browser dan hasilnya akan menjadi seperti ini

Subscribe

Related articles

Membuat Design Form Login & Register Hi-Fi (Hight-Fidelity)

  Langkah - langkah membuat Hight-Fidelity pada UI “Login” seperti...

Mengenal Fitur Pada Figma

Figma memiliki fungsi yang berbeda dengan aplikasi desain grafis...

4 Karateristik Utama Yang Baik Pada UX

Apa yang membuat suatu produk efektif bagi penggunanya? Jawabannya berbeda-beda...

Mengenal UI/UX Dan Perbedaannya

Ap aitu UI/UX? UI (User Interface) dan UX (User Experience)...

Mengenal Display Properti Pada CSS

Display property dalam CSS adalah untuk mengontrol tipe tata...

LEAVE A REPLY

Please enter your comment!
Please enter your name here