Halo buat kamu yang cita citanya jadi programmer, apakah anda ingin membuat website dan memerlukan form untuk memasukan biodata ?, tepat sekali dengan pembahasan kali ini, kita akan membahas bagiamana sih cara membuat form biodata dengan html. Form biodata, sangat kita butuhkan jika situs kita adalah situs pendidikan, atau mungkin lowongan pekerjaan, atau mungkin situs perusahaan tertentu.
Dalam membuat form biodata, yang perlu kita ketahui adalah, data apa yang kita inginkan dari user. Untuk mempermudah, silahkan tulis pada kertas, buat list apa saja yang dibutuhkan. Misalnya seperti nama, tanggal lahir, foto, alamat, dan sebagainya. Oke, semoga dasar dari form ini bisa membantu.Yang akan kita buat kali ini adalah form biodata dengan input nama, jenis kelamin, tempat tanggal lahir, foto, alamat, riwayat pendidikan, dan hobi. Untuk membuatnya, kita akan memerlukan beberapa tag html, berikut tag html yang akan kita gunakan
<input type=”text” name=””>
<input type=”radio” name=”” value=””/>
<select name=””><option value=””>……</option></select>
<textarea name=””></textara><input type=”file”>
Kode tag diatas merupakan tag yang akan kita pakai, tag tersebut akan disisipkan pada tag <table>, tujuannya agar terlihat rapih. Mari kita sisipkan pada file html, buka text editornya (notepad), lalu ketikan perintah berikut ini.
<html>
<head>
</head>
<body>
<h2>Masukan BIODATA anda</h2>
<table>
<tr>
<td>Nama :</td>
<td><input type=”text” name=”nama” placeholder='Masukan Nama'></td>
</tr>
<tr>
<td>Jenis kelamin</td>
<td>
<input type="checkbox">Pria
<input type="checkbox">Wanita
</td>
</tr>
<tr>
<td>
Tpt /Tgl/lahir :
</td>
<td>
<input type=”text” name=”lahir” placeholder='masukan tanggal lahir anda'>
</td>
</tr>
<tr>
<td>riwayat pendidikan</td>
<td><textarea name=”r_p”></textarea></td>
</tr>
<tr>
<td>Status</td>
<td>
<select name=”status”>
<option value=”menikah”>Menikah</option>
<option value=”single”>single</option>
</select>
</td>
</tr>
<tr>
<td>Upload Photo anda</td>
<td>
<input type=”file” name=”gambar”/>
</td>
</tr>
<tr>
<td>Apa Hobi anda</td>
<td><textarea name=””></textarea></td>
</tr>
<tr>
<td>Alamat anda</td>
<td><textarea name=””></textarea></td>
</tr>
<tr>
<td></td><td><button type=”submit”>Masukan Biodata</button></td>
</tr>
</table>
</body>
</html>
Simpan kode tersebut dengann nama, biodata.html, buka dengan aplikasi browser, dan kurang lebih akan tampak seperti gambar berikut ini.
Penjelasan kode :
- <html> tag untuk membuat kode html, yang diakhiri dengan tag </html>
- <head> tag kepala, pada tag ini, kita bisa menyisipkan kode CSS, tag meta, dan sebagainya. Tag ini diakhiri dengan tag </head>
- <body> merupakan tag untuk menampilkan isi halaman, diakhiri dengan tag</body>
- <input> merupakan tag untuk memasukan data, terdiri dari berbagai atribut seperti “text”,”file”,”radio”.
- <select> tag untuk pilihan, didalamnya ditulis dengan <option> dan</option>, tag ini diakhiri dengan kode </select>
- <textare> tag dengan isian text yang lebih banyak, diakhiri dengan</textaraea>
Materi selesai.. Mari baca lagi
Post a Comment (0)