IT CORNER

HTML FORM

Kegiatan ekskul pada hari Jum’at, 29 Oktober 2021 dan 5 November 2021.

Halo genss di kegiatan kali ini kita belajar tentang apa itu Form HTML dan bagaimana cara membuat form itu?

Form pada HTML digunakan untuk mengambil data informasi dari pengunjung yang mereka isi pada tabel input, yang mana data itu akan di proses menggunakan program tertentu misalnya seperti PHP. Tapi pada materi kali ini kita hanya membuat sebuah form saja tidak sampai memproses datanya. Tag yang akan digunakan pada pembuatan form HTML adalah  <form> yang didalamnya bisa berupa <input>, <textarea> , <option>, <checkbox> dan <select>. Seperti tabel yang dibawah ini:

HTML Form Atribut :

Atribut Form

HTML Form Elemen :

Elemen Form

HTML Tipe Input:

Tipe Input Form

 

Untuk lebih jelas cara membuat form dengan menggunakan HTML, perhatikan contoh berikut :


<!DOCTYPE html>
<html>
<head>
<title>Form</title>
</head>
<body>
<form>
<fieldset>
<legend>Form</legend>
<table>
<tr>
<td><label for=”username“>Username</label></td>
<td><input type=”textname=”usernameplaceholder=”usernameid=”username“/></td>
<br>
</tr>
<tr>
<td><label for=”password“>Password</label></td>
<td><input type=”passwordname=”passwordplaceholder=”passwordid=”password“/></td>
<br>
</tr>
<tr>
<td><label>Jenis Kelamin </label></td>
<td><input type=”radioname=”jeniskelaminid=”pria“><label for=”pria“>Pria</label>
<input type=”radioname=”jeniskelaminid=”wanita“><label for=”wanita“>Wanita</label></td>
</tr>
<tr>
<td><label >Hobi </label></td>
<td><input type=”checkboxname=”maingameid=”maingame“><label for=”maingame“>Main Game</label>
<input type=”checkboxname=”membacaid=”membaca“><label for=”membaca“>Membaca</label></td>
</tr>
<tr>
<td colspan=”2“><textarea name=”textareaid=”textareacols=”30rows=”3placeholder=”textarea“></textarea></td>
 </tr>
<tr>
<td><label >Kota </label></td>
<td><select name=”” id=””>
<option value=”Bandung“>Bandung</option>
<option value=”Yogyakarta“>Yogyakarta</option>
<option value=”Surabaya“>Surabaya</option>
</select></td>
</tr>
<tr>
<td><button type=”submit“>Kirim</button></td>
<td><button type=”reset“>Reset</button></td>
</tr>
</table>
</fieldset>
</form>
</body>

</html>


Dan gambar di bawah ini adalah hasil dari contoh diatas:

Contoh Hasil Form HTML
Membuat Form pada HTML

Dari contoh diatas merupakan form yang sangat sederhana, biasanya form tampil dengan rapi dan indah dengan menggunakan CSS. Tapi disini saya sengaja menampilkannya murni.

Terima kasih kepada pengunjung yang telah membaca artikel ini ^_^

“We Just Need People Who have Good Attitude”

Leave a Reply

Your email address will not be published.