Membuat Form dengan Tag HTML

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
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.

13 comments for “Membuat Form dengan Tag HTML

  1. 18 Juli 2009 at 23:00

    lha trus nyambungin ke databasenya gimana bos….please kirim ke email saya tutorialnya ya saya bener2 udah bingung nih…thanks a lot..

  2. 2 Agustus 2009 at 15:56

    bagaimana buat page comments seperti ini??
    sedikit kebingungan. !
    terimakasih

  3. 23 Oktober 2009 at 20:36

    I read a few topics. I respect your work and added blog to favorites.

  4. Gusdwi
    18 Mei 2010 at 09:32

    Caranya sangat mudah, tinggal anda masukan alamat directori tempat fhoto itu disimpan.
    Misal: fhoto anda disimpan di “http://namawebsite/images/fhoto-gallery/fhoto-01.jpg” maka dituliskan kode seperti ini:

    atau jika file fhoto tersebut masih dalam satu komputer dengan folder dimana anda membuat halaman web , tulislah kode seperti ini:
    (tapi, sebaiknya anda letakan file fhoto tersebut dalam satu akar dengan folder HTML nya oke!)

  5. 22 Mei 2010 at 11:54

    om, kode html untk bwt biar komentar di web saya bisa diliat ma orang…
    kode html/css’a apa’an???

  6. kakamiax
    12 Juni 2010 at 02:12

    boz, gmn caranya agar komentar2 spt ni postingnya bisa muncul? apa otomatis atau msk ke email yg punya website dulu ato gmn? mohon penjelasannya. thanks.

  7. Fauzi
    20 Juli 2010 at 16:02

    sama dengan pertanyaan kakamiax.
    gmn caranya agar komentar2 spt ni postingnya bisa muncul?

    triesa juga tanya demikian.
    namun saya mw jawabannya bukan menggunakan wordpress atau blogspot bang..tapi saya ingin tau Kode HTML nya bang

    mohon bimbingannya…thanks

  8. 30 Juli 2010 at 00:26

    Trimakasih informasinya…berguna sekali buat saya. Rumusnya mau dicoba !

  9. 30 Juli 2010 at 00:30

    Trimakasih informasinya…saya perlu banget untuk order form. Sekarang saya pakai dari Emailme.com…

  10. Gusdwi
    24 November 2010 at 08:19

    Caranya dengan memakai tag …

  11. 3 Desember 2010 at 20:29

    cara membuat form untuk mengirimnya ke email lengkap dengan file upload nya bagaimana?
    agar admin dan pengisi form bisa menerima laporan

  12. 4 Januari 2011 at 22:56

    sangat bermanfaat.

    mohon di lengkapi yang full dari cara contoh, sampai sampel yang udah jadi dan cara uploadnya atau cara memasang di web

    thanks

  13. 21 Januari 2011 at 11:27

    mantapppppppppppppppppppppppppppppppppppppppppp

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *