Assalamu’alikum
Wr. Wb
A. PENDAHULUAN
Selamat datang di blog saya, kali ini saya akan membagikan sedikit informasi atau shering sedikit tentang bagaimana cara pembuatan form login menggunakan HTML dan CSS. Untuk lebih jelasnya mari kita simak artikel berikut ini bagaimana proses pembuatannya.
B. LATAR BELAKANG
Form dapat digunakan untuk menerima inputan yang berasal dari user dan mengolah hasil inputan tersebut ke server. Penggunakan form yang hanya memakai HTML saja tidak akan benar-benar berguna. From umumnya hanya berbentuk interface yang disajikan untuk mengumpulkan data/information yang berasal dari user, dan akan diproses denganbahasa pemograman layaknya seperti JavaScript atau PHP, dan disimpan didalam database MySQL.Perintah atau tag yang digunakan adalah <FORM> dan diakhiri dengan tag </FORM>. Field-field yang berada diantaranya digunakan untuk memilih ukuran jenis/tipe dari masing-masing input field.
C. MAKSUD DAN TUJUAN
- Dapat digunakan di dalam sebuah situs atau website
- Digunakan untuk sebagai keamanan sebuah web
- Sebagai klarifikasi sebagai orang yang mengakses
D. ALAT DAN BAHAN
- Laptop
- Akses internet
- Sublime text 3 (text editor)
E. WAKTU YANG DIBUTUHKAN
Sekitar 10 menit
F. PEMBAHASAN
Sebenarnya tugas ini saya kerjakan di waktu luang yang kosong karena jenuh tidak ada kerjaan yang lain, makanya saya mencoba untuk menguji pengetauhan atau kemampuan saya dalam memahami dan memperktekkan sebuah bahasa pemrograman HTML dan CSS yang diterapkan di sebuah web atau situs.
Form dapat digunakan untuk menerima inputan yang berasal dari user dan mengolah hasil inputan tersebut ke server. Penggunakan form yang hanya memakai HTML saja tidak akan benar-benar berguna. From umumnya hanya berbentuk interface yang disajikan untuk mengumpulkan data/information yang berasal dari user, dan akan diproses denganbahasa pemograman layaknya seperti JavaScript atau PHP, dan disimpan didalam database MySQL.Perintah atau tag yang digunakan adalah <FORM> dan diakhiri dengan tag </FORM>. Field-field yang berada diantaranya digunakan untuk memilih ukuran jenis/tipe dari masing-masing input field.
Berikut adalah langkah-lagkah dalam pembuatan form login :
1. pertam kita buka software coding (sublime text) siapkan lembar kerja atau
dokumen dengan nama atau format index.html
2. selanjutnya kita buat dokumen baru dengan nama style.css yang sebelumnya
kita menuliskan link di dokumen html.
<link rel="stylesheet" href="style.css">
Dan berikut adalah coding html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form Login</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="loginBox">
<img src="user.png" class="user">
<h2>Log In Here</h2>
<form>
<p>Email</p>
<input type="text" name="" placeholder="Enter Email">
<p>Password</p>
<input type="Password" name="" placeholder="Enter Password">
<input type="Submit" name="" value="Login">
<a href="#">Forget Password?</a>
</form>
</div>
</body>
</html>
Selanjutnya adalah menggabungkan style CSS :
body
{
margin: 0;
padding: 0;
background-image: url("layout.jpg");
background-size: cover;
font-family: sans-serif;
}
.loginBox
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 350px;
border-radius: 15px;
height: 420px;
padding: 80px 40px;
box-sizing: border-box;
background: rgba(0,0,0,.5);
}
.user
{
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
position: absolute;
top: calc(-100px/2);
left: calc(50% - 50px);
}
h2
{
margin: 0;
padding: 0 0 20px;
color: #efed40;
text-align: center;
}
.loginBox p
{
margin: 0;
padding: 0;
font-weight: bold;
color: #fff;
}
.loginBox input
{
width: 100%;
margin-bottom: 20px;
}
.loginBox input[type="text"],
.loginBox input[type="Password"]
{
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 15px;
}
::placeholder
{
color: rgba(255,255,255,.5);
}
.loginBox input[type="Submit"]
{
border: none;
outline: none;
height: 40px;
color: #fff;
font-size: 15px;
background: #3498db;
cursor: pointer;
border-radius: 20px;
}
.loginBox input[type="Submit"]:hover
{
background: #efed40;
color: #262626;
}
.loginBox a
{
color: #fff;
font-size: 15px;
font-weight: bold;
text-decoration: #0066ff;
}
G. REFERENSI
- https://www.w3schools.com/
H. KESIMPULAN
Dalam proses pembuatan form login bisa digunakan sebagai security di dalam sebuah halaman web atau situs yang bersifat privasi atau resmi. Yang biasanya diperitah untuk mengisi data diri.
I. PENUTUP
Sekian yang hanya dapat saya sampaikan, semoga artikel ini dapat bermanfaat bagi anda dan apabila ada kesamaan atau kesalahan kata atau tutur bahasa yang kurang berkenan saya mohon maaf yang sebesar-besarnya.
Wassalamu’alaikum
Wr. Wb.
0 komentar:
Post a Comment