Membuat Login Form

Minggu, 12 April 2015

Membuat Login Form

in published on 11.12 leave a reply
Jumpa lagi sobat, sudah lama kita ga update . Kesempata kali ini kita akan mencoba membuat desain sederhana Login Form menggunakan Html, oke sobat bisa menggunakan teks editor notepade++, sublime, ataupun dreamweaver. Karena kita akan membuat desain sederhana, maka kita tidak akan membuat desain yang ramai. Langsung saja sobat buat File baru dengan extensi (.html).

Dialamnya sobat tuliskan kode html berikut dibawah Tag <body>:

<header><center><h2>Welcome</h2></center></header>

 <div id="wrapper">

  <center>

     <div id="form">

       <h2>LOGIN USER</h2>



  
     </div>

  </center>
 </div>

<footer><marquee> Copyrigh in here</marquee></footer>
Oke ini penjelasannya: tag <header> saya gunakan untuk membuat header dari form login, yang didalamnya terdapat tag <center> untuk membuat tulisan "Welcome" berada di tengah. 

Kemudian tag <div id="wrapper"> digunakan untuk membuat kulit luat atau layout dari form login dan dengan Id adalah wrapper.

Saya gunakan tag <center> selanjutnya agar isi konten yang nanti kita letakan di dalam tag tersebut berada ditengah.

Lalu <div id="form"> tag form dengan Id adalah form ini, kita buat untuk membungkus tag <form> nantinya, jadi nanti kita akan meletakkan tag <form> didalam tag ini.

Tag Heading level 2 atau <h2> yang didalamnya terdapat teks LOGIN USER, tag ini untuk membuat teks dengan heading lvl 2, outputnya teks akan terlihat besar.

Terakhirtag <footer> dan <marquee> , kita gunakan tag footer untuk membuat sebuah fother dari form login, dan didalam tag footer kita menyisipkan tag marquee, gunanya, agar nanti teks yang kita letakan didalam tag ini akan berjalan.

Untuk tag </ > (penutup tag) silahkan sobat sesuaikan, saya telah membuat sejajar dengan tag pembukannya.


Sampai disini, silahkan sobat simpan / save (Ctrl + S). Selanjutnya kita akan membuat Form dengan input type text, checkbox dan type submit, untuk membuat form sobat lihat kode dibawah ini:

<form action="" method="post">
    <label>Username</label>:
 <input class="tx" type="text" ><br>

    <label>Password</label>:
 <input class="tx" type="password" ><br><br>

 <input type="submit" value="LOGIN" class="bt"><br><br>

        <input type="checkbox" value="ingat">Remember Me  |
 <a href="">Lupa Password..?</a>
</form>
Sobat letakan kode diatas dibawah tag <h2>LOGIN USER</h2>
Pada kode diatas, kita membuat sebuah form dengan dengan beberapa input didalamnya, 
Input pertama kita gunakan untuk Field Username dengan type "text" dan class "tx".
Input kedua kita gunakan sebagai Field Password dengan type "password" dan class "bt".
Input ketiga kita gunakan untuk membuat sebuah tombol dengan type "submit" dan class "bt"
Input keempat kita gunakan type "checkbox" dengan value "ingat" dan teksnya adalah Remember Me.
Terakhir kita membuat Link dengan tag <a href=""> dan teks didalamnya adalah "Lupa Password..?"

Sampai disini silahkan sobat save kembali. dari 2 kode diatas, jika kita gabungkan menjadi satu maka hasilnya akan seperti ini:

<html>
<title>Login Form</title>
<head>

</head>
<body>
<header><center><h2>Welcome</h2></center></header>

 <div id="wrapper">
  
  <center>

  <div id="form">

  <h2>LOGIN USER</h2>

   <form action="" method="post">
       <label>Username</label>:
    <input class="tx" type="text" ><br>
       <label>Password</label>:
    <input class="tx" type="text" ><br><br>

    <input type="submit" value="LOGIN" class="bt"><br><br>

    <input type="checkbox" value="ingat">Remember Me  |

    <a href="">Lupa Password..?</a>
   </form>
  </div>

  </center>
  
 </div>

 <footer><marquee> Copyrigh in here</marquee></footer>
</body>
</html>

Sekarang kita akan membuat style atau css nya, ga perlu repot-repot, silahkan sobat tuliskan css berikut diatas tag </head> dan silahkan sobat pelajari.

<style type="text/css">
 #wrapper{
    width: 300px;
    margin: 0 auto;
    height:  auto;
    background: #CCC;
    padding: 5px;
 }
   
header{
           padding: 5px;
    height: 50px;
    background: #000;
    color: #FFF;
    width: 300px;
    margin: 100 auto;
    margin-bottom: 0px;
 }
 
footer{
    padding: 5px;
    height: 30px;
    background: #000;
    color: #FFF;
    width: 300px;
    margin: 0 auto;
    margin-bottom: 0px;
 }

#form{
    padding: 8px;
    width: 290px;
    height: auto;
    margin: 0 auto;
 }

.tx{
    padding: 9px;
    width: 80%;
    border-radius: 9px;
    border: 0px;
 }

.bt{
    padding: 5px;
    height: 30px;
    width: 80%;
    cursor: pointer;   
 }
</style>

Oke sobat selesai, silahkan save kemudian coba runing hasil pekerjaan sobat tadi menggunakan browser. 



Semoga Bermanfaat
Previous Post
Next Post
IT Tech

post written by:

0 Post a Comment:

Gunakan kolom komentar dengan baik dan bijak.