Tutorial Membuat Form Login dengan HTML5 dan CSS3 (Source Code)

Tutorial Membuat Form Login dengan HTML5 dan CSS3-Membuat Form Login adalah hal yang sudah sangat dasar bagi seorang yang sedang mempelajari atau menggeluti dunia perwebsitean, mungkin bagi sebagian orang melihat judul Artikel seperti Tutorial Membuat Form Login adalah hal yang sudah biasa dan tidak WOW lagi. Namun apakah kamu tahu bahwa HTML5 membawa banyak perbaikan dan fitur pada web forms? Seperti atribut baru dan Input types yang diperkenalkan bertujuan untuk memberikan kemudahan dan pengalaman yang lebih baik bagi website developer.
Jadi, pada artikel ini saya mencoba membuat login page menggunakan HTML5 Forms, salah satu tujuannya adalah melihat bagaimana fitur baru ini dapat bekerja.
Seperti biasa Source Codenya dapat di download pada akhir tulisan.

So what we need?

Pertama buat script HTML5 input, scriptnya saya beri nama index.html
script index.html
<section class="loginform cf">
<form name="login" action="index_submit" method="get" accept-charset="utf-8">
<ul>
<li>
<label for="usermail">Email</label>
<input type="email" name="usermail" placeholder="yourname@email.com" required>
</li>
<li>
<label for="password">Password</label>
<input type="password" name="password" placeholder="password" required>
</li>
<li>
<input type="submit" value="Login"></li>
</ul>
</form>
</section>

Placeholder, Required dan Email Input Type adalah atribut baru dari HTML5

Placeholder

Placeholder Memungkinkan kamu melihat teks dalam sebuah field yang sebenarnya field tersebut masih kosong, dengan kata lain teks placeholder akan tercipta jika field form kosong atau tidak memiliki value dan teks placeholder akan menghilang jika kamu telah mengisi value pada teks field tersebut.

Required 

Required menjadikan sebuah field wajib di isi dan tidak boleh kosong, dengan demikian kamu tidak boleh membiarkan sebuah field dengan atribut Required kosong, jika tidak data yang kamu coba kirimkan tidak akan pernah masuk.

Email Input Type

Field dengan atribut Email maka kamu diharuskan memasukan alamat email dengan valid.

Kedua, saya coba mempercantik tampilannya menggunakan CSS
script style.css

html {
background-color: #2ecc71;
font-size: 10pt;
}
label {
display: block;
color: #999;
}
.cf:before,
.cf:after {
    content: ""; 
    display: table;
}

.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}
:focus {
outline: 0;
}
.loginform {
width: 410px;
margin: 50px auto;
padding: 25px;
background-color: rgba(250,250,250,0.5);
border-radius: 5px;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2), 
    inset 0px 1px 0px 0px rgba(250, 250, 250, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.3);
}
.loginform ul {
padding: 0;
margin: 0;
}
.loginform li {
display: inline;
float: left;
}
.loginform input:not([type=submit]) {
padding: 5px;
margin-right: 10px;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 3px;
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 
0px 1px 0px 0px rgba(250, 250, 250, 0.5) ;
}
.loginform input[type=submit] {
border: 1px solid rgba(0, 0, 0, 0.3);
background: #64c8ef; /* Old browsers */
background: -moz-linear-gradient(top,  #64c8ef 0%, #00a2e2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#64c8ef), color-stop(100%,#00a2e2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #64c8ef 0%,#00a2e2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #64c8ef 0%,#00a2e2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #64c8ef 0%,#00a2e2 100%); /* IE10+ */
background: linear-gradient(to bottom,  #64c8ef 0%,#00a2e2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64c8ef', endColorstr='#00a2e2',GradientType=0 ); /* IE6-9 */
color: #fff;
padding: 5px 15px;
margin-right: 0;
margin-top: 15px;
border-radius: 3px;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
}

Script input[type=submit] digunakan untuk memberikan Submit Button yang mana akan menjadi semacam trigger untuk atribut placeholder, email type dan required

Setelah Scriptnya dijalakkan

semoga artikel/tutorial ini dapat bermanfaat

Download

Share on Google Plus

About kodekidi

KodeKidi.com Situs Tutorial Pemograman Berbahasa Indonesia