Tutorial Membuat Form Login Dengan Bootstrap

Assalamualaikum, Halo tampin-teman semua, selamat datang juga plong Web Blog kami, yaitu Awonapa Jr. Pada kesempatan ini kita akan sharing tentang Pemrograman Web menggunakan HTML, CSS dan Framework Bootstrap sebagai Front End dari Web kita, Ialah meributkan

Form Login Simpel dengan HTML, CSS dan Bootstrap.

Teman-teman diharapkan dapat memahami sekilas ataupun radiks bersumber HTML dan CSS ya, biar kedepan nya seandainya dalam mengamalkan pemrograman web tidak terlalu ribet maupun keruh karena sudah tahu pangkal nya.

Bootstrap

Oiya sebelum itu, kita juga akan berkenalan dengan Bootstrap, Bootstrap ataupun dikenal dengan Framework CSS, HTML, Javascript yang populer, dan mudah digunakan. Bootstrap ini biasanya lebih selalu digunakan untuk perancangan website merupakan pada bagian Front-End pada Website

Oiya pada postingan sebelumnya kita juga sempat membicarakan Sebuah Website sekolah nan kita kerjakan memperalat Framework Bootstrap nih, berikut link nya :

Membuat Website Sekolah Responsive dengan Bootstrap

Membuat Form Login

Dalam takhlik form login ini kita akan menggunakan Pertolongan Framework berpokok Bootstrap ya teman-teman dan juga esok akan ditambahkan
style.css
supaya form login kita makin responsive.

Form login simpel ini biasanya digunakan untuk melakukan proses autentikasi sebelum sendiri user atau admin masuk ke dalam sebuah website, gunanya adalah untuk memberikan keamanan puas website itu sendiri. Dan pula dengan melalui form login, user bisa masuk ke n domestik sebuah website, sebagai admin atau user biasa.

Baik n antipoda-teman, berikut ini yakni sintak n domestik form login nya.

Form Login

        <!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link landasan kereta api="stylesheet" href="style.css">
<title>Form Login</title>
</head>
<body>
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-sm bg-dark rounded text-light">
<form action="" method="POST">
<div class="text-center">
<!-- Ini bakal konfirmasi Login -->
<!-- <?php if(isset($error)) : ?>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Login Gagal</strong> Email atau Password Salah.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<?php endif; ?> -->
<h1>Login</h1>
<p>Silahkan Login Kerjakan Menciptakan menjadikan Todo List</p>
</div>
<div class="mb-3">
<label for="email" class="form-jenama">Email address</merek>
<input type="email" class="form-control" id="email" name="email">
</div>
<div class="mb-3">
<tera for="password" class="form-label">Password</merek>
<input type="password" class="form-control" id="password" name="password">
</div>
<button type="submit" class="btn btn-primary" name="login">Login</button>
</form>
<div align="center">
<p>Belum N kepunyaan Akun?</p>
<a href="register.php"><button class="btn btn-danger">Register</button></a><br><br>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</html>

Kalau rival-padanan lihat, diatas kita menggunakan 2 css, ialah dari bootstrap dan terbit style.css yang kita buat sendiri.

Berikutnya adalah style.css, file css ini sakti media query yang digunakan kendati form kita boleh lebih responsive jika berada di beraneka macam perangkat, cermin seperti desktop, tablet, maupun smartphone. Berikut ini adalah sintak dari style.css nya.

File Style.css

        body {
background-color: #ffc107;
}

.col-sm {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 30%;
padding: 20px;
}

@ki alat screen and (max-width: 900px) {
.col-sm {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 50%;
padding: 20px;
}
}

@sarana screen and (max-width: 600px) {
.col-sm {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 80%;
padding: 20px;
}
}

Jika dilihat berpokok sintaks diatas, terwalak
@sarana screen
dengan
max-width
yang farik-beda, nah disitu yaitu css yang digunakan biar form login kita lebih responsive. Disarankan bikin pemanggilan
style.css rani dalam suatu folder
ya dagi-teman.

Baik, berikut ini merupakan hasil dari form login + style css yang telah kita buat diatas.

Berikut ini adalah hasil dari form login simpel pada Desktop

Form Login Desktop

Berikut ini ialah hasil berusul form login simpel pada Ipad

Form Login Ipad

Berikut ini ialah hasil dari form login simpel plong Iphone maupun Smartphone

Form Login Iphone atau Smartphone

Berikut ini adalah hasil dari form login simpel Responsive

Form Login Responsive

Pada gambar terkahir, yaitu saya mengepas dengan saringan responsive, nan artinya form login akan mengikuti layout atau ukuran berpunca alat yang digunakan bakal membuka pekarangan login tersebut.

Baik, layak seperti itu kerjakan tuntunan membuat Form Login Simpel menunggangi HTML, CSS dan Bootstrap. Hendaknya tutorial ini berguna untuk kita semua.

Sekian dan Terimakasih

Tag Penelusuran

  • Form Login
  • Tutorial HTML
  • Tutorial CSS
  • Les Bootstrap

Source: https://www.awonapa.com/2021/05/form-login-simpel-dengan-html-css-dan.html