Cara Membuat Form Login Dengan HTML

  • 3 min read
  • Jun 18, 2021
cara membuat from login dengan html
Ahmad Hasanudin
Latest posts by Ahmad Hasanudin (see all)

Pada kesempatan kali ini saya ingin berbagi bagaimana cara membuat form login dengan html, sebenarnya sedikit males harus back to code, meski sebenarnya itu merupakan bidang saya.

Kok bisa? Alasannya simple sih jadi seorang programmer itu membutuhkan waktu banyak, sedang akhir-akhir ini saya menjadi orang yang lebih liar pada biasanya Ckkkckk

Jika dulu semasa kuliah dan kerja bisa menghabiskan waktu berjam-jam di depan layar komputer untuk menyelesaikan masalah, tapi untuk saat ini rasanya tidak sanggup lagi.

Lebih baik menghabiskan waktu berjam-jam menulis, bikin konten, bikin artikel atau optimasi web.

Langsung saja ya, di bawah ini merupakan langkah-langkah cara membuat form login dengan html.

Baca Juga: Simbol Flowchart

Apa Itu HTML?

Sebenarnya saya yakin kalian sudah sangat paham dan hafal apa itu HTML?

Namun untuk kalian yang belum mengetahuinya, saya akan mengulas sedikit tentang HTML ya, hanya sedikit saja.

HTML merupakan kependekan dari Hyper Text Markup Language, sejenis bahasa pemograman yang di khususkan untuk web programing.

Tentu jika kalian ingin menguasai HTML harus menghafal tag-tagnya.

Biasanya html itu hanya menghendel interfacenya saja, untuk fungsinya sendiri bisa menggunakan berbagai macam bahasa pemograman, seperti pyton, php atau bahkan java.

Cara Membuat Form Login dengan HTML

Agar mempermudah dalam membuat form login, ada baiknya kalian menggunakan bootstrap.

Apa itu Bootstrap?

Bootstrap merupakan sejenis css framework, jadi kalian tidak perlu repot-repot membuat css sendiri, sebab sudah disediakan oleh bootstrap.

Kalian dapat mendownloadnya di halaman resmi, tianggal search aja di google.

Artikel Terkait

Script Login dengan HTML

Berikut merupakan script form login, form yang saya buat relatif sederhana ya.


<html>
<head>
<title>Login user</title>
<link href=”style/css/style.css” rel=”stylesheet” type=”text/css”>
<link href=”style/css/bootstrap.min.css” rel=”stylesheet”>
<script type=”style/text/javascript” src=”js/jquery.js”></script>
<script type=”style/text/javascript” src=”js/bootstrap.js”></script>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″><style type=”text/css”>
body {
background-image: url(style/data/background-login.jpg);
background-repeat: no-repeat;
width: 100%;
height: 100%;
position: fixed;
z-index: 1;
float: left;
left: 0;
min-width:100%;
min-height:100%;

}
.style1 {color: #FFFFFF}
–>
</style></head>
<body>

<div id=wrapper align=”center”>
<p><h3 class=”style1″>Login User</h3></p></br></br>
<form name=”form” action=”login-cek.php” method=”post” class=”form-inline”>

<p>
<input type=”text” name=”username” required=”required” class=”form-control” size=”30″ placeholder=”Username”>
</p></br>
<p><input type=”password” name=”password” required=”required” class=”form-control” size=”30″ placeholder=”Password”/></p>

<h6><b style=”color: white”>Tidak memiliki account </b><a href=”daftar”>klik disini</a></h6>
<input type=”submit” value=”Login” class=”btn btn-success btn-sm” size=”500″/>
</form>
</div>
</body>
</html>


Coding di atas merupakan syntax html untuk membuat form login.

Login-cek.php merupakan fungsi dari halaman login di atas, mung nanti pada kesempatan yang lain saya akan membuat fotm login lengkap dengan fungsinya.

Kemudian dapat kalian lihat di halaman paling atas terdapat, code seperti di bawah ini.

<link href=”style/css/bootstrap.min.css” rel=”stylesheet”>

Artinya adalah untuk desain tampilan cssnya memanfaatkan dari bootstrap, kalian juga dapat memanfaatkan css framework seperti admin lte.

Nah itu sedikit informasi atau tutorial mengenai membuat form login dengan html, semoga bermanfaat.

Tutorial di atas ditulis berdasarkan pengalaman saya sendiri ya, jadi jika banyak kekeliruan wajar, sebab saya bukanlah seorang programer yang profesional.

Hal yang sering ditanyakan:

Apa itu html?

HTML merupakan kependekan dari Hyper Text Markup LanguageTambahkan pertanyaan

Post Terkait :

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

© Copyright 2020 - guratgarut.com