Membuat Formulir Lomba Akademik
Cara Membuat Formulir Lomba Akademik dalam HTML
Hallo! Bertemu lagi dengan saya Si Tampan, Kali ini saya akan membuat Form Lomba Akademik dalam HTML untuk para peserta. Tutorial atau cara untuk membuat Formulir nya adalah
1. Pertama anda memerlukan Text Editor yaitu Visual Studio Code, Sublime Text, Notepad++, dll.
2. Kedua membuat Header atau Kepala dari Code Formulir ;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
h1 {text-align: center;}
p {text-align: center;}
div {text-align: center;}
legend {text-align: center;}
</style>
<title>Formulir Lomba Akademik Nasional</title>
</head>
3. Ketiga kalian juga bisa mengganti background/latar belakang ;
<body style="padding-left: 30%;background-image: url('https://i.ytimg.com/vi/AmGzywcmpMo/mqdefault.jpg');background-repeat: no-repeat; background-size: contain;-webkit-background-size: cover;">
4. Keempat membuat Elemen form dan attribute ;
<body style="padding-left: 30%;background-image: url('https://i.ytimg.com/vi/AmGzywcmpMo/mqdefault.jpg');background-repeat: no-repeat; background-size: contain;-webkit-background-size: cover;">
<form style="border: 1px solid black;width: 50%;border-radius: 15px;box-shadow: 5px 5px;background-color: white;">
<h3 style="text-align: left;padding-left: 10%;">--- Formulir Lomba Akademik ---</h3>
<p style="text-align: left;padding-left: 22%;">Nama Lengkap : <input type="text" name="nama" placeholder="Nama Anda"></p>
<p style="text-align: left;padding-left: 22%;">Jenis Kelamin : <input type="radio" id="laki-laki" name="jkelamin" value="Laki-Laki">
<label for="laki-laki">Laki-Laki</label>
<input type="radio" id="wanita" name="jkelamin" value="Wanita">
<label for="wanita">Wanita</label></p>
<p style="text-align: left;padding-left: 22%;">Tanggal Lahir : <input type="date"></p>
<p style="text-align: left;padding-left: 22%;">Email : <input type="text" name="email" placeholder="Email Anda"></p>
<p style="text-align: left;padding-left: 22%;">Jurusan : <select name="jurusan" id="jurusan">
<optgroup label="TI">
<option value="pplg">PPLG (Jurusan Baru)</option>
<option value="rpl">RPL</option>
<option value="sija">SIJA</option>
<option value="tjkt">TJKT</option>
<option value="tkj">TKJ</option>
</optgroup>
<optgroup label="Listrik">
<option value="tkl">TKL (Jurusan Baru)</option>
<option value="titl">TITL</option>
<option value="ttl">TTL</option>
</optgroup>
<optgroup label="Otomotif">
<option value="to">TO</option>
<option value="tkro">TKRO</option>
</optgroup>
<optgroup label="Bangunan">
<option value="dpib">DPIB</option>
<option value="tkp">TKP</option>
<option value="bkp">BKP</option>
</optgroup>
<optgroup label="Mesin">
<option value="tm">TM (Jurusan Baru)</option>
<option value="tpgm">TPGM</option>
<option value="tp">TP</option>
</optgroup>
<optgroup label="DKV">
<option value="dkv">DKV (Jurusan Baru)</option>
<option value="mm">MM</option>
</optgroup>
</select><br>
<p style="text-align: left;padding-left: 22%;">Alasan Daftar Lomba Akademik : <br></p>
<textarea rows ="5" cols="50" name="description" placeholder="Masukan Alasan Anda Mendaftar Lomba" style="text-align: left;margin-left: 11%;"></textarea>
<p><input type="submit" name="submit" value="Submit"></p>
</form>
</body>
</html>
Lalu saya akan menampilkan hasil atau output dari codingan tersebut
Komentar
Posting Komentar