Monday, August 13, 2018

Cara Membuat Rapi Form Input Data

Kali ini saya akan membagikan cara membuat sebuah form html yang rapi dan tertata. Tidak berantakan posisi dan susunannya. Form yang rapi sangatlah penting, karena ini akan menjadi nilai tarik sendiri pagi pengguna nantinya. Form yang cantik tapi tidak rapi akan sia-sia.

Ok... jika sobat-sobat ingin membuat form input yang rapi. Saya kasih bocoran nih, yaitu dengan bantuan tag <table>. Loh kok tag table kan untuk membuat table? Yap anda benar. Kenapa tidak CSS saja? Perlu saya ingatkan, pada dasarnya IdCSS itu berguna untuk mempercantik saja, namun untuk menyusun sebuah form-form input tidak optimal. Itu makanya saya bagikan dengan menggunakan tag <table>. Dan saya sendiri ya tentunya sampai saat ini memakai bantuan tag <table> tersebut.

Ok kita kenali terlebih dahulu bagian dari tag <table>.

kita bisa membuat menu atau botton membuka halaman baru pada tab baru agar halaman yang anda buka tidak terbuka karena ingin membuka halaman baru.

Baca : Membuat Menu Button dan Link Membuka di Tab Baru

Harus dimulai dengan Tag <table> dan diakhiri dengan </table>. Form yang akan kita rapikan atau kita buat berada diatanara <table> dan </table> (ditengahnya). Bagian dari table ada <tr> dan <td>, keduanya membutuhkan penutup </tr> dan </td> apabila di gunakan. untuk <tr> berguna untuk membuat row atau baris, sedangkan <td> berguna untuk mebuat colom.

Perhatikan scipt berikut ini :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body bgcolor="#00FF00">
<form action="simpan.php" method="get">
<h2 align="center"><font color="#FF0000" style="alignment-baseline:" ><i><u>Input Data Mahasiswa </u></i></font></h2>
<table border="0" align="center">
<tr><td>NIM </td><td><input type="text" name="nim" size="10"/></td></tr>
<tr><td>Nama</td> <td><input type="text" name="nama" size="30" /></td></tr>
<tr><td>Jeni Kelamin</td> <td><input type="radio" name="jenis_kelamin" value="laki-laki" />
Laki-laki<input type="radio" name="jenis_kelamin" value="perempuan" /> 
Perempuan</td></tr>
<tr><td>TTL </td> <td><input type="text" name="tempat" size="10"><input type="date" size="30" name="ttl" /></td></tr>
<tr><td>Agama </td> <td><select name="agama">
   <option value="Kristen"> Kristen</option>
            <option value="Islam"> Islam</option>
            <option value="Budha"> Budha</option>
            <option value="Hindu" selected> Hindu</option>
            </select></td></tr>
<tr><td>Alamat </td> <td><textarea name="alamat" row="5" cols="31"></textarea></td></tr>
<tr><td>Hobby </td> <td><input type="text" size="30" name="hobby" /></td></tr>
<tr><td></td><td><input type="submit" Value="Submit" align="right"><input type="reset" Value="Clear" ></td></tr>
</table>
</form>
</body>
</html>

Script diatas telah saya berikan atau rapikan dengan menggunakan tag <table>, anda bisa perhatikan posisi peletakan dari tag <tr> dan <td>. Anda bisa mengcopy script tersebut kedalam aplikasi dreamweaver, dan pilih mode split, sehingga apa bila anda bingung dengan bagian tertentu anda bisa langsung kliik dan melihat posisi scriptnya.

Baca Juga : Membuat Teks Berjalan di HTML dan PHP

Hasil dari scrip tersbut seperti gambar dibawah ini



Untuk Lebih Berkesa, ayok buat icon atau gambar pengganti botton submit atau clear dengan script yang sangat mudah


Ini adalah form input data mahasiswa, dan bisa anda lihat bahwa tidak berantakan susunanya dan tampak sejajar. 

Maka perhatikan sciprt dibawah ini

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body bgcolor="#00FF00">
<form action="simpan.php" method="get">
<h2 align="center"><font color="#FF0000" style="alignment-baseline:" ><i><u>Input Data Mahasiswa </u></i></font></h2>

NIM <input type="text" name="nim" size="10"/>
Nama<input type="text" name="nama" size="30" />
Jeni Kelamin<input type="radio" name="jenis_kelamin" value="laki-laki" />
Laki-laki<input type="radio" name="jenis_kelamin" value="perempuan" /> 
Perempuan
TTL <input type="text" name="tempat" size="10"><input type="date" size="30" name="ttl" />
Agama <select name="agama">
   <option value="Kristen"> Kristen</option>
            <option value="Islam"> Islam</option>
            <option value="Budha"> Budha</option>
            <option value="Hindu" selected> Hindu</option>
            </select>
Alamat<textarea name="alamat" row="5" cols="31"></textarea>
Hobby <input type="text" size="30" name="hobby" />
<input type="submit" Value="Submit" align="right"><input type="reset" Value="Clear" >
</form>
</body>
</html>
Maka tampilan yang akan dihasilkan dari script daiatas sialah sebagai berikut ini


Ouwh... sangat berantakan bukan? Ini jelas sekali sebuah blunder fatal apabila sebuah form tidak rapi dan tidak tertata baik. Bagaimana kalau kita gunakan tag <br> untuk menurunkan atau meng-enterkan baris? Coba perhatikan script dibawah ini;

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body bgcolor="#00FF00">
<form action="simpan.php" method="get">
<h2 align="center"><font color="#FF0000" style="alignment-baseline:" ><i><u>Input Data Mahasiswa </u></i></font></h2><b>

NIM <input type="text" name="nim" size="10"/><br>
Nama<input type="text" name="nama" size="30" /><br>
Jeni Kelamin<input type="radio" name="jenis_kelamin" value="laki-laki" />
Laki-laki<input type="radio" name="jenis_kelamin" value="perempuan" /> 
Perempuan <br>
TTL <input type="text" name="tempat" size="10"><input type="date" size="30" name="ttl" /><br>
Agama <select name="agama">
   <option value="Kristen"> Kristen</option>
            <option value="Islam"> Islam</option>
            <option value="Budha"> Budha</option>
            <option value="Hindu" selected> Hindu</option>
            </select><br>
Alamat<textarea name="alamat" row="5" cols="31"></textarea><br>
Hobby <input type="text" size="30" name="hobby" /><br>
<input type="submit" Value="Submit" align="right"><input type="reset" Value="Clear" >
</form>
</body>
</html>

Scirpt diatas sudah saya beri tag <br> untuk menurunkan atau meng-enterkan input demi input agar tidak sejajar kesamping semua. Namun coba anda perhatikan lagi hasilnya seperti dibawah ini.



Bagaimana menurut anda? Silahkan anda menilainya sendiri. Menurut saya tetap saja ini dikatakan tidak rapi. Silahkan anda memilih.

Agar tidak bisa melakukan submit apabila form masih kosong atau data belum lengkap, maka kita tambahakn attribute Validasi yang simple untuk mencegah form input kosong tetapi di lakukan submit.

Baca : Membuat Validasi Form Input Tidak Boleh Kosong




EmoticonEmoticon