Dalam dunia web kita sudah tidak asing lagi dengan istilah pendaftaran secara Online, biasanya ketika kita akan melakukan pendaftaran disebuah Website atau pun Aplikasi kita disuguhkan dengan sebuat formulir yang harus kita isi seperti Nama, Alamat, Jenis Kelamin, Tempat lahir, Tanggal lahir, Pendidikan dll.
Lalu bagaimana cara membuat sebuah formulir pendaftaran tersebut? pada postingan kali ini Mimin akan memberikan sedikitnya penjelasan dan contoh yang nantinya temen - temen bisa coba.
Sebelum kita mulai seperti biasa kita harus memahami terlebih dahulu Tag - tag dan Attribut Bahasa Pemrograman HTML yang dapat digunakan sebagai berikut :
A. TAG
- form : untuk membuat sebuah formulir yang menampung semua input yang nantinya akan dikirm keserver web dan disimpan di Database
- input : untuk membuat kotak input, contohnya : untuk memasukan nama, alamat, tempat lahir. tanggal lahir, dll.
- select dan option : untuk membuat input berupa pilihan
- textarea : untuk membuat input berupa teks yang lebih panjang.
B. ATTRIBUT
Selain Tag, Atribut dari tag juga perlu kita pahami sebelum membuat sebuat form, berikut ini atribut dari tag yang biasanya digunakan untuk membuat sebuah form :
- form
- action : untuk mengirimkan isi form ke server melalui sebuah file php
- method : untuk menentukan metode yang akan terjadi apabila form disubmit, get atau post
- dll.
2. input
- type : untuk menetukan type input yang diantaranya adalah : text, password, hidden, radio, checkbox, submit, dll
- name : untuk meberikan nama input
- id : untuk memberikan indentitas input
- maxlength : untuk menentukan panjang karakter yang dapat diinput
- value : untuk memberikan isi/nilai pada input
- dll.
3. select dan option
- name : untuk memberikan nama pada select
- value : untuk memberikan isi/nilai pada option atau pilihan
4. textarea
- name : untuk memberikan nama pada textarea
- rows : untuk menetukan tinggi textarea
- cols : untuk menentukan lebar textarea
Sedikit bekal kita mudah - mudahan cukup untuk membuat sebuah formulir pendaftaran menggunakan HTML, sekarang kita coba membuatnya, silahkan teman - teman copy - paste script dibawah menggunakan aplikasi Notepad, Notepad++ atau Sublime kemudian simpan dengan nama contoh (form pendaftaran.html) kemudian buka dengan Browser Edge, Chrome atau Firefox dan lihat hasilnya.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Formulir </title>
</head>
<body>
<h2 align='center'>BELAJAR MEMBUAT FORMULIR PENDAFTARAN</h2>
<hr>
<table width='450px' border='0' align='center'>
<form action=" simpan.php" method="post">
<tr>
<td>Nama</td><td>:</td><td><input type="text" name="nama" placeholder="Nama Kamu" />
</td></tr>
<tr><td>Tempat Lahir</td><td>:</td><td> <input type="text" name="tmplahir" />
</td></tr>
<tr><td>Tanggal Lahir</td><td>:</td><td> <input type="text" name="tgllahir" />
</td></tr>
<tr><td>Jenis Kelamin </td><td>:</td><td>
<input type="radio" name="jenis_kelamin" value="laki-laki" checked />
Laki - Laki
<input type="radio" name="jenis_kelamin" value="perempuan" />
Perempuan
</td></tr>
<tr><td>Hobi</td><td>:</td><td><input type="checkbox" name="hobi_baca" /> Membaca Buku
<input type="checkbox" name="hobi_nulis" checked /> Menulis
<input type="checkbox" name="hobi_mancing" /> Memancing
</td></tr>
<tr><td>Asal Kota</td><td>:</td><td>
<select name="asal_kota" >
<option value="Kota Jakarta">Jakarta</option>
<option value="Kota Bandung">Bandung</option>
<option value="Kota Lampung">Lampung</option>
<option value="Kota Padang">Padang</option>
<option value="Kota Semarang" selected>Semarang</option>
</select>
</td></tr>
<tr><td>Keterangan</td><td>:</td><td>
<textarea name="keterangan" rows="5" cols="50">
Terangkan seterang - terangnya diri anda
</textarea>
</td></tr>
<tr><td></td><td></td><td align='right'><input type="submit" value="Simpan" >
</td></tr>
</form>
</body>
</html>
Berikut ini hasilnya :
Demikian penjelasan dan contoh yang mimin buat, mudah - mudahan bermanfaat.
Tidak ada komentar:
Posting Komentar