×

Cara Membuat Form Pada HTML

Share this article with your friends

Form digunakan untuk input data/entri data. Di dalam html terdapat beberapa control form
yg dapat digunakan, seperti control text box, list box, password box, text area box, radio
button, check box, reset button, submit button, hidden field, file select.

Untuk membuat form dalam HTML kita cukup menambahkan tag <form>...</form> diantara
tag <body>...</body>.

Contoh form :

image

Script HTML Form :

<html>
  <head><title>membuat form</title></head>
   <body bgcolor="grey">
    <form>
     <table border="1" width="50%">
      <caption><h2>BIODATA</h2></caption>
       < tr>
        <td>Name</td>
        <td>:</td>
        <td><input type="text" name="name"></td>
       </tr>
       < tr>
        <td>NIM</td>
        <td>:</td>
        <td><input type="text" name="nim"></td></tr>
       < tr>
        <td>Birthday</td>
        <td>:</td>
        <td> <select>
         <option value="pilih">Day</option>
         <option value="pilih">1</option>
         <option value="pilih">2</option>
         <option value="pilih">3</option>
         <option value="pilih">4</option>
         <option value="pilih">5</option>
         <option value="pilih">6</option>
         <option value="pilih">7</option>
         <option value="pilih">8</option>
         <option value="pilih">9</option>
         < option value="pilih">10</option>
         <option value="pilih">11</option>
         <option value="pilih">12</option>
         <option value="pilih">13</option>
         <option value="pilih">14</option>
         <option value="pilih">15</option>
         <option value="pilih">16</option>
         <option value="pilih">17</option>
         <option value="pilih">18</option>
         <option value="pilih">19</option>
         <option value="pilih">20</option>
         <option value="pilih">21</option>
         <option value="pilih">22</option>
         <option value="pilih">23</option>
         <option value="pilih">24</option>
         <option value="pilih">25</option>
         <option value="pilih">26</option>
         <option value="pilih">27</option>
         <option value="pilih">28</option>
         <option value="pilih">29</option>
         <option value="pilih">30</option>
         <option value="pilih">31</option>
        </select>
        <select>
         <option value="pilih">Month</option>
         <option value="pilih">Januari</option>
         <option value="pilih">Februari</option>
         <option value="pilih">Maret</option>
         <option value="pilih">April</option>
         <option value="pilih">Mei</option>
         <option value="pilih">Juni</option>
         <option value="pilih">Juli</option>
         <option value="pilih">Agustus</option>
         <option value="pilih">September</option>
         <option value="pilih">Oktober</option>
         <option value="pilih">November</option>
         <option value="pilih">Desember</option>
        </select>
        <select>
         <option value="pilih">Year</option>
         <option value="pilih">1989</option>
         <option value="pilih">1990</option>
         <option value="pilih">1991</option>
         <option value="pilih">1992</option>
         <option value="pilih">1993</option>
         <option value="pilih">1994</option>
         <option value="pilih">1995</option>
         <option value="pilih">1996</option>
         <option value="pilih">1997</option>
         <option value="pilih">1998</option>
         <option value="pilih">1999</option>
         <option value="pilih">2000</option>
         <option value="pilih">2001</option>
         <option value="pilih">2002</option>
         <option value="pilih">2003</option>
         <option value="pilih">2004</option>
         <option value="pilih">2005</option>
         <option value="pilih">2006</option>
         <option value="pilih">2007</option>
         <option value="pilih">2008</option>
         <option value="pilih">2009</option>
         <option value="pilih">2010</option>
         <option value="pilih">2011</option>
         <option value="pilih">2012</option>
         <option value="pilih">2013</option>
         <option value="pilih">2014</option>
         <option value="pilih">2015</option>
        </select></td>
      </tr>
      <tr>
       <td>Agama</td>
       <td>:</td>
       <td>
       <input type="checkbox" name="Agama" value=Islam>Islam
       <input type="checkbox" name="Agama" value=Kristen>Kristen
       <input type="checkbox" name="Agama" value=hindu>Hindu
       <input type="checkbox" name="Agama" value=Budha>Budha
       <input type="checkbox" name="Agama" value=Etc>Etc
       </td>
      </tr>      
      <tr>
       <td>Genre</td>
       <td>:</td>
       <td><input type="radio" name="Genre" value=Male>Male
       <input type="radio" name="Genre" value=Female>Female</td>
      </tr>
      <tr>
       <td>Status</td>
       <td>:</td>
       <td>
        <select>
         <option value="pilih">Change Your Status</option>
         <option value="pilih">Maried</option>
         <option value="pilih">Single</option>
        </select>
       </td>
     </tr>
     <tr>
      <td>Job</td>
      <td>:</td>
      <td>
       <select>
        <option value="pilih">Change Your Job</option>
        <option value="pilih">PNS</option>
        <option value="pilih">Farmer</option>
        <option value="pilih">Student</option>
        <option value="pilih">etc</option>
       </select>
      </td>
     </tr>
     <tr>
      <td>Address</td>
      <td>:</td>
      <td><textarea rows="5" cols="50">Your Address</textarea></td>
     </tr>
      <td>Hoby</td>
      <td>:</td>
      <td>
       <select>
        <option value="pilih">Change Your hoby</option>
        <option value="pilih">Sport</option>
        <option value="pilih">Travelling</option>
        <option value="pilih">Reading</option>
        <option value="pilih">Etc</option>
       </select>
      </td>
     <tr>
      <td>No.Telepon/HP</td>
      <td>:</td>
      <td><input type="Text" name="tlpn"></td>
     </tr>
     <tr>
      <td>Password</td>
      <td>:</td>
      <td><input type="password" name="pwd"></td>
     </tr>
     <tr>
      <td colspan="3">
       <input type="Submit" value=Submit>
       <input type="reset" value=Cancel>
       </td>
     </tr>
    </table>
   </form>
  </body>
< /html>

1 Response to "Cara Membuat Form Pada HTML"

  1. banyak juga kode HTMLnya,jadi sedikit pusing lihatnya
    Makasih infonya

    ReplyDelete