Nama: Muhammad Faisal Rahmadani
Kelas : XI-TKJ 2
Absen: 22
Formulir diHTML
1. Before
Source Code: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pendaftaran Peserta Badminton</title>
</head>
<body>
<div class="form-container">
<h1>Pendaftaran Peserta Masuk Badminton</h1>
<p>Isi formulir di bawah ini dengan lengkap untuk mendaftar sebagai peserta dalam pertandingan badminton.</p>
<form action="/submit" method="POST">
<!-- Nama Lengkap -->
<label for="name">Nama Lengkap <span class="required">*</span>:</label>
<input type="text" id="name" name="name" placeholder="Masukkan nama lengkap Anda" required>
<!-- Email -->
<label for="email">Email <span class="required">*</span>:</label>
<input type="email" id="email" name="email" placeholder="Masukkan email Anda" required>
<!-- Nomor Telepon -->
<label for="phone">Nomor Telepon <span class="required">*</span>:</label>
<input type="tel" id="phone" name="phone" placeholder="Masukkan nomor telepon Anda" required>
<!-- Sekolah -->
<label for="Sekolah"> Sekolah <span class="required">*</span>:</label>
<input type="tel" id="Sekolah" name="Sekolah" placeholder="Masukkan Sekolah Anda" required>
<!-- Usia -->
<label for="age">Usia <span class="required">*</span>:</label>
<input type="number" id="age" name="age" placeholder="Masukkan usia Anda" min="10" max="70" required>
<!-- Jenis Kelamin -->
<label for="gender">Jenis Kelamin:</label>
<select id="gender" name="gender" required>
<option value="" disabled selected>Pilih jenis kelamin</option>
<option value="laki-laki">Laki-Laki</option>
<option value="perempuan">Perempuan</option>
</select>
<!-- Kategori Pemain -->
<label for="category">Kategori Pemain <span class="required">*</span>:</label>
<select id="category" name="category" required>
<option value="" disabled selected>Pilih kategori Anda</option>
<option value="Pemula">Pemula</option>
<option value="Menengah">Menengah</option>
<option value="Lanjutan">Mahir</option>
</select>
<!-- Pengalaman Bermain -->
<label for="experience">Pengalaman Bermain Badminton (tahun):</label>
<input type="number" id="experience" name="experience" placeholder="Masukkan pengalaman bermain badminton" min="0">
<!-- Jadwal Latihan -->
<label for="jadwal">Pilih Jadwal Latihan:</label>
<select id="jadwal" name="jadwal" required>
<option value="" disabled selected>Pilih jadwal latihan</option>
<option value="senin_rabu_jumat">Senin, Rabu, Jumat (Pagi)</option>
<option value="selasa_kamis">Selasa, Kamis (Sore)</option>
<option value="sabtu_minggu">Sabtu, Minggu (Pagi)</option>
</select>
<!-- Catatan Tambahan -->
<label for="notes">Catatan Tambahan:</label>
<textarea id="notes" name="notes" placeholder="Tulis catatan tambahan (opsional)"></textarea>
<!-- Submit Button -->
<input type="submit" value="Daftar">
</form>
</div>
</body>
</html>
2. After
Source code: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pendaftaran Peserta Badminton</title>
<style>
body {
background-image: url('Faisal.jpg');
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
background-size: cover;
}
.form-container {
max-width: 700px;
margin: 0 auto;
padding: 30px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
font-size: 26px;
margin-bottom: 20px;
}
p {
text-align: center;
font-size: 16px;
margin-bottom: 20px;
color: #555;
}
label {
display: block;
font-size: 16px;
margin-bottom: 8px;
}
input, select, textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="submit"] {
background-color: #0a0a0a;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
input[type="submit"]:hover {
background-color: #000000;
}
textarea {
height: 100px;
}
.required {
color: red;
}
</style>
</head>
<body>
<div class="form-container">
<h1>Pendaftaran Peserta Masuk Badminton</h1>
<p>Isi formulir di bawah ini dengan lengkap untuk mendaftar sebagai peserta dalam pertandingan badminton.</p>
<form action="/submit" method="POST">
<!-- Nama Lengkap -->
<label for="name">Nama Lengkap <span class="required">*</span>:</label>
<input type="text" id="name" name="name" placeholder="Masukkan nama lengkap Anda" required>
<!-- Email -->
<label for="email">Email <span class="required">*</span>:</label>
<input type="email" id="email" name="email" placeholder="Masukkan email Anda" required>
<!-- Nomor Telepon -->
<label for="phone">Nomor Telepon <span class="required">*</span>:</label>
<input type="tel" id="phone" name="phone" placeholder="Masukkan nomor telepon Anda" required>
<!-- Sekolah -->
<label for="Sekolah"> Sekolah <span class="required">*</span>:</label>
<input type="text" id="Sekolah" name="Sekolah" placeholder="Masukkan Sekolah Anda" required>
<!-- Usia -->
<label for="age">Usia <span class="required">*</span>:</label>
<input type="number" id="age" name="age" placeholder="Masukkan usia Anda" min="10" max="70" required>
<!-- Jenis Kelamin -->
<label for="gender">Jenis Kelamin:</label>
<select id="gender" name="gender" required>
<option value="" disabled selected>Pilih jenis kelamin</option>
<option value="laki-laki">Laki-Laki</option>
<option value="perempuan">Perempuan</option>
</select>
<!-- Alamat -->
<label for="address">Alamat <span class="required">*</span>:</label>
<input type="address" id="alamat" name="alamat" placeholder="Masukkan alamat Anda" min="10" max="70" required>
<!-- Kategori Pemain -->
<label for="category">Kategori Pemain <span class="required">*</span>:</label>
<select id="category" name="category" required>
<option value="" disabled selected>Pilih kategori Anda</option>
<option value="Pemula">Pemula</option>
<option value="Menengah">Menengah</option>
<option value="Lanjutan">Mahir</option>
</select>
<!-- Pengalaman Bermain -->
<label for="experience">Pengalaman Bermain Badminton (tahun):</label>
<input type="number" id="experience" name="experience" placeholder="Masukkan pengalaman bermain badminton" min="0">
<!-- Jadwal Latihan -->
<label for="jadwal">Pilih Jadwal Latihan:</label>
<select id="jadwal" name="jadwal" required>
<option value="" disabled selected>Pilih jadwal latihan</option>
<option value="senin_rabu_jumat">Senin, Rabu, Jumat (Pagi)</option>
<option value="selasa_kamis">Selasa, Kamis (Sore)</option>
<option value="sabtu_minggu">Sabtu, Minggu (Pagi)</option>
</select>
<!-- Catatan Tambahan -->
<label for="notes">Catatan Tambahan:</label>
<textarea id="notes" name="notes" placeholder="Tulis catatan tambahan (opsional)"></textarea>
<!-- Submit Button -->
<input type="submit" value="Daftar">
</form>
</div>
</body>
</html>
0 komentar:
Posting Komentar