Input dalam HTML
Membuat Halaman Login
oleh: Suryo Adhy Chandra, ST
Deskripsi singkat halaman login
Halaman login adalah antarmuka sederhana yang digunakan untuk mengautentikasi pengguna sebelum mereka dapat mengakses suatu sistem atau aplikasi. Biasanya, halaman ini berfungsi sebagai gerbang masuk, memastikan hanya pengguna yang memiliki kredensial valid (username/email dan password) yang bisa melanjutkan.
Komponen tag HTML apa saja yang biasa ada di halaman login?
Komponen tag-tag HTML yang umumnya ada atau dipakai di halaman login antara lain:
- Form (<form> </form>)
Tag ini biasanya akan ditempatkan sebagai tag awal untuk membungkus komponen-komponen html yang ada di dalam halaman login. -
Input Username atau email (<input type="text" name="username"> atau <input type="email" name="email">)
Digunakan untuk memasukkan identitas pengguna yang sering kita lihat ketika login ke google atau ke instagram. untuk input ini diberikan name karena nanti ketika melakukan submit data, informasi email atau username tersebut akan disimpan dalam variabel yang dituliskan dalam atribut name tersebut yang akan diproses oleh server backend. -
Input Password (<input type="password" name="password">)
Digunakan untuk memasukkan password. beda dengan type text dan email di atas ada yang ingat? nah untuk type password ini tampilan ketikkan akan ditampilkan sebagai titik. kemudian sama seperti username atau email di atas, harus ada atribut name untuk menyimpan informasi password. -
Input Box Rememberme (<input type="checkbox" name="remember">)
Digunakan untuk menyimpan data informasi login ke cache dari web browser kita, yang nanti akan kita pelajari lebih lanjut :-) -
Tombol Login (<button type="submit">submit</button> atau menggunakan <input type="submit" value="submit">)
Digunakan untuk memberikan trigger supaya form memproses data input di atas ke server. dalam hal ini kita bisa menggunakan tag input dengan memberikan value nama informasi yang akan disimpan dalam tombol input, cara ini lebih sederhana tetapi tidak bisa dicustom untuk penamaannya, hanya bisa berupa teks, tetapi solusi lain kita bisa menggunakan button di mana di dalamnya kita bisa ganti untuk penamaan tombol dengan menggunakan karakter khusus. -
Link Tambahan (<a href="http://example.com" target="_blank">)
Untuk link tambahan ini bisa diberikan atau tidak, sesuai kebutuhan. Biasa ini dipakai untuk mengarahkan pengguna ke halaman shortcut:- Lupa Password -> untuk mengarahkan ke halaman lupa password
- Register -> untuk mengarahkan ke halaman registrasi pendaftaran
Contoh Tag HTML sederhana untuk membuat halaman login
<html>
<head>
<title>Login Page</title>
</head>
<body>
<form action="/login" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<input type="checkbox" id="remember" name="remember">
<label for="remember">Remember Me</label>
<button type="submit">Login</button>
<p><a href="/forgot-password">Forgot Password?</a></p>
<p><a href="/register" target="_blank">Create Account</a></p>
</form>
</body>
</html>
Tampilan akan menjadi:
Kira-kira ada yang kurang?
Yak betul, tampilan masih acak-acakan yah. nah kita bisa ubah dikit tampilannya lebih rapi dengan menambahkan div untuk setiap komponen input menjadi:
<html>
<head>
<title>Login Page</title>
</head>
<body>
<form action="/login" method="post">
<div>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<div>
<input type="checkbox" id="remember" name="remember">
<label for="remember">Remember Me</label>
</div>
<div>
<button type="submit">Login</button>
</div>
<p><a href="/forgot-password">Forgot Password?</a></p>
<p><a href="/register" target="_blank">Create Account</a></p>
</form>
</body>
</html>
Nah tampilan lebih rapi bukan?