Wednesday, November 9, 2016

Kode html membuat formulir vertikal dan harizontal

Advertisement

1)     Format formulir secara horisontal


Untuk membuat tampilan dari sebuah form menjadi lebih tertata dengan rapi, umumnya digunakan elemen HTML <table> untuk memformat form tersebut. Secara umum layout dari form adalah layout horizontal, yakni layout dimana setiap input ditempatkan di samping dari label keterangan masing- masing input tersebut. Berikut ini adalah contoh dari penggunaan elemen <table> untuk memformat tampilan form secara horizontal :

<html>
<head><title>CONTOH TAG FORM</title></head>
<body>
<form method="Post">
<table border=0 width="75%">
 <tr>
  <td width="25%">NPM</td>
  <td><INPUT TYPE="TEXT" Name="NPM" MAXLENGTH="10" SIZE="11"></td>
 </tr>
 <tr>
  <td width="25%">Nama Mahasiswa</td>
  <td><INPUT TYPE="TEXT" Name="NamaMHS" MAXLENGTH="25" SIZE="25"></td>
 </tr>
 <tr>
  <td width="25%">Alamat</td>
  <td><INPUT TYPE="TEXT" Name="Alamat" MAXLENGTH="50" SIZE="40"></td>
 </tr>
 <tr>
  <td width="25%">Jenis Kelamin</td>
  <td><INPUT TYPE="RADIO" Name="Jenkel" CHECKED VALUE="Laki2">Laki-laki
      <INPUT TYPE="RADIO" Name="Jenkel" VALUE="Perempuan">Perempuan
  </td>
 </tr>
 <tr>
 <tr>
  <td width="25%">Jurusan</td>
  <td><SELECT Name="Jurusan">
              <OPTION VALUE="KA">Komputer Akuntansi
              <OPTION VALUE="MI">Manajemen Informatika
              <OPTION VALUE="TK">Teknik Komputer
         </SELECT>
  </td>
 </tr>
 <tr>
  <td width="25%">Fasilitas</td>
  <td><INPUT TYPE="CHECKBOX">Flash Disk</td>
 </tr>
 <tr>
  <td></td><td><INPUT TYPE="CHECKBOX">Bakal Baju</td>
 </tr>
 <tr>
  <td></td><td><INPUT TYPE="CHECKBOX">Bakal Jas</td>
 </tr>
  <td></td>
  <td><INPUT TYPE="SUBMIT" VALUE="Simpan">  
  <INPUT TYPE="RESET" VALUE="Batal">
  </td>
 </tr>
</table>
</form>

Note : Teks berwarna merah diatas bisa anda sesuaikan dengan keinginan.


Dan berikut ini adalah tampilan dari form yang telah di tulis di atas :





2)     Format formulir secara vertikal


Sejalan dengan perkembangan teknologi mobile, halaman web yang berbasis mobile tentunya sebuah halaman web di dalam perangkat mobile akan memerlukan form di dalam menerima input dari pengguna. Untuk menyesuaikan dengan lebar layar dari perangkat mobile, misalkan handphone ataupun ipad, maka layout dari sebuah halaman web harus disesuaikan, termasuk juga untuk layout dari sebuah form. Umumnya apabila sebuah form akan digunakan pada aplikasi mobile, layout yang diterapkan adalah layout secara vertikal, sesuai dengan karakteristik layar yang tidak terlalu besar. Berikut ini adalah contoh dari sebuah form dengan layout vertikal.

<!DOCTYPE html>
<html>
<head>
<title>cek form </title>
</head>
<body>
<FORM METHOD="POST" ACTION="mailto:teknisi@jardiknas.org">
   <H4>FORM DATA SISWA</H4>
   <INPUT TYPE="text" NAME="var1" SIZE="30" VALUE="Masukan nama.">
   <BR><BR>
   <B>Apakah Anda Siswa?</B>
   <INPUT TYPE="checkbox" NAME="var2">
   <BR><BR>
   <B>Berapa umur Anda?</B>
   <BR>
   <INPUT TYPE="radio" NAME="var3" VALUE="r1">10 - 15
   <BR>
   <INPUT TYPE="radio" NAME="var3" VALUE="r2">16 - 20
   <BR>
   <INPUT TYPE="radio" NAME="var3" VALUE="r3">21 - 25
   <BR><BR>
   <INPUT TYPE="submit" NAME="var4" VALUE="Kirim">
   <INPUT TYPE="reset" NAME="var5" VALUE="Hapus">
</form
</body>
</html>

Note : Teks berwarna merah diatas bisa anda sesuaikan dengan keinginan.

Dan hasil dari halaman form yang telah ditulis di atas adalah sebagai berikut :



Artikel Terkait

Silahkan berkomentar dengan sopan sesuai topik yang dibahas. Mohon tidak meninggalkan URL. Silahkan berkomentar dengan sopan serta sesuai topik dan dimohon untuk tidak meninggalkan link aktif.

Terima Kasih.

EmoticonEmoticon