Membuat Form Login Dengan HTML5 dan CSS3

Haloo sobat.

Malam ini saya akan memberikan tutorial simple untuk membuat sebuah form login sob. Mohon jangan melakukan copy paste ya soalnya disini kita akan belajar bukan hanya sekedar jadi.
Oke jadi pertama sobat buat 2 file yang namanya index.html dan login.css. Index.html untuk menampung script html dan login.css untuk menampung css nya. Kalau sudah open file index.html lalu "KETIK ULANG" tag html di bawah ini :

<html>

<head>

<title>Form Login</title>

</head>

<body>

<div class="titleform">Member Login</div>

<table>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

<a href="#">forgot password ?</a>

</td>

</tr>

</table>

</form>

</div>

</body>

</html>

Selanjutkan open file login.css edit file tersebut lalu "KETIK ULANG" css di bawah ini :

body{
background:#3fbeb0;
}
#formlogin{
width:300px;
padding:4%;
height:280px;
background:#e8e8e7;
margin:0 auto;
top:15%;
position:relative;
border-top:4px solid #d33030;
}
.titleform{
font-family:segoe ui;
text-align:center;
width:100%;
font-size:25px;
height:50px;
color:#777;
}
table{
width:100%;
}
form a{
float:right;
font-size:12px;
text-decoration:none;
color:red;
}
input[type="email"], input[type="password"]{
width:100%;
padding:10px;
font-size:15px;
margin-top:5%;
font-family:segoe ui;
}
input[type="submit"]{
float:right;
background:#2b80c3;
color:white;
padding:10px;
border:0px;
padding-left:40px;
padding-right:40px;
margin-top:5%;
}

Ngerti? :D
Mungkin beberapa diantara sobat semua sudah mengetahui arti dari semua scriptnya. Namun bagi sobat-sobat yang belum paham jangan khawatir saya akan mencoba menjelaskan beberapa tag html dan css diatas. Dimulai dari index.html :
Ini adalah tag dasar : <html><head><body> lebih jelas mungkin bisa baca artikel ini Apa Itu HTML?Bagaimana Cara Memakainya?.
di file html terdapat tag DIV dengan id="formlogin" dan class="titleform" berikut penjelasannya :

bisa sobat lihat, ID formlogin itu sebuah kotak dasar dari form, nah CLASS titleform itu komponen yang ada didalam ID formlogin tersebut.
ID formlogin dan CLASS titleform stylenya di atur oleh CSS ini :

#formlogin{
width:300px;
padding:4%;
height:280px;
background:#e8e8e7;
margin:0 auto;
top:15%;
position:relative;
border-top:4px solid #d33030;
}
.titleform{
font-family:segoe ui;
text-align:center;
width:100%;
font-size:25px;
height:50px;
color:#777;
}

Lalu apa artinya dari ini ?

input[type="email"]
input[type="password"]
input[type="submit"]

itu merupakan selector attribut. Karena tag input memiliki beberapa type attribut diantaranya email, password dan submit maka untuk mengatur stylenya dapat pakai script tersebut.

Mungkin sampai disini penjelasannya. Semoga dapat membantu :D

-- thx --

Membuat Form Login Dengan HTML5 dan CSS3

4/ 5

Oleh kazzet

April 08, 2018 1 Komentar

Sunday, 8 April 2018