Pada postingan kemarin, saya sudah memberikan contoh tentang bagaimana cara membuat form login pada photoshop secara sederhana. Nah sekarang kita akan mencoba mengaplikasikan form login tersebut dengan menggunakan HTML dan CSS.
Hmm bagaimana sih caranya membuat form login dengan HTML dan CSS? Yuk kita simak tutorialnya..

Step 1

Langkah pertama tentunya dengan membuat file html nya terlebih dahulu. Silahkan gunakan text editor favorit anda untuk mengedit file HTML. Kemudian buat struktur kode untuk form login tersebut. Berikut contohnya
<div class="form-header">

<h1>
Sign In</h1>
</div>
<div class="form-container">

<form>

<input name="username" type="text" />  <br />
<input name="password" type="password" />  <br />
<input id="sign-in" name="login" type="button" value="Sign In" />  <br />
<a href="#">Forgot Password?</a>  </form>
</div>
<div class="form-footer">

or <a href="#">Sign Up</a><br />

</div>

Step 2

Kemudian kita mulai masuk ke css nya. Pertama, kita akan membuat tampilan untuk typography nya. Karena saya menggunakan font Monserrat pada desain kemarin, maka tentu saja pada bagian typogrphy kali ini juga menggunakan font tersebut.
h1 {
 font-family: 'Montserrat' sans-serif;
}

a, p {
 font-family: 'Montserrat' sans-serif;
 font-size: 11px;
 font-weight: 300;
 text-decoration: none;
 color: #bbb;
}

Step 3

Setelah itu, kita akan memberikan style pada bagian headernya terlebih dahulu, kurang lebih akan seperti berikut
.form-header {
 background-color: #4E6FA7;
 color: white;
 border: 1px solid #2C5092;
 border-radius: 5px 5px 0 0;
 padding: 5px 10px 10px 12px;
 width: 256px;
}

.form-header h1 {
 font-weight: 300;
 font-size: 18px;
 margin: 0;
}

Step 4

Kemudian kita akan memberikan style untuk bagian containernya. Bagian ini merupakan bagian utama dimana form username dan password akan muncul disini. Kurang lebih akan seperti ini listing nya
.form-container {
 border-left: 1px solid #ddd;
 border-right: 1px solid #ddd;
 background-color: #f9f9f9;
 padding: 25px 10px 14px 10px;
 width: 258px;
}

Step 5

Setelah selesai pada pembuatan container, tentunya langkah terakhir adalah membuat bagian footernya. Berikut merupakan listing dari bagian footernya.
.form-footer {
 background-color: #eee;
 padding: 12px 10px 12px 10px;
 border-width: 0px 1px 1px 1px;
 border-color: #ddd;
 border-style: solid;
 border-radius: 0px 0px 5px 5px;
 width: 258px;
}

.form-footer p {
 text-align: center;
 font-size: 12px;
 margin: 0;
}

.form-footer a {
 font-size: 12px;
 color: #F86759;
}

Step 6

Nah, dari hasil yang kita lihat, tentunya masih ada bagian yang belum tersentuh kan? Yap, kita juga perlu mengubah tampilan input supaya menjadi lebih menarik. Seperti inilah listingnya
form {
 margin: 0;
}

input {
 display: block;
 padding-left: 10px;
 background-color: #F5F5F5;
 min-width: 252px;
 width: 100%;
 height: 35px;
 border: 1px solid #ddd;
 border-radius: 3px;
 font-family: 'Montserrat' sans-serif;
 font-weight: 300;
 margin-bottom: 14px;
}

input#sign-in {
 background-color: #F86759;
 color: white;
 border: none;
}
Hasil Final Cara Membuat Form Login dengan HTML dan CSS

Nah, setelah semua kode css tadi kita masukan, tentunya hasilnya akan menjadi seperti tampilan finalnya. Gimana? mudah bukan cara membuat form login pada HTML dan CSS. Tapi ada beberapa bagian yang perlu dicatat dari langkah diatas, dimana desain diatas masih belum menghasilkan tampilan yang responsive. Pada kesempatan selanjutnya, kita akan mencoba membuat tampilan yang lebih responsive. So, sampai ketemu di postingan selanjutnya yah :D