Contoh Komponen Nama Komponen

Text Field/Text Box

Musik

 Olah Raga

 Membaca Novel Check Box

 Laki – Laki

 PerempuanRadio Button

Text Area

 Musik

 Olah RagaRadio Group

    Jump Menu

  Button

Catatan PentingUntuk lebih lanjut kami jelaskan dalam tehnik mengatur style Form HTML dengan CSS pada Tutorial berikutnya… Fieldset

1. Membuat Text FieldKode 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 BoxKode 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 ButtonKode HTML untuk membuat Radio Button didalam Form adalah sebagai berikut :

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

gusw idy@yahoo.co.id

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

4. Membuat Text AreaKode HTML untuk membuat Text Area didalam Form adalah sebagai berikut :

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

5. Membuat Radio GroupKode 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 MenuKode 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 ButtonKode 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 FieldsetKode 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 ataujavascript form.