Belajar HTML : Cara Membuat Form di HTML

Yah, Kali ini saya akan mengajak kalian sekaligus pengingat untuk penulis sendiri tentang Code Membuat Form di HTML.
Di Internet, Form digunakan untuk memasukan data-data tertentu untuk disimpan, diolah ataupun diubah menjadi data dalam bentuk data yang lain, seperti Form Pendaftaran pada Facebook yang mana data yang dimasukan dalam Form tersebut akan diolah, disimpan lalu ditampilkan kembali. Sama seperti halnya Form yang akan kita pelajari sekarang, oke langsung saja ke T.....K.....P..!

Cara Membuat Form di HTML

Sebelum memulai, alangkah baiknya saya beritahukan dulu element/tag dasar dari Form ini, yaitu <form></form>.



<form> adalah tag dasar dari Form di HTML, yang kemudian akan ada tag  diantara <form></form> , yang akan menjadi tempat dari element-element form nantinya adalah >input<

1.Oke, yang pertama adalah jenis type TEXT, type ini adalah type tempat kita memasukan data berupa text yang akan kita ketik sendiri, contohnya sebagai berikut :

<form>
    <input name="nama" type="text" value="ArKa-TKJ">
</form>


dari kode diatas, terlihat beberapa element, seperti Type, Name dan Value, Type adalah element yang menentukan type apakah Form Input kali ini, Name digunakan untuk menentukan dimana isi dari input type ini akan digunakan dan Value adalah kata yang akan muncul saat Form di HTML ini dieksekusi atau dijalankan di browser.

Contoh Form Type Text di HTML

2.Yang kedua adalah jenis type Radio, Radio adalah type input yang digunakan untuk memilih 1 pilihan yang kita sediakan, seperti misalnya jenis kelamin, apakah akan diisi dengan Laki-laki atau Perempuan, berikut contohnya :

<form>
Jenis Kelamin

    Pria<input name="Jenis_Kelamin" type="radio" value="Pria">
    Wanita<input name="Jenis_Kelamin" type="radio" value="Wanita">
</form>

terlihat sedikit perbedaan dari type Text, untuk type sama seperti yang pertama, yaitu untuk menentukan jenis Inputnya, Name untuk menentukan dimana akan digunakannya dan Value adalah isi dari input tersebut. Jika kita ingin menambahkan pilihannya, kita harus membuat <input> nya lagi.

Contoh Form Type Radio di HTML

3.Selanjutnya adalah CheckBox, Type ini adalah type yang mengizinkan kita memilih lebih dari 1 pilihan, berbeda dengan type Radio yang hanya membolehkan 1 pilihan, type input ini digunakan seperti pada pilihan Hobi yang mana kita dapat memilih lebih dari 1 Hobi, ini dia contohnya :

<form>
Hobi :

    Lari<input name="hobi" type="checkbox" value="Lari">
    Renang<input name="hobi" type="checkbox" value="Renang">
</form>

sepertinya saya tidak perlu lagi menjelaskan Type, Name dan Valuenya, input type ini juga dapat di tambah dengan menambahkan <input> nya. owh iya, saya hampir lupa, tanda "_" (Garis Bawah) yang ada didalam value hanyalah pemisah antara 1 kata dengan kata yang lain, karena jika digunakan spasi, maka hasilnya tidak akan berjalan, bisa juga menggunakan penghubung yang lain, seperti "-" dan "." (Strip dan Titik), hal ini berlaku untuk semua Typenya tanpa terkecuali.

Contoh Form Type Checkbox di HTML

4.Yang keempat adalah Type Hidden, dari namanya saja sudah kita ketahui yaitu Tersembunyi, tetapi saya juga masih bingung untuk apa memasukan kata-kata dalam input type ini, jika tidak ingin terlihat bukankah cukup untuk tidak dituliskan saja ? tapi tidak apalah, namanya juga belajar, ini contohnya :

<form>
    <input name="Sembunyikan" type="hidden" value="Teks disini tidak akan terlihat">
</form>

kata atau teks yang ada di Value tidak akan muncul di web browser saat di eksekusi.

5.Nah, yang ini adalah Type Submit, type submit digunakan untuk mengirim semua data yang telah kita isi di form lainnya, berikut contohnya :

<form>
    <input type="submit" value="submit">
</form>

Value akan muncul sebagai kata-kata pada tombolnya saat di eksekusi. Untuk type ini, element value tidak di isi juga tidak apa, karena akan otomatis bertuliskan "Submit", tetapi akan berbeda jika element value diisi dengan kata yang berbeda.

Contoh Form Type Submit di HTML

6.Yang ini adalah Type Reset, type ini akan menghapus semua data yang kita isi pada input lainnya, ini contohnya :

<form>
    <input type="reset" value="Ulangi">
</form>

sama seperti input Submit, Element Value tidak terlalu diperlukan karena akan otomatis berisi kata Reset.

Contoh Form Type Reset di HTML

7.Kemudian adalah type Button, type ini adalah sebuah tombol, seperti halnya reset dan submit, ini dia contohnya :

<form>
    <input type="button" value="Tombol">
</form>

Value juga tidak terlalu dibutuhkan, karena akan bertuliskan Button jika tidak di isi dan bertuliskan Tombol jika menggunakan kode diatas.

Contoh Form Type Button di HTML

8.Sekarang adalah Textarea, TextArea biasa digunakan untuk menceritakan, mengatakan atau menuliskan kata dan kalimat yang panjang seperti Menjelaskan tentang diri kita dan Komentar, Kodenya Sebagai Berikut :

<form>
Tentang Anda :<br>
<TextArea Name="Tentang_Anda" cols="50" rows="5">test</textarea>
</form>

Tyep ini tidak menggunakan input, entah kenapa begitu, rows dan cols digunakan untuk mengatur ukuran dari Textarea tersebut, biasa disebut Panjang dan Lebarnya.

Contoh Form Type TextArea di HTML

9.Terakhir adalah type Select, Type select digunakan untuk memilih sebuah pilihan, type ini mirip dengan Radio, bedanya type ini akan mengeluarkan Drop Down, yaitu pilihan yang hanya bisa memilih 1 pilihan saja tetapi pilihan akan muncul kebawah, berikut contohnya :

<form>
Agama <select name="Agama"></select>
                 <option name="Islam">Islam </option>
                 <option name="Khatolik">Khatolik</option>
                 <option name="Kristen">Kristen</option>
                 <option name="Hindu">Hindu</option>
                 <option name="Budha">Budha</option>
</form>


untuk menambahkan pilihan Drop Downya, kita hanya perlu menambahkan <option>nya saja.</option>

Contoh Form Type Select di HTML

Saya memiliki Contoh Form Pendaftaran Online dengan HTML, form ini saya buat karena tugas dari sekolah,

Contoh Formulis Pendaftaran Online

jika anda berminat dengan Contoh Form Pendaftaran Online dengan HTML, silahkan tinggalkan komentarnya ^_^