Membuat Form menggunakan HTML dan CSS

November 20, 2023

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

font-family
Fungsi: Menentukan jenis font yang akan digunakan untuk teks di dalam elemen yang dipilih.
background-color
Fungsi: Menentukan warna latar belakang dari elemen yang dipilih.
width
Fungsi: Menentukan lebar elemen.
padding
Fungsi: Menentukan ruang di sekitar konten di dalam elemen.
margin
Fungsi: Menentukan ruang di sekitar elemen di luar border.
border-radius
Fungsi: Menentukan radius sudut dari elemen dengan border.
color
Fungsi: Menentukan warna teks.
height
Fungsi: Menentukan tinggi elemen.
text-transform
Fungsi: Mengubah kapitalisasi teks.
font-weight
Fungsi: Menentukan ketebalan huruf teks.
border
Fungsi: Menentukan border elemen.
display
Fungsi: Menentukan bagaimana elemen ditampilkan dalam layout dokumen.
font-style
Fungsi: Menentukan gaya font teks (seperti normal, italic, atau oblique).
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