Cara Membuat Forms, Radio Button, dan Checkbox Pada HTML | Web Edukasi - Sanabila.com

Home

Daftar Isi

Instagram

Google+

Facebook

Twitter

Contact

Pasang Iklan

Refresh
Loading...

Cara Membuat Forms, Radio Button, dan Checkbox Pada HTML

Cara Membuat Forms, Radio Button, dan Checkbox Pada HTML - Pada chapter Sebelumnya kita sudah membahas tentang :
Selanjutnya, pada artikel ini kita akan belajar tentang Cara Membuat Forms, Radio Button, dan Checkbox Pada HTML.



Cara Membuat Forms, Radio Button, dan Checkbox Pada HTML
Cara Membuat Forms, Radio Button, dan Checkbox Pada HTML


Forms...

Forms memungkinkan Anda untuk menambahkan interaktivitas ke dokumen web Anda dengan cara menambahkan tag <FORM>. Dengan tag form, Anda dapat menambahkan ke halaman web Anda berupa buku tamu, formulir pemesanan, survey, memberikan umpan balik atau apa pun.


Konstruksi dasar tag form html...

  <FORM>    Memulai form
  <INPUT>   meminta informasi di salah satu dari beberapa cara yang berbeda...
  <INPUT>   ...bisa ada banyak daerah input yang Anda inginkan
  </FORM>   form berakhir

Tag <INPUT> artinya adalah bahwa pengguna dapat memasukkan informasi dengan berbagai cara . Ada beberapa jenis dari tag <INPUT>, yaitu:

Form Input...

Text

Yang paling umum bentuk dari TYPE form <INPUT> adalah TEXT. <INPUT TYPE=TEXT>


Setiap input butuh sebuah NAME.
<INPUT TYPE=TEXT NAME="ADDRESS">

ketika user mengisi addressnya (contohnya 89A Pondok cabe ), itu akan menjadi input value dan dipasangkan dengan ADDRESS sehingga hasil akhir setelah menjalankan melalui sistem Mailto Formatter akan menjadi ADDRESS=89A Pondok cabe.


Coba Anda ketik VALUE didalam kode formnya.
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="89A Pondok cabe">

Ini akan otomatis memasangkan nilai 89A Pondok cabe dengan nama ADDRESS, Tidak ada gunanya pengunjung merubah itu. Note- pastikan untuk menggunakan tanda kutip seperti yang telah ditentukan.


Kita bisa menentukan ukuran kotak input teks.
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="89A Pondok cabe" SIZE=10>


<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="89A Pondok cabe" SIZE=20>


<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="89A Pondok cabe" SIZE=30>


Kita juga dapat menentukan berapa banyak karakter input.
Silakan mencoba untuk memasukkan lebih dari 10 karakter dalam kotak teks di bawah ini:

<INPUT TYPE=TEXT NAME="ADDRESS" SIZE=30 MAXLENGTH=10>



TYPE=TEXT Sangat mirip dengan TYPE=PASSWORD. Hal ini persis sama, kecuali dispays *** bukan input yang sebenarnya. Browser akan send input Anda, dan tanda itu tidak akan ter-display.
<INPUT TYPE=PASSWORD>



Ingat bahwa <INPUT> harus mempunyai NAME.
<INPUT TYPE=PASSWORD NAME="USER PASSWORD">
Atribut SIZE, VALUE, dan MAXLENGTH juga bisa dimasukkan. Hanya mengingatkan, bahwa <TAG> akan memberitahu browser untuk melakukan sesuatu.


Radio Buttons dan Check Boxes

Perbedaan radio button dan check boxes adalah bahwa radio button dapat memungkinkan pengguna untuk memilih salah satu dari beberapa pilihan. sedangkan Check Boxes memungkinkan pengguna untuk memilih satu atau lebih atau semua pilihan.


pertama, ayo kita buat Radio Buttons.

<INPUT TYPE=RADIO NAME="POSITION">



Sekarang tambah 2 lagi.
<INPUT TYPE=RADIO NAME="POSITION">
<INPUT TYPE=RADIO NAME="POSITION">
<INPUT TYPE=RADIO NAME="POSITION">



Anda juga bisa membuat radio button terdapat dibawah radio button yang lain.
<INPUT TYPE=RADIO NAME="POSITION"><BR>
<INPUT TYPE=RADIO NAME="POSITION"><BR>
<INPUT TYPE=RADIO NAME="POSITION"><P>


Perhatikan bahwa setiap input harus memiliki nama yang sama.

Setiap Radio Buttons harus diberi VALUE.
<INPUT TYPE=RADIO NAME="POSITION" VALUE="PB"><BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="DBA"><BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="NOTA"><P>





Sekarang label masing-masing tombol.
<INPUT TYPE=RADIO NAME="POSITION" VALUE="PB"> Powerbuilder Developer<BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="DBA"> Database Administrator<BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="NOTA"> None of the above<P>
Powerbuilder Developer
Database Administrator
None of the above

Anda juga dapat memodifikasi label ini dengan tag html lain jika Anda mau.


Pada dasarnya pelajaran tentang membuat Radio Buttons telah selesai. Namun, Anda dapat memodifikasi tombol dengan pilihan default (opsional).
Apa posisi Anda dalam perusahaan?<BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="PB" CHECKED> Powerbuilder Developer<BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="DBA"> Database Administrator<BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="NOTA"> None of the above<P>
Apa posisi Anda dalam perusahaan?
Powerbuilder Developer
Database Administrator
None of the above

Pengguna tentu saja hanya dapat memilih 1 pilihan. Pilihan mereka akan dikembalikan kepada Anda sebagai nama / nilai pasangan POSITION=PB (atau mana yang mereka pilih).


Pembuatan Check Boxes juga hampir sama. pertama mulai dengan:
<INPUT TYPE=CHECKBOX NAME="PB">



Tambahkan 3 lagi, tapi kali ini Anda harus memberikan masing-masing NAME yang berbeda. (Anda juga dapat menambahkan jeda baris jika Anda mau)
<INPUT TYPE=CHECKBOX NAME="PB"><BR>
<INPUT TYPE=CHECKBOX NAME="DBA"><BR>
<INPUT TYPE=CHECKBOX NAME="NOTA"><BR>



Setiap check box memiliki VALUE yang sama.
<INPUT TYPE=CHECKBOX NAME="PB" VALUE="YES"><BR>
<INPUT TYPE=CHECKBOX NAME="DBA" VALUE="YES"><BR>
<INPUT TYPE=CHECKBOX NAME="NOTA" VALUE="YES"><BR>



Note- Dalam Check Boxes perubahan NAME dan VALUE harus sama dan untuk Radio Buttons, VALUE dirubah tapi NAME tetap sama.


OK, mari kita beri label di setiap kotak.
<INPUT TYPE=CHECKBOX NAME="PB" VALUE="YES"> Powerbuilder Developer<BR>
<INPUT TYPE=CHECKBOX NAME="DBA" VALUE="YES"> Database Administrator<BR>
<INPUT TYPE=CHECKBOX NAME="NOTA" VALUE="YES"> None of the above<BR>
Powerbuilder Developer
Database Administrator
None of the above

Dan terakhir, Anda mungkin ingin menambahkan sesuatu di check box Anda dan mungkin Anda ingin memilih beberapa default.
Posisi apa yang Anda tempati dalam perusahaan?<BR>
<INPUT TYPE=CHECKBOX NAME="PB" VALUE="YES" CHECKED> Powerbuilder Developer<BR>
<INPUT TYPE=CHECKBOX NAME="DBA" VALUE="YES" CHECKED> Database Administrator<BR>
<INPUT TYPE=CHECKBOX NAME="NOTA" VALUE="YES"> None of the above<BR>
Posisi apa yang Anda tempati dalam perusahaan?
Powerbuilder Developer
Database Administrator
None of the above

Pengguna dapat memilih 1, 2, tidak memilih atau dapat memilih semua pilihan. Pilihan mereka akan dikembalikan kepada Anda sebagai nama / nilai pasangan...

PB=YES
DBA=YES




Go To Chapter 14: Membuat Pull Down, Scrolling List, dan Textarea

Share on Google Plus
Written by: Sanabila. com
Sanabila, Updated at: 2/15/2015