Cara Membuat Form Login Dengan HTML

Dipublikasikan oleh Ramadhanti ∙ 5 July 2021 ∙ 4 menit membaca

Pada kesempatan kali ini kita akan membahas bagaimana cara membuat form login dengan html. Tentu ini akan sangat membantu bagi kalan yang baru ingin mencoba membuat form login dengan HTML.

Nah, langsung saja kita mulai dan simak langkah-langkah apa saja untuk membuat form login tersebut.

Baca Juga: Simbol Flowchart

Apa Itu HTML?

Kalian pasti sudah mengenal dan paham tentang apa itu HTML, ya Pins! Namun, bagi kalian yang masih kurang paham, kita akan mengulas kembali sedikit tentang HTML.

HTML merupakan kependekan dari Hyper Text Markup Language, sejenis bahasa pemograman yang dikhususkan untuk web programming.

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

Biasanya HTML hanya memegang interface nya saja, untuk fungsinya sendiri bisa menggunakan berbagai macam bahasa pemograman, seperti Phyton, PHP, atau bahkan Java.

Cara Membuat Form Login dengan HTML

membuat form login dengan html
Sumber: Petani Kode

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 mengunduhnya di halaman resmi, cukup lakukan searching di Google dan kalian akan menemukannya.

Artikel Terkait

Script Login dengan HTML

Berikut merupakan script form login, form yang dibuat berikut relatif sederhana.


<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. 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 CSS nya 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.

Temukan beragam pilihan rumah terlengkap di daftar properti & iklankan properti kamu di Jual Beli Properti Pinhome. Bergabunglah bersama kami di aplikasi Rekan Pinhome untuk kamu agen properti independen atau agen kantor properti. 

Kamu juga bisa belajar lebih lanjut mengenai Properti di Property Academy by Pinhome. Download aplikasi Rekan Pinhome melalui App Store atau Google Play Store sekarang!

Hanya di Pinhome.id yang memberikan kemudahan dalam membeli properti. Pinhome – PINtar jual beli sewa properti.

Editor: Daisy

Tags :

Artikel Pilihan

Berita Pinhome
Berita Pinhome Vasa Jagakarsa Hunian Modern Tropis Strategis Berkonsep Townhouse

Menentukan rumah idaman memang bukanlah perkara mudah. Pasalnya banyak hal yang harus dipertimbangk

Finansial
Finansial Mengenal Analisis SWOT Untuk Mengembangkan Bisnis

Membangun sebuah bisnis yang sukses tidak bisa terjadi dalam semalam. Ada banyak unsur dan juga keg

Properti
Properti 3 Contoh Rumah Idaman dan Populer Saat Ini

Desain atau contoh rumah idaman bagi tiap-tiap orang tentunya tidak sama. Ada yang mendefinisikan r

Properti
Properti Ingin Memilih Lokasi Tempat Tinggal Strategis? Perhatikan Hal Ini!

Memilih lokasi tempat tinggal strategis bukanlah perkara mudah, banyak yang harus kita pertimbangka

Artikel Terkini

Teknik Sipil
Teknik Sipil 16 Motif Keramik Dinding Luar yang Awet

Keramik adalah salah satu material yang sering digunakan untuk lapisan dekorasi dinding. Pins dapat

Teknik Sipil
Teknik Sipil 10 Model Keramik Kamar Mandi Abu-Abu

Interior kamar mandi dapat menggunakan material keramik untuk bagian lantai maupun dinding. Pemilih

Teknik Sipil
Teknik Sipil 10 Desain Roster Keramik Mewah dan Manis

Roster atau lubang angin merupakan ventilasi yang dibutuhkan setiap rumah agar ruangan di dalamnya

Teknik Sipil
Teknik Sipil 12 Inspirasi Keramik Hitam Cocok untuk Ruangan Apapun

Material keramik banyak digunakan untuk melengkapi interior rumah, baik di ruang tamu, kamar, dapur

Lifestyle
Lifestyle Contoh Surat Perjanjian Jual Beli Mobil, Simak Cara Membuatnya!

Ingin membeli mobil? Atau malah sedang ingin menjual mobil yang kamu miliki? Eits, jangan sampai ke

Ikuti Media Sosial Kami

Pinhome Indonesia