Hanya 2 Menit Membuat Form HTML dengan CSS

Membuat website bukan hanya untuk menampilkan informasi saja, Namun penting bagi pemilik website juga menampilkan Form seperti Kontak, Registrasi atau Login. Lalu bagaimana cara membuatnya? Pada kesempatan kali ini kami akan memberikan bagaimana caranya Membuat Form HTML dengan CSS. Langsung saja yuk kita bahas!

Apa itu Form HTML?

Form HTML adalah jenis data yang di inputkan pengguna yang akan diterima oleh pemilik website. Banyak kriteria form yang ada di website, Contohnya seperti, Registrasi Akun, Biodata Diri, Kontak Form dan lain sebagainya.

Form HTML sangatlah penting bagi pemilik website, Untuk disediakan dalam Website. Sesuai dengan jenis website itu sendiri.

Baca Juga : Cara Membuat Button Modern dengan HTML dan CSS

Cara Membuat Form HTML dengan CSS

Form di HTML memiliki tag <form>.

Tag <form> memiliki beberapa atribut didalamnya, seperti:

  • action untuk menentukan aksi pada isian dikirimkan ke file selanjutnya;
  • method metode pengiriman data.

Form Penjualan Buku

Buatlah file index.html dan style.css. Lalu tuliskan syntax berikut ini:

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Input Buku</title>

<link rel="stylesheet" href="style.css">
</head>
<body>
<form method="POST" action="input_buku.php">
<label for="nama_buku">Nama Buku:</label>
<input type="text" name="namabuku" id="namabuku" required>

<label for="stok">Stok:</label>
<input type="number" name="stok" id="stok" required>

<label for="harga">Harga Buku:</label>
<input type="number" name="hargabuku" id="hargabuku" required>

<label for="tanggal_terbit">Tanggal Terbit:</label>
<input type="date" name="tanggalterbit" id="tanggalterbit" required>

<input type="submit" value="Submit">
</form>

</body>

<footer>COPYRIGHT 2023 alafgani.web.id</footer>
</html>

Style.css

body {
font-family: Arial, sans-serif;
}

form {
width: 300px;
margin: 20px auto;
}

label {
display: block;
margin-bottom: 5px;
}

input[type="text"],
input[type="number"],
input[type="date"] {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}

input[type="submit"] {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}

input[type="submit"]:hover {
background-color: #45a049;
}


table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}

th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}

th {
background-color: #f2f2f2;
}

Setelah Kamu menuliskan syntax diatas, maka jalankan index.html di browser dan Hasilnya akan menjadi seperti ini:
membuat form html

Form diatas adalah form penjualan buku yang kita buat, kamu bisa memodifikasinya dengan form yang lain.

Baca Juga : Gampang! Cara Membuat Favicon Website HTML

Form HTML Pendaftaran Mahsiswa Baru

Contoh ke dua yang akan kita buat adalah form pendaftaran mahasiswa baru, Buat file index.html dan style.css dan tuliskan syntax dibawah ini:

index.html

<!DOCTYPE html>
<html>
<head>
<title>Form Pendaftaran Mahasiswa</title>

<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Form Pendaftaran Mahasiswa</h1>
<form action="#" method="post">
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama" required>
<br>

<label for="nim">NIM:</label>
<input type="text" id="nim" name="nim" required>
<br>

<label for="jurusan">Jurusan:</label>
<select id="jurusan" name="jurusan" required>
<option value="" disabled selected>Pilih Jurusan</option>
<option value="Teknik Informatika">Teknik Informatika</option>
<option value="Sistem Informasi">Sistem Informasi</option>
<option value="Manajemen Informatika">Manajemen Informatika</option>
<!-- Tambahkan pilihan jurusan lainnya di sini -->
</select>
<br>

<label>Jenis Kelamin:</label>
<input type="radio" id="laki-laki" name="jenis_kelamin" value="Laki-laki" required>
<label for="laki-laki">Laki-laki</label>
<input type="radio" id="perempuan" name="jenis_kelamin" value="Perempuan" required>
<label for="perempuan">Perempuan</label>
<br>

<label for="alamat">Alamat:</label>
<textarea id="alamat" name="alamat" rows="4" required></textarea>
<br>

<label for="no_hp">Nomor HP:</label>
<input type="tel" id="no_hp" name="no_hp" pattern="[0-9]{10,12}" required>
<br>

<input type="submit" value="Submit">
</form>
</body>
</html>

Style.css

body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 0;
}

h1 {
text-align: center;
margin-top: 20px;
}

form {
max-width: 500px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}

input[type="text"],
input[type="tel"],
select,
textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
font-size: 14px;
}

textarea {
resize: vertical;
}

input[type="radio"] {
margin-right: 5px;
}

input[type="submit"] {
background-color: #4CAF50;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}

input[type="submit"]:hover {
background-color: #45a049;
}

Penutup

Akhir dari pembahasan membuat form html dengan css, Hanya dengan melihat dan menuliskan syntax dengan benar kamu sudah pasti memahami dengan cepat, Cobalah dengan try in error. Maka, Kamu akan lebih cepat memahaminya. Jika ada pertanyaan lain terkait membuat form html tulis dikolom komentar ya!

1 thought on “Hanya 2 Menit Membuat Form HTML dengan CSS”

Leave a Comment