Cara Membuat Form Biodata Sederhana Dengan Html

Cara Membuat Form Biodata Sederhana Dengan Html, Dalam penggunanya form digunakan untuk mengirimkan data data baik data pribadi, bisnis, dan dll setiap form dibuat berdasarkan fungsi dan kegunaannya masing masing. Ada banyak jenis form yang ada salah satunya ialah form biodata yang digunakan untuk mengisih data data seperti data pribadi, dalam pembuatannya pun cukup mudah baik versi kertas ataupun web semuanya tidak terlalu sulit hanya memerlukan sedikit teknik koding yang tidak begitu sulit dan mudah dipraktekkan sehingga pemula pun mungkin dapat mempraktekkannya.

Daftar isi

  1. Cara Membuat Form Biodata Sederhana Dengan Html
  2. Kode pengisian nama, kelas, dan nisn
  3. Kode pengisian jurusan atau mata pelajaran
  4. Kode jenis kelamin / gender
  5. Kode untuk tanggal dan bulan tahun lahir form biodata
  6. Kode lengkap
  7. Cara penerapan / pemasangan
  8. Tips
  9. Kesimpulan

Ada banyak sekali jenis form diluar sana baik untuk keperluan bisnis, sekolah, dan dllsemuanya memeiliki jenis formnya tersendiri namun pada artikel kali ini kita akan membahas satu saja yaitu form biodata, form biodata memiliki banyak sekali fungsi salah satunya yang merupakan fungsi yang paling utama form biodata adalah untuk mendata data pribadi yang sulit untuk ditanyakan kepada orang satu persatu sehingga dengan adanya form biodata ini memudahkan dalam hal mencatat data data pribadi.

Pembuatan form biodata ini pun cukup mudah yaitu hanya menggunakan kode html saja, dan pastinya sederhana. Tapi jangan salah form ini memiliki menu yang lengkap dan juga sederhana yang dapat digunakan dengan mudah. Bagaimana cara pembuatannya langsung saja disimak hingga akhir.

Cara Membuat Form Biodata Sederhana Dengan Html

Semoga penjelasan ini mudah untuk pahami dan juga anda mengerti sehingga pemasangan dan juga mengeditannya tidak begitu lama untuk terapkan dan form bio kali ini bertemakan sekolah saat pendaftaran penerimaan siswa baru.

1. Kode pengisian nama, kelas, dan nisn

Kode dibawah merupakan kode yang dapat anda gunakan untuk mengisih form bagian nama, kelas dan nisn anda dapat mengubah kode sesuai dengan kebutuhan anda.

<tr>
<td>NISN</td>
<td>:</td>
<td><input type
=text name=
NISN></td>
</tr>
<tr>
<td>Nama Lengkap</td>
<td>:</td>
<td><input type=text name=Nama size=50></td>
</tr>
<tr>
<td>Kelas</td>
<td>:</td>
<td><select name="RW">
<option value="X">X</option>
<option value="XI">XI</option>
<option value="XII">XII</option></td></select>
</tr>

2. Kode pengisian jurusan atau mata pelajaran

Kode yang dibawah ini dapat anda gunakan sebagai kode untuk pengisian jurusan contoh boga, kelistrikan, teknik mesin dan dll.

<td>Jurusan</td>
<td>:</td>
<td>
<input type=radio name="jurusan" value="RPL">Boga
<input type=radio name="jurusan" value="TKJ">Teknik Kelistrikan
<input type=radio name="jurusan" value="AP">Teknik Mesin
</td>
</tr>

3. Kode jenis kelamin / gender

Kode dibawah merupakan kode yang dapat anda gunakan untuk mengisih jenis kelamin kodenya sangat simple dan juga mudah untuk anda terapkan.

<tr>
<td>Jenis Kelamin</td>
<td>:</td>
<td><input type=radio name=jenis kelamin value=Laki-laki>Laki-laki<input type=radio name=jenis kelamin=Perempuan>Perempuan</td>
</tr>

4. Kode untuk tanggal dan bulan tahun lahir form biodata

Kode dibawah ini merupakan kode tanggal lahir yang udah dibuat sesuai daftar mulai dari tanggal 1 sampai 31 dari bulan januari hingga Desember semuanya sudah lengkap dibawah ini.

<tr>
<td>Tempat &amp Tanggal Lahir</td>
<td>:</td>
<td><input type=text name=Tempat size=15>
<select name=Tanggal>
<option name=Tanggal>Tanggal
<option name=Tanggal>1
<option name=Tanggal>2
<option name=Tanggal>3
<option name=Tanggal>4
<option name=Tanggal>5
<option name=Tanggal>6
<option name=Tanggal>7
<option name=Tanggal>8
<option name=Tanggal>9
<option name=Tanggal>10
<option name=Tanggal>11
<option name=Tanggal>12
<option name=Tanggal>13
<option name=Tanggal>14
<option name=Tanggal>15
<option name=Tanggal>16
<option name=Tanggal>17
<option name=Tanggal>18
<option name=Tanggal>19
<option name=Tanggal>20
<option name=Tanggal>21
<option name=Tanggal>22
<option name=Tanggal>23
<option name=Tanggal>24
<option name=Tanggal>26
<option name=Tanggal>27
<option name=Tanggal>28
<option name=Tanggal>29
<option name=Tanggal>30
<option name=Tanggal>31
</select>
<select name=Bulan>
<option name=Bulan>Bulan
<option name=Bulan>Januari
<option name=Bulan>Februari
<option name=Bulan>Maret
<option name=Bulan>April
<option name=Bulan>Mei
<option name=Bulan>Juni
<option name=Bulan>Juli
<option name=Bulan>Agustus
<option name=Bulan>September
<option name=Bulan>Oktober
<option name=Bulan>November
<option name=Bulan>Desember
</select>
<select name=Tahun>
<option name=Tahun>Tahun
<option name=Tahun>2016
<option name=Tahun>2015
<option name=Tahun>2014
<option name=Tahun>2013
<option name=Tahun>2012
<option name=Tahun>2011
<option name=Tahun>2010
<option name=Tahun>2009
<option name=Tahun>2008
<option name=Tahun>2007
<option name=Tahun>2006
<option name=Tahun>2005
<option name=Tahun>2004
<option name=Tahun>2003
<option name=Tahun>2002
<option name=Tahun>2001
<option name=Tahun>2000
<option name=Tahun>1993
<option name=Tahun>1992
</select>
</td>
</tr>

5. Kode lengkap

Nah kode bio versi lengkapnya udah dibuat seperti yang dibawah ini langsung saja anda terapkan dan edit beberapa bagain sesuai dengan kebutuhan anda.

<html>
<head>
<title>Form Biodata sederhana</title>
</head>
<body>
<center><b>FORM BIODATA SISWA / SISWI SMK DUEL KELAHI MAKASSAR</b></center>
<hr>
<table border=0>
<tr>
<td>NISN</td>
<td>:</td>
<td><input type
=text name=
NISN></td>
</tr>
<tr>
<td>Nama Lengkap</td>
<td>:</td>
<td><input type=text name=Nama size=50></td>
</tr>
<tr>
<td>Kelas</td>
<td>:</td>
<td><select name="RW">
<option value="X">X</option>
<option value="XI">XI</option>
<option value="XII">XII</option></td></select>
</tr>
<tr>
<td>Jurusan</td>
<td>:</td>
<td>
<input type=radio name="jurusan" value="RPL">Boga
<input type=radio name="jurusan" value="TKJ">Teknik Kelistrikan
<input type=radio name="jurusan" value="AP">Teknik Mesin
</td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>:</td>
<td><input type=radio name=jenis kelamin value=Laki-laki>Laki-laki<input type=radio name=jenis kelamin=Perempuan>Perempuan</td>
</tr>
<td>Alamat</td>
<td>:</td>
<td><input type=textfield name=alamat size=50></td>
</tr>
<tr>
<td>Tempat &amp Tanggal Lahir</td>
<td>:</td>
<td><input type=text
name=Tempat size=15>
<select name=Tanggal>
<option name=Tanggal>Tanggal
<option name=Tanggal>1
<option name=Tanggal>2
<option name=Tanggal>3
<option name=Tanggal>4
<option name=Tanggal>5
<option name=Tanggal>6
<option name=Tanggal>7
<option name=Tanggal>8
<option name=Tanggal>9
<option name=Tanggal>10
<option name=Tanggal>11
<option name=Tanggal>12
<option name=Tanggal>13
<option name=Tanggal>14
<option name=Tanggal>15
<option name=Tanggal>16
<option name=Tanggal>17
<option name=Tanggal>18
<option name=Tanggal>19
<option name=Tanggal>20
<option name=Tanggal>21
<option name=Tanggal>22
<option name=Tanggal>23
<option name=Tanggal>24
<option name=Tanggal>26
<option name=Tanggal>27
<option name=Tanggal>28
<option name=Tanggal>29
<option name=Tanggal>30
<option name=Tanggal>31
</select>
<select name=Bulan>
<option name=Bulan>Bulan
<option name=Bulan>Januari
<option name=Bulan>Februari
<option name=Bulan>Maret
<option name=Bulan>April
<option name=Bulan>Mei
<option name=Bulan>Juni
<option name=Bulan>Juli
<option name=Bulan>Agustus
<option name=Bulan>September
<option name=Bulan>Oktober
<option name=Bulan>November
<option name=Bulan>Desember
</select>
<select name=Tahun>
<option name=Tahun>Tahun
<option name=Tahun>2016
<option name=Tahun>2015
<option name=Tahun>2014
<option name=Tahun>2013
<option name=Tahun>2012
<option name=Tahun>2011
<option name=Tahun>2010
<option name=Tahun>2009
<option name=Tahun>2008
<option name=Tahun>2007
<option name=Tahun>2006
<option name=Tahun>2005
<option name=Tahun>2004
<option name=Tahun>2003
<option name=Tahun>2002
<option name=Tahun>2001
<option name=Tahun>2000
<option name=Tahun>1993
<option name=Tahun>1992
</select>
</td>
</tr>
<tr>
<tr>
<div class="idrakyat-input">
<input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label>
Email
</label>
</div>
<tr>
<td> </td>
<td> </td>
<td><a href="biodatasederhanablogger.html"><input type="submit" name="Submit" value="Submit"> </a>
<input type="reset" name="cancel value="Cancel">
</tr>
</form>
</table>
</body></html>

Langsung saja diterapkan kode diatas ditempat yang anda inginkan yang pastinya kode diatas akan valid disegala jenis template baik bawaan ataupun costum. 

Cara penerapan / pemasangan

Cara penerapan / pemasangan sendiri cukup mudah yaitu hanya menentukan letak pemasangannya ingin diletakkan dimana baik didalam halaman ataupun postingan itu sesuai dengan apa anda ingin menggunakan sebagai apa, kalo mau diberikan warna atau ingin dibentuk dengan model model yang keren bisa dikasih kode CSS yang tentunya tidak akan dibahas disini anda dapat membaca artikel lain untuk mendapatkan kode CSS.

Tips

Kode diatas yaitu kode diatas belum sepenuhnya jadi masih ada banyak hal yang perlu ditambahkan seperti code CSS untuk memberikan warna, efek, dan dll. Dan juga kode diatas apabila diterapkan maka data data tersebut tidak akan terkirim harus menggunakan kode lain seperti PHP dan MYSLQ pada hosting agar form bio data diatas dapat bekerja jadi dengan kata lain bio diatas hanya merupakan kerangka atau contoh saja.

Untuk menerapkannya sendiri kita terlebih dahulu harus memiliki atau menyewa hosting pada web penyedia hosting untuk memprogram form dengan PHP dan MYSLQ agar form dapat terkirim dan digunakan dengan baik, dari pada anda kesulitan membuat form lebih baik untuk membuat form melalui google form ataupun menggunakan layanan lain seperti form builder 123 kedua layanan ini dapat anda gunakan secara gratis ketimbang harus membuat form sendiri yang cara pembuatannya begitu rumit bagi pemula.

Kesimpulan

Bukan hanya pada form ini dan bukan hanya form saja hampir semua yang ada didalam internet yang menggunakan bahasa pengkodean atau sering kita sebut coding itu memerlukan kode lain dalam pembuatannya seperti html, JavaScript, jquery, CSS, dan dll itu memerlukan satu sama lain itu membentuk suatu kesatuan contohnya blogger sering disebut blogger html karena memang blogger menggunakan banyak sekali html bahkan didalam link blogger inilah yang membedakan blogger dengan platform lainya url blogger: https://www.namabloganda.id/tahun/bulan/judul-arikel.html berbeda dengan platform lain seperti wordpress https://www.namabloganda.id/tahun/bulan/judul-artikel atau https://www.namabloganda.id/judul-artikel dari sini kita bisa lihat perbedaan yang cukup besar antara blogger dan wordpress, kembali lagi pada pembahasan awal blogger html meskipun namanya html tetapi blogger tetap menggunakan kode lain seperti CSS, JavaScript, jquery, dan dll karena tanpa kode kode tersebut blogger tidak dapat berjalan dengan baik contohnya CSS apabila dalam pengkodean blogger tidak ada CSS maka didalam blog blogger tidak akan ada warna atau efek, jadi sama hal dengan form biodata yang kita bahas kali ini form biodata tersebut tidak akan berjalan sebelum diberikan kode tambahan seperti PHP dan MYSLQ untuk menunjang kinerjanya.

0 Response to "Cara Membuat Form Biodata Sederhana Dengan Html"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel