1. Memahami tag-tag Form
2. Merancang formulir
Latihan 1.
1. Buka notepad
2. Ketikkan struktur HTML
<Html>
<Head>
<Title>latihan3</Title>
</Head>
<Body>
</Body>
</Html>
|
3. Simpan kode html dengan nama lat3.html
4. Jalankan web browser
5. Buka file lat3.html dari web browser
6. Rancanglah formulir seperti di bawah ini:
LOGIN
User
Password
|
|
7. Rancanglah formulir seperti di bawah ini dalam
format table.
LOGIN
|
||||||
User
|
:
|
|||||
Password
|
:
|
|||||
|
||||||
8.
Save as file lat3.html menjadi lat32.html
9. kode html nya
adalah :
<Html>
<Head>
<Title>Buat Formulir</Title>
</Head>
<Body>
<table align=center bgcolor=pink>
<form>
<tr>
<td colspan=3 align=center>LOGIN</td>
</tr>
<tr>
<td>user</td>
<td> : </td>
<td><input type=text size=15></td>
</tr>
<tr>
<td>Password</td>
<td> : </td>
<td>
<input type=password size=15></td>
</td>
</tr>
<tr>
<td>Genre</td>
<td> : </td>
<td>
<input type=radio name=genre>Perempuan
<input type=radio name=genre>laki-laki
</td>
</tr>
<tr>
<td>Hobby</td>
<td> : </td>
<td>
<input type=Checkbox>swimming
<input type=Checkbox>Football
<input type=Checkbox>Racing
<input type=Checkbox>Shopping
<input type=Checkbox>Boxing
<input type=Checkbox>Singging
</td>
</tr>
<tr>
<td>date of birth</td>
<td> : </td>
<td>
<select>
<option>1</option><option>2</option><option>3</option>
<option>4</option><option>5</option><option>6</option>
<option>7</option><option>8</option><option>9</option>
<option>10</option><option>11</option><option>12</option>
<option>13</option><option>14</option><option>15</option>
<option>16</option><option>17</option><option>18</option>
<option>19</option><option>20</option><option>21</option>
<option>22</option><option>23</option><option>24</option>
<option>25</option><option>26</option><option>27</option>
<option>28</option><option>29</option><option>30</option>
` <option>31</option>
</select>
<select>
<option>January</option><option>February</option><option>Maret</option>
<option>April</option><option>May</option><option>Juni</option>
<option>Juli</option><option>Agustus</option><option>September</option>
<option>Oktober</option><option>November</option><option>Desember</option>
</select>
<select>
<option>1990</option><option>1991</option><option>1992</option>
<option>1993</option><option>1994</option><option>1995</option>
<option>1996</option><option>1997</option><option>1998</option>
<option>1999</option><option>2000</option>
</select>
</td>
</tr>
<tr>
<td>Comment</td>
<td>:</td>
<td>
<textarea cols=50 row=70>
</textarea>
</td>
</tr>
<input type=hidden name=pin value=1221>
<tr>
<td colspan=3 align=center>
<input type=submit value=LOGIN>
<input type=reset value=CANSEL>
</td>
</tr>
</form>
</table>
</Body>
</Html>
<Title>Buat Formulir</Title>
</Head>
<Body>
<table align=center bgcolor=pink>
<form>
<tr>
<td colspan=3 align=center>LOGIN</td>
</tr>
<tr>
<td>user</td>
<td> : </td>
<td><input type=text size=15></td>
</tr>
<tr>
<td>Password</td>
<td> : </td>
<td>
<input type=password size=15></td>
</td>
</tr>
<tr>
<td>Genre</td>
<td> : </td>
<td>
<input type=radio name=genre>Perempuan
<input type=radio name=genre>laki-laki
</td>
</tr>
<tr>
<td>Hobby</td>
<td> : </td>
<td>
<input type=Checkbox>swimming
<input type=Checkbox>Football
<input type=Checkbox>Racing
<input type=Checkbox>Shopping
<input type=Checkbox>Boxing
<input type=Checkbox>Singging
</td>
</tr>
<tr>
<td>date of birth</td>
<td> : </td>
<td>
<select>
<option>1</option><option>2</option><option>3</option>
<option>4</option><option>5</option><option>6</option>
<option>7</option><option>8</option><option>9</option>
<option>10</option><option>11</option><option>12</option>
<option>13</option><option>14</option><option>15</option>
<option>16</option><option>17</option><option>18</option>
<option>19</option><option>20</option><option>21</option>
<option>22</option><option>23</option><option>24</option>
<option>25</option><option>26</option><option>27</option>
<option>28</option><option>29</option><option>30</option>
` <option>31</option>
</select>
<select>
<option>January</option><option>February</option><option>Maret</option>
<option>April</option><option>May</option><option>Juni</option>
<option>Juli</option><option>Agustus</option><option>September</option>
<option>Oktober</option><option>November</option><option>Desember</option>
</select>
<select>
<option>1990</option><option>1991</option><option>1992</option>
<option>1993</option><option>1994</option><option>1995</option>
<option>1996</option><option>1997</option><option>1998</option>
<option>1999</option><option>2000</option>
</select>
</td>
</tr>
<tr>
<td>Comment</td>
<td>:</td>
<td>
<textarea cols=50 row=70>
</textarea>
</td>
</tr>
<input type=hidden name=pin value=1221>
<tr>
<td colspan=3 align=center>
<input type=submit value=LOGIN>
<input type=reset value=CANSEL>
</td>
</tr>
</form>
</table>
</Body>
</Html>
|
<input type=submit>
berfungsi untuk menerima inputan dari form.
<input type=reset>
berfungsi untuk mengosongkan inputan dari form.
|
