Jumat, 21 Maret 2014

Cara Membuat Form

3/21/2014 07:47:00 AM    No comments

   Cara membuat form untuk membuat formulir pendaftaran. Kali ini akan membahas mengenai tag table, tag ini di gunakan agar tampilan web lebih rapi dan tertata. Teman-teman bisa melihat contoh kegunaan tag table seperti ketika membuat email baru, mendaftar akun jejaring sosial dan lain sebagainya. Saat ini sedikit contoh script HTML untuk membuat formulir pendaftaran secara online.




Berikut adalah script pada HTML.

<html>
<head>
  <title>Latihan Membuat Form dengan Table</title>
</head>
<body bgcolor="#00CCCC">
  <h1><p align="center" style="font:'Comic Sans MS'">Formulir Pendaftaran</p></h1>
<table width="446" height="396" border="0" align="center">
<tr>
<td width="91">Nama</td>
<td width="26"><div align="center">:</div></td>
<td width="303"><input name="nama" type="text"></td>
 </tr>
 <tr>
<td>Tempat Lahir</td>
 <td><div align="center">:</div></td>
 <td><input name="tempat lahir" type="text"></td>
 </tr>
 <tr>
 <td>Tanggal Lahir</td>
 <td><div align="center">:</div></td>
 <td> <select name="tgl">
     <option value="1">01 </option>
     <option value="2">02 </option>
     <option value="3">03 </option>
     <option value="4">04 </option>
     <option value="5">05 </option>
     <option value="6">06 </option>
        </select>
<select name="bln">
     <option value="1">01 </option>
     <option value="2">02 </option>
     <option value="3">03 </option>
     <option value="4">04 </option>
     <option value="5">05 </option>
      <option value="6">06 </option>
</select>
 <select name="tahun">
     <option value="1990">1990 </option>
     <option value="1991">1991 </option>
     <option value="1992">1992 </option>
     <option value="1993">1993 </option>
     <option value="1994">1994 </option>
     <option value="1995">1995 </option>
</select>
</td></tr>
<tr>
    <td>Jenis Kelamin</td>
    <td><div align="center">:</div></td>
<td>
     <input type="radio" name="gender" value="Pria">Laki-laki
     <input type="radio" name="gender" value="Wanita">Perempuan
</td> </tr>
<tr>
    <td>Alamat</td>
    <td><div align="center">:</div></td>
    <td><textarea name="alamat" cols="28" rows="4"></textarea></td>
</tr> <tr>
 <td>Kode pos</td>
     <td><div align="center">:</div></td>
     <td><input name="kode pos" type="text"></td>
 </tr>
 <tr>
 <td>Status</td>
   <td><div align="center">:</div></td>
 <td>
  <input type="checkbox" name="status" value="menikah">Menikah
  <input type="checkbox" name="status" value="Blm menikah">Belum Menikah
 </td> </tr>
<tr>
<td>Agama</td>
<td><div align="center">:</div></td>
 <td> <select name="agama">
        <option value="1">Islam </option>
        <option value="2">Kristen </option>
        <option value="3">Khatolik </option>
        <option value="4">Budha </option>
        <option value="5">Hindu </option>
</select></td> </tr>
 <tr>
 <td>Hobby</td>
     <td><div align="center">:</div></td>
     <td><input name="hobby" type="text"></td>
 </tr>
 <tr>
      <td>Jurusan</td>
      <td><div align="center">:</div></td>
 <td>
       <input type="checkbox" name="jurusan" value="1">S1 TI
       <input type="checkbox" name="jurusan" value="2">S1 SI
       <input type="checkbox" name="jurusan" value="3">D3 TI
       <input type="checkbox" name="jurusan" value="4">D3 MI
 </td> </tr>
 <tr>
 <td>Komentar</td>
     <td><div align="center">:</div></td>
     <td><textarea name="komentar" cols="28" rows="5"></textarea></td>
</tr>
</tbody></table>

<table width="450" border="0" align="center"> <tbody>
<tr>
      <td width="332"><marquee direction="left" behavior="scroll" bgcolor="#FF0000" scrollamount="5">Pastikan data yang anda masukkan sudah benar</marquee></td>
      <td width="49"><input type="submit" value="Kirim"></td> <td width="55"><input type="reset" value="Ulangi"></td>
</tr> </tbody>
</table>
</body>
</html>


Dan hasil pada browser sebagai berikut


Latihan Membuat Form dengan Table

Formulir Pendaftaran

Nama
:
Tempat Lahir
:
Tanggal Lahir
:
Jenis Kelamin
:
 Laki-laki Perempuan
Alamat
:
Kode pos
:
Status
:
 Menikah Belum Menikah
Agama
:
Hobby
:
Jurusan
:
 S1 TI S1 SI D3 TI D3 MI
Komentar
:
Pastikan data yang anda masukkan sudah benar
Selamat bereksperimen ^-^

0 Komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)