Cara Membuat Form Biodata Dengan Html

Assalmualaikum pecinta kode HTML, 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="radio" name="jenis_kelamin" value="pria">Pria
          <input type="radio" name="jenis_kelamin" value="wanita">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>

 

See also  Cara membuat daftar list di html
 
Simpan kode tersebut dengann nama, biodata.html, buka dengan aplikasi browser, dan kurang lebih akan tampak seperti gambar berikut ini.
 
membuat form biodata
 
Penjelasan kode :
 
  • <html>, Kode tag untuk mengawali pembuatan markup html, diakhiri dengan tag </html>
  • <head> tag kepala, pada tag ini, kita bisa menyisipkan kode CSS, javascript,  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>

2 thoughts on “Cara Membuat Form Biodata Dengan Html”

  1. Terima Kasih atas informasi yang diberikan melalui artikel tersebut
    artikel ini sangat berguna untuk saya yang baru belajar membuat form pada html
    semoga artikel ini juga bermanfaat untuk yang lain
    Perkenalkan nama saya Erie Yunantari dari STMIK Atma Luhur dan Jangan lupa kujungi website kammpus saya https://www.atmaluhur.ac.id

    Reply

Leave a Comment