CARA MEMBUAT FORM LOGIN SEDERHANA MENGGUNAKAN HTML DAN CSS ~ DIMAS FEBRIANSYAH ~ BLC TELKOM KLATEN

Asalamualaikum Wr. Wb.

PENDAHULUAN

Selamat datang di blog saya, pada hari ini saya habis membuat form login sederhana menggunakan html dan css. Ok untuk lebih lanjut silahkan lihat dibawah ini.
LATAR BELAKANG

Inggin membuat form login sederhana menggunakan html dan css.
MAKSUD DAN TUJUAN

Untuk proses masuk ke jaringan komputer dengan memasukkan identitas anda.
ALAT DAN BAHAN

1. Laptop
2. Software sublime text
3. Internet
WAKTU YANG DI BUTUHKAN

30 menit.
PEMBAHASAN

1. PENGERTIAN FORM LOGIN

     Login adalah proses masuk ke jaringan komputer dengan memasukkan identitas akun minimal terdiri dari username/akun pengguna dan password untuk mendapatkan hak akses. Antara username dan password keduanya saat digunakan untuk login harus tepat jangan sampai salah ketik, karena keduanya saling terkait dan tidak bisa dipisahkan. Biasanya username/akun pengguna tidak pernah diubah karena merupakan identitas unik, tetapi password/ kata sandi dapat diubah sesuai keperluan untuk menjaga keamanan akun.

2. LANGKAH KERJA

     1.Buat file index.html pada sublime text, kemudian masukkan script dibawah ini :

<!DOCTYPE html>
<html>
<head>
    <title>CARA MEMBUAT FORM LOGIN SEDERHANA MENGGUNAKAN HTML DAN CSS</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Membuat Form Login Sederhana Dengan HTML DAN CSS <br/> </h1>
    <div class="kotak_login">
        <p class="tulisan_login">Login</p>
        <form>
            <label>Username</label>
            <input type="text" name="username" class="form_login" placeholder="Username atau email ..">
            <label>Password</label>
            <input type="text" name="password" class="form_login" placeholder="Password ..">
            <input type="submit" class="tombol_login" value="LOGIN">
        </form>
    </div>
</body>
</html>

2. Selanjutnya buat file style.css pada sublime text, kemudian masukkan script dibawah ini :

body{
    font-family: sans-serif;
    background: #BABDB6;
}
h1{
    text-align: center;
    /*ketebalan font*/
    text-shadow: 3px 2px #EF2929;
}
.tulisan_login{
    text-align: center;
    /*membuat semua huruf menjadi kapital*/
    font-size: 20px;
    text-transform: uppercase;
}
.kotak_login{
    width: 350px;
    background: white;
    /*meletakkan form ke tengah*/
    margin: 80px auto;
    padding: 30px 20px;
}
label{
    font-size: 11pt;
}
.form_login{
    /*membuat lebar form penuh*/
    box-sizing : border-box;
    width: 100%;
    padding: 10px;
    font-size: 11pt;
    margin-bottom: 20px;
}
.tombol_login{
    background: #46de4b;
    color: white;
    font-size: 11pt;
    width: 100%;
    border: none;
    border-radius: 3px;
    padding: 10px 20px;
}
.link{
    color: #232323;
    text-decoration: none;
    font-size: 10pt;
}

3. Maka hasilnya akan seperti dibawah ini :
KESIMPULAN

Jadi dengan adanya form login itu digunakan untuk login dan mendapatkan hak akses.
REFRENSI