Membuat Form Login Sederhana Dengan HTML dan CSS

Form login merupakan 'pintu gerbang' untuk mengakses suatu halaman web. Bila punya 'kuncinya' maka kita dapat masuk ke halaman tersebut.


Form login banyak dijumpai pada web sosial media. Karena web sosial media memiliki user dan tiap user memiliki 'halaman' masing-masing.

Membuat form login tidaklah susah, asal kita mau mencoba. Kita akan membuat form login sederhana dan nantinya akan diberi style agar lebih menarik.

Buat 2 buah file, file form.html dan style.css. form.html merupakan file yang berisi tag form, sedangkan style.css berisi script CSS untuk memberi style form.html.

Script form.html

<!DOCTYPE html>
<head>
   <title>Login</title>
   <link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
   <form>
      <input type="text" name="id" placeholder="ID" />
      <input type="password" name="password" placeholder="Password" />
      <input type="submit" name="submit" value="Login" />
   </form>
</body>
</html>

Bila tanpa style, form login terlihat seperti ini.

form login html css

Agar tampilannya lebih menarik, beri style form.html dengan menyisipkan file style.css. Letakkan file form.html dan file style.css dalam satu folder agar lebih mudah 'memanggilnya'.

Baca juga ya..

Script style.css

*{
 margin: 0;
 padding: 0;
}

body {
 text-align: center;
 padding-top: 250px;
 background: #00aaff;
}

input[type=text], input[type=password]{
 padding: 10px;
 border: 1px solid #999;
 outline: none;
 color: #888;
 margin-right: 5px;
 box-shadow: inset 0px 0px 5px #999;
 text-align: center;
}

input[type=text]:focus, input[type=password]:focus{
 border: 1px solid #00aaff;
 box-shadow: inset 0px 0px 5px #00aaff;
}

input[type=submit]{
 padding: 5px 10px;
 margin-top: 10px;
 font-weight: 700;
 background: #2b0000;
 border: 1px solid #2b0000;
 color: #fff;
 box-shadow: 0px 0px 2px #2b0000;
}

input[type=submit]:hover {
 background: #0088ff;
 border: 1px solid #0088ff;
 box-shadow: 0px 0px 2px #0088ff;
}

Hasil akhir akan terlihat seperti ini.

form login html css



Tag : Web Desain
2 Komentar untuk "Membuat Form Login Sederhana Dengan HTML dan CSS"