Cara menggunakan responsive form bootstrap

Question

Teman-teman diharapkan dapat memahami sekilas atau dasar dari HTML dan CSS ya, supaya kedepan nya jika dalam melakukan pemrograman web tidak terlalu ribet atau pusing karena sudah tahu dasar nya.

Table of Contents Show

Model form bootstrap dimana posisi label dan input form terletak dalam bentuk baris dinamakan?
Apa itu form bootstrap?
Framework Bootstrap terdiri dari file apa saja?
Bagaimana cara mendapatkan bootstrap?

Bootstrap

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

Oiya pada postingan sebelumnya kita juga sempat membahas Sebuah Website sekolah yang kita buat menggunakan Framework Bootstrap nih, berikut link nya :

Membuat Website Sekolah Responsive dengan Bootstrap

Membuat Form Login

Dalam membuat form login ini kita akan menggunakan Bantuan Framework dari Bootstrap ya teman-teman dan juga nanti akan ditambahkan style.css supaya form login kita lebih responsive.

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

Baik teman-teman, berikut ini adalah sintak dalam 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 rel="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 untuk 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 Untuk Membuat Todo List</p>
              </div>
              <div class="mb-3">
                <label for="email" class="form-label">Email address</label>
                <input type="email" class="form-control" id="email" name="email">
              </div>
              <div class="mb-3">
                <label for="password" class="form-label">Password</label>
                <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 Punya 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>

Jika teman-teman lihat, diatas kita menggunakan 2 css, yaitu dari bootstrap dan dari style.css yang kita buat sendiri.

Berikutnya adalah style.css, file css ini berisi media query yang digunakan supaya form kita dapat lebih responsive jika berada di berbagai perangkat, contoh seperti desktop, tablet, ataupun 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;
}


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

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

Jika dilihat dari sintaks diatas, terdapat @media screen dengan max-width yang berbeda-beda, nah disitu adalah css yang digunakan supaya form login kita lebih responsive. Disarankan untuk pemanggilan style.css berada dalam satu folder ya teman-teman.

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

Berikut ini adalah hasil dari form login simpel pada Desktop

Berikut ini adalah hasil dari form login simpel pada Ipad

Berikut ini adalah hasil dari form login simpel pada Iphone atau Smartphone

Berikut ini adalah hasil dari form login simpel Responsive

Pada gambar terkahir, yaitu saya mencoba dengan pilihan responsive, yang artinya form login akan mengikuti layout atau ukuran dari perangkat yang digunakan untuk membuka halaman login tersebut.

Baik, cukup seperti itu untuk tutorial membuat Form Login Simpel menggunakan HTML, CSS dan Bootstrap. Semoga tutorial ini bermanfaat untuk kita semua.

Model form bootstrap dimana posisi label dan input form terletak dalam bentuk baris dinamakan?

form dengan model inline adalah sebuah form yang label dan form inputnya terletak sebaris.

Apa itu form bootstrap?

Bootstrap adalah salah satu framework CSS yang berfokus pada pengembangan front-end website. Di dalamnya mengandung HTML, CSS, dan JavaScript untuk membuat tampilan website yang modern, responsif, dan mobile-friendly. Project open source ini bisa Anda pakai secara gratis dengan mengunduhnya dari GitHub.

Framework Bootstrap terdiri dari file apa saja?

Bootstrap terdiri dari kumpulan syntax yang dikompilasi dalam tiga file utama: Bootstrap.css, Bootstrap.js, dan Glyphicons.

Bagaimana cara mendapatkan bootstrap?

Bootstrap dapat kita download dari website resminya, yakni getbootstrap.com . Pada website tersebut terdapat tombol download. Versi Bootstrap yang akan kamu dapatkan dari tombol download tersebut adalah versi terbaru.

kode bootstrap