Form adalah salah satu bagian penting dalam sebuah halaman web. Ketika kita mengisi alamat email, mengisi komentar, ataupun kita login pada halaman web, sebenarnya elemen tersebut adalah Form.
Sebelum kita ingin merancang sebuah Form, ada beberapa komponen didalam Form yang harus kita pahami cara pembuatannya menggunakan kode HTML.
Berikut adalah daftar komponent pada Form :

Contoh Komponen	Nama Komponen
	Text Field/Text Box
Musik Olah Raga Membaca Novel	Check Box
Laki – Laki Perempuan	Radio Button
	Text Area
Musik Olah Raga	Radio Group
Belajar HTML Belajar CSS Tutorials CSS	Jump Menu
	Button
Catatan Penting Untuk lebih lanjut kami jelaskan dalam tehnik mengatur style Form HTML dengan CSS pada Tutorial berikutnya…	Fieldset

1. Membuat Text Field

Kode HTML untuk membuat Text Field didalam Form adalah sebagai berikut :

<form>
<input name=”" type=”text” size=”30″ maxlength=”30″ value=”guswidy@yahoo.co.id” />
</form>

2. Membuat Check Box

Kode HTML untuk membuat Check Box didalam Form adalah sebagai berikut :

<form>
<input name=”musik” type=”checkbox” value=”Musik” /> <span>Musik</span>
<input name=”Olah Raga” type=”checkbox” /> <span> Olah Raga</span>
<input name=”Membaca Novel” type=”checkbox” /> <span> Membaca Novel</span>
</form>

3. Membuat Radio Button

Kode HTML untuk membuat Radio Button didalam Form adalah sebagai berikut :

<form>
<input name=”jenis” type=”radio” value=”jenis” /> <span> Laki – Laki</span>
<input name=”jenis” type=”radio” value=”jenis” /> <span> Perempuan</span>
</form>

4. Membuat Text Area

Kode HTML untuk membuat Text Area didalam Form adalah sebagai berikut :

<form>
<textarea cols=”20″ rows=”5″ name=”Komentar”></textarea>
</form>

5. Membuat Radio Group

Kode HTML untuk membuat Radio Group didalam Form adalah sebagai berikut :

<form>
<input id=”RadioGroup1_0″ name=”RadioGroup1″ type=”radio” value=”Musik” /> Musik
<input id=”RadioGroup1_1″ name=”RadioGroup1″ type=”radio” value=”Olah Raga” /> Olah Raga
</form>

6. Membuat Jump Menu

Kode HTML untuk membuat Jump Menu didalam Form adalah sebagai berikut :

<form>
<select id=”jumpMenu” name=”jumpMenu”>
<option value=”http://gusdwi.info/belajar-html”>Belajar HTML</option>
<option value=”http://gusdwi.info/pengenalan-css”>Belajar CSS</option>
<option value=”http://gusdwi.info/format-dasar-css/”>Tutorials CSS</option>
</select>
</form>

7. Membuat Button

Kode HTML untuk membuat Button didalam Form adalah sebagai berikut :

<form>
<input name=”Submit” type=”button” value=”Submit” />
<input name=”reset” type=”button” value=”Reset” />
</form>

8. Membuat Fieldset

Kode HTML untuk membuat Fieldset didalam Form adalah sebagai berikut :

<form>
<fieldset>
<legend>Catatan Penting</legend>
Untuk lebih lanjut kami jelaskan dalam tehnik mengatur style Form HTML dengan CSS pada Tutorial berikutnya…
</fieldset>
</form>

Form-form diatas adalah contoh form yang sederhana, karena dari tag tag html diatas bisa dikembangkan lagi menjadi form dinamis bila digabung dengan form php atau javascript form.

Posting Terkait

• Pengertian Tag Span pada HTML
• Pengertian Div pada HTML
• How to create a link on the html
• Mengatur style table HTML dengan CSS
• Menggabungkan Baris/Kolom pada Table HTML
• Membuat Table dengan tag HTML

-->