Ibu-hamil.id Informasi Terkini Dan Terupdate
Kali ini admin ibu-hamil.id akan membagikan panduan tentang cara membuat form login di tengah menggunakan html dan css . anda bisa mengunakan beberapa cara yang akan saya bagikan di artikel ini .
Form adalah komponen yang sering kita temui dalam pengembangan web karena digunakan untuk mengumpulkan data dari pengguna. Namun, tampilan form yang tidak proporsional dapat mengurangi pengalaman pengguna (UX). Oleh karena itu, penting untuk menempatkan form di tengah layar untuk membuatnya mudah diakses dan mudah dilihat. Dalam artikel ini, kami akan membahas secara rinci bagaimana membuat form di tengah layar dengan menggunakan CSS dan HTML yang baik.
Mengapa Form login di tengah sangat Penting?
Beberapa keuntungan utama dari menempatkan formulir di tengah layar termasuk:
- Pengalaman Pengguna yang Lebih Baik: Pengguna dapat menemukan dan mengisi form dengan mudah tanpa harus menggulir atau mencari di halaman.
- Estetika yang Lebih Menarik: Form yang tepat membuat tampilan lebih bersih dan profesional.
- Aksesibilitas yang Lebih Tinggi: Form di tengah layar lebih mudah diakses oleh pengguna mobile.
Cara membuat form login di tengah menggunakan html dan css
Cara Membuat Form Login Di Tengah bisa di lakukan dengan beberapa cara dan banyak teknik CSS dapat digunakan untuk menempatkan form di tengah layar. Berikut ini adalah beberapa teknik yang paling berhasil:
1. Cara membuat form login di tengah dengan Menggunakan Flexbox:
Flexbox adalah salah satu metode yang paling populer untuk menempatkan elemen di tengah layar dan mudah digunakan. Berikut adalah prosedurnya:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form di Tengah Layar</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.form-container {
width: 300px;
padding: 20px;
background-color: #f2f2f2;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="form-container">
<form>
<label for="name">Nama:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
Pada kode di atas, CSS Flexbox digunakan untuk membuat form berada di tengah layar dengan menyesuaikan konten dan item yang diatur menjadi pusat. tinggi: 100vh memastikan bahwa tinggi elemen tubuh adalah seratus persen dari viewport, sehingga form selalu berada di tengah, baik horizontal maupun vertikal.
2. Menggunakan Grid Layout
Cara Membuat Form Login Di Tengah lain yang efektif untuk menempatkan elemen di tengah layar adalah dengan menggunakan Grid Layout CSS Grid. Cara penggunaannya adalah sebagai berikut:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form di Tengah Layar</title>
<style>
body {
display: grid;
place-items: center;
height: 100vh;
margin: 0;
}
.form-container {
width: 300px;
padding: 20px;
background-color: #f2f2f2;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="form-container">
<form>
<label for="name">Nama:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
Dalam kode ini, place-items: center pada Grid Layout CSS memastikan bahwa form berada tepat di tengah layar. Ketika kita perlu mengubah banyak elemen halaman, Grid CSS adalah opsi yang lebih fleksibel.
3. Menggunakan Position Absolute dan Transform
Cara Membuat Form Login Di Tengah Menggunakan properti position dan transform di CSS adalah metode lain yang sering digunakan. Berikut adalah contohnya:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form di Tengah Layar</title>
<style>
body {
margin: 0;
height: 100vh;
position: relative;
}
.form-container {
width: 300px;
padding: 20px;
background-color: #f2f2f2;
border-radius: 8px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="form-container">
<form>
<label for="name">Nama:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
Pada contoh ini, kita menggunakan position: absolute untuk menempatkan form relatif terhadap elemen body. Kemudian, kita menggunakan top: 50% dan left: 50% untuk memposisikan form di tengah layar. Kami juga memastikan bahwa form berada di pusat secara akurat dengan menggunakan transformasi: translate(-50%, -50%).
4. Menggunakan Margin Otomatis
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form di Tengah Layar</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.form-container {
width: 300px;
margin: auto;
padding: 20px;
background-color: #f2f2f2;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="form-container">
<form>
<label for="name">Nama:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
Margin otomatis adalah metode lain yang lebih konvensional, terutama untuk elemen dengan lebar tetap:
Metode ini menggunakan margin: auto untuk membuat elemen form berada di tengah secara horizontal. Ini efektif untuk halaman yang tidak membutuhkan pengaturan vertikal yang rumit.
Penutup
Salah satu langkah penting dalam meningkatkan pengalaman pengguna situs web adalah menempatkan formulir di tengah layar. Kita dapat dengan mudah mendapatkan hasil yang diinginkan dengan menggunakan teknik CSS yang telah dijelaskan di atas. Pilihan metode didasarkan pada kebutuhan khusus dan tingkat kompleksitas halaman web yang sedang kita buat. Kita dapat memastikan bahwa form di situs kita tidak hanya fungsional tetapi juga menarik secara visual dengan pemahaman yang tepat.
