Cara Membuat Formulir Pendaftran di HTML

 

Cara Membuat Form Pendaftaran dengan HTML


Untuk membuat form pendaftaran yang sederhana di HTML sangatlah mudah. Ada dua cara yang bisa Anda gunakan, yaitu bisa dengan menggunakan tabel dan juga bisa menggunakan div. Tapi, pada artikel kali ini kita akan membahas bagaimana cara membuat form pendaftaran yang sederhana yaitu dengan menggunakan tabel. Langsung saja, silakan simak langkah-langkahnya di bawah ini.

1. Sebelum membuat tabelnya pastikan berapa kolom dan berapa baris yang ingin Anda buat. Misalnya disini kita akan membuat 9 baris dan 3 kolom. Untuk lebih jelasnya silakan perhatikan script atau kode di bawah ini.

<table>

<tr>
<td></td>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
<td>/td>
</tr>

<tr>
<td></td>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
<td></td>
</tr>

</table>


Nah, untuk membuat tabel pasti Anda menggunakan tag <table>. Sedangkan untuk membuat baris pada tabel Anda menggunakan tag <tr> dan kolom menggunakan tag <td>. Dapat Anda perhatikan pada script di atas, jumlah tag<tr> adalah 9 dan setiap di dalam tag <tr> terdapat tag <td> yang masing-masing berjumlah 3.

2. Lalu selanjutnya silakan Anda isi setiap baris dan kolom sesuai dengan kebutuhan dan keinginan Anda. Umumnya sebuah form terdiri dari, Nama, Tempat Lahir, Tanggal Lahir, Jenis Kelamin, dan lain sebagainya. Dan tentunya ada button untuk simpan dan batal. Untuk contohnya dapat Anda perhatikan pada script di bawah ini.

<table>

    <tr>
    <td>Nama Lengkap</td>
    <td>:</td>
    <td><input type="text"></td>
    </tr>
   
    <tr>
    <td>Tempat Lahir</td>
    <td>:</td>
    <td><input type="text"></td>
    </tr>
   
    <tr>
    <td>Tanggal Lahir</td>
    <td>:</td>
    <td><input type="Date"></td>
    </tr>
   
    <tr>
    <td>Jenis Kelamin</td>
    <td>:</td>
    <td><input type="radio" name='jenis_kelamin' value='pria'/>Pria
    <input type="radio" name='jenis_kelamin' value='perempuan'/>Perempuan</td>
    </tr>
   
    <tr>
    <td>Alamat</td>
    <td>:</td>
    <td><textarea cols="22" rows="3" ></textarea></td>
    </tr>
   
    <tr>
    <td>E-mail</td>
    <td>:</td>
    <td><input type="email"></td>
    </tr>
   
    <tr>
    <td>No Hp</td>
    <td>:</td>
    <td><input type="number"></td>
    </tr>
   
    <tr>
    <td>Kota</td>
    <td>:</td>
    <td><select>
    <option>*****SELECT KOTA*****</option>
    <option>Bogor</option>
    <option>Jakarta</option>
    <option>Bekasi</option>
    <option>Tangerang</option>
    <option>Depok</option>
    <option>cikarang</option>
    <option>Banten</option>
    </select></td>
    </tr>
   
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td><input type="submit" name="submit" value="Simpan"/>
    <input type="reset" name="reset" value="Batal" /></td>
    </tr>
   
    </table>


Hal yang perlu Anda perhatikan saat membuat form pendaftaran:

  • Semua kolom input gunakan tag <input>
  • Untuk Nama dan Tempat Lahir gunakan type=”text”
  • Tanggal Lahir gunakan type=”date”
  • Jenis kelamin gunakan type=”radio” dan tambahkan atribut name. Nilai pada atribut name harus sama, misalnya untuk pria name=”jenis_kelamin” , maka untuk perempuan wajib Anda gunakan nilai yang sama. Karena jika Anda membuat nilai name berbeda, user atau pengguna dapat memilih lebih dari satu jawaban.
  • Alamat gunakan tag <textarea> diikuti dengan jumlah cols dan rows, seperti contoh di atas. Karena biasanya jumlah karakter alamat lebih panjang dari karakter lainnya, jadi lebih baik gunakan tag <textarea> saja.
  • Email gunakan type=”email”
  • No. Hp gunakan type=”number” agar user tidak bisa memasukkan karakter berupa huruf, jadi hanya angka saja yang bisa dimasukkan
  • Untuk kota lebih baik gunakan tag <select> untuk memudahkan pengguna agar dapat langsung memilih kota asalnya dibandingkan harus menuliskannya secara manual.
  • Untuk tombol simpan gunakan type=”submit” dan batal gunakna type=“reset”.

Nah, untuk hasil dari contoh script di atas dapat Anda lihat pada gambar di bawah ini.

membuat form pendaftaran dengan html

Post a Comment

Previous Post Next Post