Formulir Pendaftaran HTML
1. Script Web Sebelum
HTML
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Formulir Pendaftaran</title>
<link
rel="stylesheet"
href="style.css">
<style>
banner {
background-image: url('SMK.jpg');
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
</head>
<body>
<div
class="container">
<h2>Esport SMKN 3 Buduran</h2>
<form
action="#"
method="post">
<label
for="nama">Nama Lengkap:</label>
<input
type="text"
id="nama"
name="nama"
required>
<label
for="email">Email:</label>
<input
type="email"
id="email"
name="email"
required>
<label
for="Jurusan_Sekolah">Jurusan:</label>
<select
id="Jurusan_Sekolah"
name="Jurusan"
required>
<option
value="">Pilih</option>
<option
value="TKJ">Teknik Komputer Jaringan</option>
<option
value="TKR">Teknik Kendaraan Ringan</option>
</select>
<label
for="password">Kata Sandi:</label>
<input
type="password"
id="password"
name="password"
required>
<label
for="konfirmasi_password">Konfirmasi Kata Sandi:</label>
<input
type="password"
id="konfirmasi_password"
name="konfirmasi_password"
required>
<label
for="jenis_kelamin">Jenis Kelamin:</label>
<select
id="jenis_kelamin"
name="jenis_kelamin"
required>
<option
value="">Pilih</option>
<option
value="laki-laki">Laki-laki</option>
<option
value="perempuan">Perempuan</option>
</select>
<label
for="tanggal_lahir">Tanggal Lahir:</label>
<input
type="date"
id="tanggal_lahir"
name="tanggal_lahir"
required>
<input
type="submit"
value="Daftar">
</form>
</div>
</body>
</html>
CSS
* {
margin:
0;
padding:
0;
box-sizing:
border-box;
}
body {
font-family:
Arial,
sans-serif;
background-image:
url('https://cdn.mos.cms.futurecdn.net/3UrmuKyTpK8TavGvEajuGP.jpg');
display:
flex;
justify-content:
center;
align-items:
center;
height:
100vh;
background-size:
cover;
}
.container {
background-color:
rgb(255, 255,
255);
padding:
20px;
border-radius:
10px;
box-shadow:
0
2px
10px
rgba(0, 0,
0,
0.1);
width:
400px;
}
h2 {
text-align:
center;
margin-bottom:
20px;
}
label {
display:
block;
margin-bottom:
5px;
font-weight:
bold;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
select {
width:
100%;
padding:
10px;
margin-bottom:
20px;
border:
1px
solid
#ccc;
border-radius:
5px;
}
input[type="submit"] {
width:
100%;
padding:
10px;
background-color:
#28a745;
color:
white;
border:
none;
border-radius:
5px;
cursor:
pointer;
font-size:
16px;
}
input[type="submit"]:hover
{
background-color:
#218838;
}
2. Foto Tampilan Web Sebelum
3. Script Web Sesudah
HTML
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Formulir Pendaftaran</title>
<link
rel="stylesheet"
href="style.css">
</head>
<body>
<div
class="container">
<h2>Esport SMKN 3 Buduran</h2>
<form
action="#"
method="post">
<label
for="nama">Nama Lengkap:</label>
<input
type="text"
id="nama"
name="nama"
required>
<label
for="phone">No Telephone:</label>
<input
type="tel"
id="phone"
name="phone"
pattern="[0-9]{10,13}">
<label
for="email">Email:</label>
<input
type="email"
id="email"
name="email">
<label
for="Jurusan_Sekolah">Jurusan:</label>
<select
id="Jurusan_Sekolah"
name="Jurusan"
required>
<option
value="">Pilih</option>
<option
value="TKJ">Teknik Komputer Jaringan</option>
<option
value="TKR">Teknik Kendaraan Ringan</option>
<option
value="TPM">Teknik Permesinan</option>
<option
value="TPTU">Teknik Pendingin dan Tata
Udara</option>
<option
value="KK">Kelistrikan Kapal</option>
</select>
<label
for="Tim">Tim:</label>
<select
id="Tim"
name="Tim"
required>
<option
value="">Pilih</option>
<option
value="RRQ">RRQ</option>
<option
value="EVOS">EVOS</option>
<option
value="ALTER EGO">ALTER EGO</option>
<option
value="ONIC">ONIC</option>
<option
value="BTR">BTR</option>
<option
value="AURA">AURA</option>
</select>
<label
for="gender">Jenis Kelamin:</label>
<select
id="gender"
name="gender"
required>
<option
value="">Pilih</option>
<option
value="laki-laki">Laki-laki</option>
<option
value="perempuan">Perempuan</option>
</select>
<input
type="submit"
value="Daftar">
</form>
</div>
</body>
</html>
CSS
* {
margin:
0;
padding:
0;
box-sizing:
border-box;
}
body {
font-family:
Arial,
sans-serif;
background-color:
white;
display:
flex;
justify-content:
center;
align-items:
center;
height:
100vh;
background-size:
cover;
}
.container {
background-color:
rgb(255, 255,
255);
padding:
20px;
border-radius:
10px;
box-shadow:
0
2px
10px
rgba(0, 0,
0,
0.1);
width:
400px;
}
h2 {
text-align:
center;
margin-bottom:
20px;
}
label {
display:
block;
margin-bottom:
5px;
font-weight:
bold;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="profil"],
select {
width:
100%;
padding:
10px;
margin-bottom:
20px;
border:
1px
solid
#ccc;
border-radius:
5px;
}
.lomba {
width:
100%;
padding:
10px;
margin-bottom:
20px;
border:
1px
solid
#ccc;
border-radius:
5px;
}
input[type="submit"] {
width:
100%;
padding:
10px;
background-color:
#28a745;
color:
white;
border:
none;
border-radius:
5px;
cursor:
pointer;
font-size:
16px;
}
input[type="submit"]:hover
{
background-color:
#218838;
}
4. Foto Tampilan Web Sesudah
Tidak ada komentar:
Posting Komentar