Cara membuat Login Form dengan HTML

Baca Juga

Pada Artikel sebelumnya saya sudah membahas cara membuat table dengan HTML. Kali ini saya akan memberikan tips Cara membuat Login Form dengan HTML.

Teknik yang saya gunakan kali ini hanya untuk pemula. Disini saya masih menggunakan teknik cara membuat table. Tapi dengan dimodifikasi sedikit kita bisa merubahnya menjadi sesuatu yang baru. 

Coba perhatikan source code dibawah ini :

 
<table width="405" height="169" border="0" cellpadding="0" cellspacing="0">

    <tr bgcolor="#428ef6">
      <td height="37" colspan="2"><div align="center"><strong>PLEASE LOGIN</strong></div></td>
    </tr>
    <tr>
      <td width="95" height="32">Username</td>
      <td width="304"><label>:
          <input name="username" type="text" id="username" />
      </label></td>
    </tr>
    <tr>
      <td height="26">Password</td>
      <td><label>:
          <input name="password" type="password" id="password" />
      </label></td>
    </tr>
    <tr>
      <td height="48"> </td>
      <td><input name="Login" type="submit" id="Login" value="Login" />
          <input name="Batal" type="submit" id="Batal" value="Batal" /></td>
    </tr>
    <tr bgcolor="#428ef6">
      <td height="26" colspan="2"><div align="right"><strong>roypurbo.blogspot.com</strong></div></td>
    </tr>
  </table>

Penjelasannya ::

• Di dalam <table>...</table> kita bisa mengasih attribut tinggi dan lebar juga. kita tinggal mengasih nilai pada attribut tersebut (height & width).
• <div align="center>... </div> gunanya untuk membuat text rata tengah.
• <strong>...</strong> untuk membuat text menjadi cetak tebal.
• Tag <input> untuk menentukan sebuah field input, dimana pengguna bisa memasukan data. Sebuah input dapat bervariasi dalam banyak cara, tergantung type attribut.
• attribut text pada input untuk membuat text field.
• attribut password untuk membuat text field rahasia.
• attribut submit untuk button.

Hasil Tampilannya ::

PLEASE LOGIN
Username	:
Password	:
roypurbo.blogspot.com

 Mudah sajakan ??? Silahkan anda modifikasi sendiri source code diatas.
Semoga artikel ini bermanfaat buat anda.