- Chapter 1: Cara Membuat Tulisan Bold, Italic, Larger, smaller, dan Struktur Dokumen Pada HTML.
- Chapter 2: Cara Membuat Headings (h1,h2,h3) dan Horizontal Ruled Lines Pada HTML.
- Chapter 3: Cara Membuat paragraph, Align Attribute, Line Break, dan Preformatted Text Pada HTML.
- Chapter 4: Cara Membuat Center Tag dan Body Attributes Pada HTML
- Chapter 5: Penulisan Font dan Text color di HTML
- Chapter 6: Cara Membuat Tag Links dan Images Pada HTML
- Chapter 7: Cara Membuat List Tulisan Pada HTML
- Chapter 8: Penulisan kode HTML (Clean code), Escape Code, dan Comment Tag Pada HTML
- Chapter 9: Cara Membuat Link Navigasi Dalam 1 Halaman (Navigation Within A Document)
- Chapter 10: Cara Membuat Tag Tables di HTML
- Chapter 11: Cara Membuat Tag Frames (Bingkai) Pada HTML
- Chapter 12: Cara Membuat Meta Tags di HTML yang SEO Friendly
 |
| 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>Perhatikan bahwa setiap input harus memiliki nama yang sama.
<INPUT TYPE=RADIO NAME="POSITION"><BR>
<INPUT TYPE=RADIO NAME="POSITION"><P>
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>
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>
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>
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>
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