Tugas Elemen Form Action & POST
Membuat Form Input dan Output Data Menggunakan HTML, CSS dan PHP tanpa Database
- File Name : index.php
<!DOCTYPE html><html>
<head>
<title>Elemen Form | Pengisian Data</title>
<style>
*{
font-family: candara;
margin: 0px;
}
.header{
text-align : center;
color : blue;
background: #2c97df;
height: 40px;
color: #ffff;
}
.table{
font-size: 15px;
border-spacing: 10px;
}
.button{
background-color: #2c97df;
border: none;
color: white;
padding: 8px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 15px;
}
.footer{
text-align: center;
font-size: 13px;
}
</style>
</head>
<body title="Silakan Input Data Anda Dengan Valid atau Benar!">
<div class="form">
<div class="header">
<h1>Silakan Masukan Data Anda!</h1>
</div>
<form method="POST" action="hasil.php" name="belajarElemenForm" entype="multipart/form-data">
<table class="table">
<tr>
<td><label for="nama">Nama Lengkap</label></td><br>
<td><input type="text" name="nama" id="nama" placeholder="Masukan Nama..." style="width:100%"></td>
</tr>
<tr>
<td><label for="nim">Nomor Induk Mahaiswa</label></td>
<td><input type="text" name="nim" placeholder="Masukan Nim..." style="width:100%;"></td>
</tr>
<tr>
<td><label for="tglLahir">Tanggal Lahir</label></td>
<td><input type="date" name="tglLahir" ></td>
</tr>
<tr>
<td valign="top"><label for="alamat">Alamat</label></td>
<td><textarea name="alamat" placeholder="Masukan Alamat..." style="width:100%; height:55px"></textarea></textarea></td>
</tr>
<tr>
<td><label for="jenis_kelamin">Jenis Kelamin</label></td>
<td><input class="jk" type="radio" name="jenis_kelamin" value="Laki-Laki">Laki-laki
<input class="jk" type="radio" name="jenis_kelamin" value="Perempuan">Perempuan</td>
</tr>
<tr>
<td><label for="fakultas">Fakultas</label></td>
<td><select name="fakultas" style="width:103%">
<option value="">--Pilih--</option>
<option value="Sains dan Teknologi">Sains dan Teknologi</option>
<option value="Ilmu-ilmu Sosiai">Ilmu-ilmu Sosial</option>
</select></td>
</tr>
<tr>
<td><label for="program_studi">Program Studi</label></td>
<td><select name="program_studi" style="width:103%">
<option value="">--Pilih--</option>
<option value="Hukum">Hukum</option>
<option value="Managemen">Managemen</option>
<option value="Ekonomi">Ekonomi</option>
<option value="Bilologi">Bilologi</option>
<option value="Matematika">Matematika</option>
<option value="Teknik Informatika">Teknik Informatika</option>
<option value="Teknologi Hasil Perikanan">Teknologi Hasil Perikanan</option>
<option value="Perternakan">Perternakan</option>
<option value="Agroteknologi">Agroteknologi</option>
<option value="Agribisnis">Agribisnis</option>
</select></td>
</tr>
<tr>
<td><label for="tahun_angkatan">Tahun Angkatan</label></td>
<td><select name="tahun_angkatan" style="width:103%">
<option value="">--Pilih--</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select></td>
<tr>
<td><label for="hoby">Hobbi</label></td>
<td><input class="hobi" type="checkbox" name="check1" value="Sepak Bola">
<label for="">Sepak Bola</label>
<input class="hobi" type="checkbox" name="check2" value="Membaca">
<label for="">Membaca</label>
<input class="hobi" type="checkbox" name="check3" value="Menyanyi">
<label for="">Menyanyi</label></td>
</tr>
<tr>
<td><label for="foto">Upload foto</label></td>
<td><input type="file" name="foto" accept="image/*"></td>
</tr>
<br>
<tr>
<td><button class="button" type="submit" value="kirim" name="kirim" title="Kirim Data Anda!">Kirim</button></td>
</tr>
</table>
</form>
</div>
<br>
<div class="footer">
<p title="Hak Cipta"><small>All Copyright © || Rizaldy Adiwanto Melqan Radjah - 2020</small></p>
</div>
</body>
</html>
File Name : hasil.php
<!DOCTYPE html>
<head>
<title>Hasil Data | Elemen Form</title>
<style>
*{
font-family: candara;
}
.header{
color : blue;
}
.footer{
text-align: center;
font-size: 13px;
}
</style>
</head>
<body>
<div class="header">
<h1>Hasil Input Data!</h1>
</div>
<div class="table">
<table border="1">
<tr>
<td>Nama Lengkap</td>
<td>:</td>
<td><?php echo $_POST['nama']; ?></td>
</tr>
<tr>
<td>Nomor Induk Mahasiswa</td>
<td>:</td>
<td><?php echo $_POST['nim']; ?></td>
</tr>
<tr>
<td>Tanggal Lahir</td>
<td>:</td>
<td><?php echo $_POST['tglLahir']; ?></td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td><?php echo $_POST['alamat']; ?></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>:</td>
<td><?php echo $_POST['jenis_kelamin']; ?></td>
</tr>
<tr>
<td>Fakutas</td>
<td>:</td>
<td><?php echo $_POST['fakultas']; ?></td>
</tr>
<tr>
<td>Program Studi</td>
<td>:</td>
<td><?php echo $_POST['program_studi']; ?></td>
</tr>
<tr>
<td>Tahun Angkatan</td>
<td>:</td>
<td><?php echo $_POST['tahun_angkatan']; ?></td>
</tr>
<tr>
<td>Hobbi</td>
<td>:</td>
<td>
<ol>
<li><?php echo $_POST['check1']; ?></li>
<li><?php echo $_POST['check2']; ?></li>
<li><?php echo $_POST['check3']; ?></li>
</ol>
</td>
</tr>
<tr>
<td>Foto Upload</td>
<td>:</td>
<td><img src="<?php echo $_POST['foto']; ?>" height="150px" witdh="150px"></td>
</tr>
</table>
</div>
</body>
</html>
Hasil Yang Ditampilkan:
Silakan Tonton Vidio Tutorial dibawah ini:
Komentar
Posting Komentar
Silakan Masukan Komentar Anda...