Form Registrasi
Nama: Azka Rizqullah Ramadhani
NRP: 5025231148
Kelas: Pemrograman Web E
Deskripsi Tugas
Kita disuruh mengimplementasikan form register untuk proyek pemrograman web. Dalam tugas ini, kita harus membuat form yang berfungsi untuk menerima data input dari pengguna seperti Firstname, Middlename, Lastname, Gender, Phone, Address, Email, Password, dan Re-type Password.
index.html
- Form registrasi dibuat menggunakan elemen HTML dasar seperti <form>, <input>, <select>, dan <button>. Setiap elemen input memiliki tipe dan properti yang sesuai untuk mengumpulkan data pengguna. Berikut beberapa bagian penting dari form:
- Field Nama: Input dibagi menjadi tiga bagian: Firstname, Middlename, dan Lastname. Setiap input menggunakan atribut required untuk memastikan bahwa pengguna tidak dapat melewatkan pengisian data.
- Select Box untuk Course: Digunakan untuk memilih jurusan (PBO, PWEB, KPPL) yang diambil oleh pengguna.
- Radio Button untuk Gender: Pengguna dapat memilih gender dengan opsi Laki-laki dan Perempuan.
- Field Informasi Tambahan:
- Phone: Menggunakan tipe text untuk nomor telepon.
- Address: Menggunakan tipe text untuk alamat.
- Email: Tipe input email digunakan untuk memvalidasi format email secara otomatis.
- Password: Tipe input password untuk memasukkan kata sandi, serta retype password untuk konfirmasi.
- Tombol Submit: Menggunakan elemen <button> untuk mengirimkan data yang diinputkan pengguna.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
<title>Registration</title>
</head>
<body>
<div class="wrapper">
<h1 class="judul">Registrasi</h1>
<form method="post">
<table class="name">
<tr class="firstname">
<td>Firstname</td>
<td><input type="text" name="firstname" required /></td>
</tr>
<tr class="middlename">
<td>Middlename</td>
<td><input type="text" name="middlename" required /></td>
</tr>
<tr class="lastname">
<td>Lastname</td>
<td><input type="text" name="lastname" required /></td>
</tr>
<tr class="course">
<td class="drop-down-title">Course</td>
<td>
<select name="Course">
<option value="PBO">PBO</option>
<option value="PWEB">PWEB</option>
<option value="KPPL">KPPL</option>
</select>
</td>
</tr>
<tr class="gender-form">
<td>Gender</td>
<td>
<label
><input type="radio" name="gender" value="Laki-laki" />
Laki-laki</label
>
<label
><input type="radio" name="gender" value="Perempuan" />
Perempuan</label
>
</td>
</tr>
<tr class="phone">
<td class="phone-title">Phone</td>
<td><input type="text" name="phone" required /></td>
</tr>
<tr class="address">
<td class="address-title">Address</td>
<td><input type="text" name="address" required /></td>
</tr>
<tr class="email">
<td class="email-title">Email</td>
<td><input type="email" name="email" required /></td>
</tr>
<tr class="password">
<td class="password-title">Password</td>
<td><input type="password" name="password" required /></td>
</tr>
<tr class="re-type-password">
<td class="re-type-password-title">Re-type Password</td>
<td><input type="password" name="retype_password" required /></td>
</tr>
</table>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
style.css
File CSS eksternal digunakan untuk memperbaiki tata letak dan tampilan form, dengan pengaturan seperti:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background-color: rgb(81, 252, 195);
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
background-color: rgb(181, 255, 255);
width: 70vh;
padding: 20px;
border-radius: 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.judul {
text-align: center;
margin-bottom: 20px;
font-size: 1.5rem;
color: #333;
}
table {
width: 100%;
}
table td {
padding: 8px 0;
}
input[type="text"],
input[type="email"],
input[type="password"],
select {
width: 100%;
padding: 10px;
border-radius: 20px;
border: 1px solid #ccc;
background-color: #fefefe;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
font-size: 14px;
}
input[type="radio"] {
margin-left: 10px;
}
button[type="submit"] {
margin-top: 30px;
width: 100%;
padding: 10px;
font-size: 1rem;
border-radius: 10px;
}
.png)
Komentar
Posting Komentar