Cara Membuat Form Pada HTML

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>

Subscribe to receive free email updates:

0 Response to "Cara Membuat Form Pada HTML"

Post a Comment

Berkomentarlah dengan sopan