Tutorial Membuat Form Biodata Siswa Menggunakan HTML
Cara Membuat Form Biodata Siswa sederhana Menggunakan Bahasa Pemrograman HTML
Hallo Teman-teman apa kabar!! kali ini admin akan memberikan sebuah tutorial bagaimana cara membuat form biodata siswa/ mahasiswa menggunakan bahasa pemrograman HTML.
Bagi teman-teman yang baru masuk kuliah IT tentuu teman berjumpa dengan mata kuliah bahasa pemrograman web yakni HTML. Nah jika teman-teman kurang mendapatkan ilmu dari dosen atau waktu yang singkat sehingga teman tidak paham apa yang diajarkan.
Maka dari itu admin sudah menyediakan beberapa tutorial dasar HTML dan beserta latihan-latihan yang dapat mengasah kemampuan koding teman-teman.
Pada projek kali ini admin akan membuat sebuah form sederhana tentang Biodata Siswa/ Mahasiswa.
Sebelum membuat kode program terlebih dahulu teman harus membuka aplikasi text editor seperti notepad, notepad++, sublime text, tergantung text editor mana yang teman sukai. Ok jika aplikasi text editor telah dibuka ketikkan kode berikut :
file Biodata.html
<!DOCTYPE html>
<html>
<head>
<title>Biodata</title>
</head>
<body>
<table border=0>
<form action="" method="">
<tr>
<td>NPM</td>
<td>:</td>
<td><input type=text name=NPM></td>
</tr>
<tr>
<td>Nama Lengkap</td>
<td>:</td>
<td><input type=text name=Nama></td>
</tr>
<tr>
<td>Lama Study</td>
<td>:</td>
<td><input type=text name=Tahun size=5>Tahun<input type=text name=Bulan size=5>Bulan</td>
</tr>
<tr>
<td>IPK Terakhir</td>
<td>:</td>
<td><input type=text name=IPK size=5></td>
</tr>
<tr>
<td>Jurusan</td>
<td>:</td>
<td>
<input type=radio name="jurusan" value="TI">Teknik Informatika
<input type=radio name="jurusan" value="Elektro">Teknik Elektro
<input type=radio name="jurusan" value="Sipil">Teknik Sipil
</td>
</tr>
<tr>
<td>Tempat dan Tanggal Lahir</td>
<td>:</td>
<td><input type=text name=Tempat size=15>
<select name=Tgl>
<option name=Tgl>Tanggal
<option name=Tgl>1
<option name=Tgl>2
<option name=Tgl>3
<option name=Tgl>4
<option name=Tgl>5
<option name=Tgl>6
<option name=Tgl>7
<option name=Tgl>8
<option name=Tgl>9
<option name=Tgl>10
<option name=Tgl>11
<option name=Tgl>12
<option name=Tgl>13
<option name=Tgl>14
<option name=Tgl>15
<option name=Tgl>16
<option name=Tgl>17
<option name=Tgl>18
<option name=Tgl>19
<option name=Tgl>20
<option name=Tgl>21
<option name=Tgl>22
<option name=Tgl>23
<option name=Tgl>24
<option name=Tgl>26
<option name=Tgl>27
<option name=Tgl>28
<option name=Tgl>29
<option name=Tgl>30
<option name=Tgl>31
</select>
<select name=Bln>
<option name=Bln>Bulan
<option name=Bln>Januari
<option name=Bln>Februari
<option name=Bln>Maret
<option name=Bln>April
<option name=Bln>Mei
<option name=Bln>Juni
<option name=Bln>Juli
<option name=Bln>Agustus
<option name=Bln>September
<option name=Bln>Oktober
<option name=Bln>November
<option name=Bln>Desember
</select>
<select name=Thn>
<option name=Thn>Tahun
<option name=Thn>2020
<option name=Thn>2019
<option name=Thn>2018
<option name=Thn>2017
<option name=Thn>2016
<option name=Thn>2015
<option name=Thn>2014
</select>
</td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>:</td>
<td><input type=radio name=JK value=Laki-laki>Laki-laki<input type=radio name=JK value=Perempuan>Perempuan</td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td><input type=textfield name=alamat></td>
</tr>
<tr>
<td>Tentang Anda</td>
<td>:</td>
<td><textarea rows="5" cols="22" name="" required></textarea></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="submit" value="INPUT DATA">
<input type="reset" name="reset" value="BERSIH"></td>
</tr>
</form>
</table>
</body>
</html>
<html>
<head>
<title>Biodata</title>
</head>
<body>
<table border=0>
<form action="" method="">
<tr>
<td>NPM</td>
<td>:</td>
<td><input type=text name=NPM></td>
</tr>
<tr>
<td>Nama Lengkap</td>
<td>:</td>
<td><input type=text name=Nama></td>
</tr>
<tr>
<td>Lama Study</td>
<td>:</td>
<td><input type=text name=Tahun size=5>Tahun<input type=text name=Bulan size=5>Bulan</td>
</tr>
<tr>
<td>IPK Terakhir</td>
<td>:</td>
<td><input type=text name=IPK size=5></td>
</tr>
<tr>
<td>Jurusan</td>
<td>:</td>
<td>
<input type=radio name="jurusan" value="TI">Teknik Informatika
<input type=radio name="jurusan" value="Elektro">Teknik Elektro
<input type=radio name="jurusan" value="Sipil">Teknik Sipil
</td>
</tr>
<tr>
<td>Tempat dan Tanggal Lahir</td>
<td>:</td>
<td><input type=text name=Tempat size=15>
<select name=Tgl>
<option name=Tgl>Tanggal
<option name=Tgl>1
<option name=Tgl>2
<option name=Tgl>3
<option name=Tgl>4
<option name=Tgl>5
<option name=Tgl>6
<option name=Tgl>7
<option name=Tgl>8
<option name=Tgl>9
<option name=Tgl>10
<option name=Tgl>11
<option name=Tgl>12
<option name=Tgl>13
<option name=Tgl>14
<option name=Tgl>15
<option name=Tgl>16
<option name=Tgl>17
<option name=Tgl>18
<option name=Tgl>19
<option name=Tgl>20
<option name=Tgl>21
<option name=Tgl>22
<option name=Tgl>23
<option name=Tgl>24
<option name=Tgl>26
<option name=Tgl>27
<option name=Tgl>28
<option name=Tgl>29
<option name=Tgl>30
<option name=Tgl>31
</select>
<select name=Bln>
<option name=Bln>Bulan
<option name=Bln>Januari
<option name=Bln>Februari
<option name=Bln>Maret
<option name=Bln>April
<option name=Bln>Mei
<option name=Bln>Juni
<option name=Bln>Juli
<option name=Bln>Agustus
<option name=Bln>September
<option name=Bln>Oktober
<option name=Bln>November
<option name=Bln>Desember
</select>
<select name=Thn>
<option name=Thn>Tahun
<option name=Thn>2020
<option name=Thn>2019
<option name=Thn>2018
<option name=Thn>2017
<option name=Thn>2016
<option name=Thn>2015
<option name=Thn>2014
</select>
</td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>:</td>
<td><input type=radio name=JK value=Laki-laki>Laki-laki<input type=radio name=JK value=Perempuan>Perempuan</td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td><input type=textfield name=alamat></td>
</tr>
<tr>
<td>Tentang Anda</td>
<td>:</td>
<td><textarea rows="5" cols="22" name="" required></textarea></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="submit" value="INPUT DATA">
<input type="reset" name="reset" value="BERSIH"></td>
</tr>
</form>
</table>
</body>
</html>
Copykan kode diatas ke dalam notepad teman-teman kemudian simpat dengan nama Biodata.html. jika teman sudah instal xampp simpan file didalam xampp>htdocs>New-folder, Jika teman belum instal xampp simpan saja ditempat yang disukai.
Selanjutnya Jalankan pada sebuah browser bisa Mozilla atau Chrome. dengan mengetikkan http://localhost/blogger/Biodata.html atau klik kanan pada file tersebut Run with Chrome. Jika sudah maka tampilannya seperti gambar Berikut :
 |
| Form Biodata Sederhana |
Selajutnya apabila teman ingin menampilkan data yang diinputkan kehalamn baru. teman bisa kunjungi tutorial HTML dan PHP yang membahas tentang Tutorial membuat form input Biodata sederhana dan Menampilkannya.
Baiklah terima kasih telah membaca artikel ini sampai akhir, semoga apa yang admin sampaikan bermanfaat dan mudah simengerti. dan jangan lupa share ke teman lain yang membutuhkan.
0 Response to "Tutorial Membuat Form Biodata Siswa Menggunakan HTML"
Post a Comment