Cara Membuat Form Login dengan HTML Secara Sederhana dan Mudah

Bagaimana cara membuat form login dengan html ?, untuk membuatnya, pastikan sudah menyiapkan peralatan yang dibutuhkan. perlatan yang dibutuhkan antara lain notepad (saya menggunakan notepad++ agar lebih mudah), aplikasi browser (chrome, mozila, dll). kedua hal itu saja sudah cukup untuk membuat form login dengan html.

 

CARA MEMBUAT FORM LOGIN DENGAN HTML

Kode inti tag HTML yang diperlukan dalam pembuatan form login yaitu:
<input> dan <button>
dalam tag input, akan menggunakan “type” dan dua isian yaitu “text” dan “password”.
lebih jelasnya, silahkan buka notepadnya lalu tuliskan kode berikut :
<html>
<head>Ini Judul</head>
<body>

Selamat Datang di Situs Kami: <br/>

<form action="lokasi proses nya" method="POST" >
Nama : <input type="text" name="nama" placeholder="masukan nama"><br/><br/>
Password : <input type="password" name="password" placeholder="masukan password"><br/><br/>
<button type="submit" name="login">Login</button>
</form>

</body>
</html>

 

Simpan file tersebut dengan nama login.html (terserah mau kasih nama apa, yang terpenting akhiri dengan ekstensi .html) hasilnya akan tampak seperti pada tampilan dibawah ini :

 


Selamat datang di situs kami

Nama :

Password :


 

Penjelasan Kode dasar  :
<html> : kode tersebut merupakan tag pembuka yang menyatakan bahwa file tersebut merupakan html.
</html> : kode ini merupakan kode penutup yang ditandai dengan penambahan slash atau tanda “/“.
<head> : merupakan tag yang berfungsi untuk memberikan nama pada suatu halaman. nama ini akan muncul di bagian atas bersama favicon atau icon
</head>: kode tersebut juga merupakan kode penutup pada head yang ditandai dengan tanda slash “/”
<body> : merupakan kode yang berfungsi sebagai isi .. yaitu apapun yang ingin ditampilkan harus disimpan pada kode body
</body> : merupakan tag penutup yang ditandai dengan adanya tambahan slash “/” sebelum kata bosy.

Penjelasan kode fungsi :
<input> : kode atau tag input, seperti namanya yang berarti (input = masuk) berfungsi untuk mendapatkan data yang bisa dimasukan seseorang.
kode ini memiliki property yaitu “type” yang berfungsi menentukan tipe isian, apakah text atau password seperti :

See also  Cara Membuat Form Upload Gambar Dengan HTML

<input type=”text”> akan menampilkan input yang dapat dimasukan seperti text
<input type=”password”> akan menampilkan input dengan text yang tersembunyi.

<button> : kode tersebut berfungsi untuk mengeksekusi masukan yang telah ditulis. jadi ketika tag ini di klik maka data akan di rekam dan siap untuk diproses
</button> :tag ini berfungsi sebagai penutup yang ditandai dengan adanya tanda slash “/”.

Kode tersebut belum dapat berjalan, perlu diintegrasikan dengan php atau asp (tergantung program yang kamu suka).

okeyh, sampai disini dulu sekian artikel dari kami, semoga dapat bermanfaat.

Leave a Comment