HTML Forms and Input


«Previous Lanjut Bab »

Formulir HTML digunakan untuk memilih berbagai jenis input pengguna.


Try-It-Yourself Examples

Text field
Contoh ini menunjukkan cara membuat bidang teks pada halaman HTML. Seorang pengguna dapat menulis teks dalam kolom teks.

Password
Contoh ini menunjukkan bagaimana untuk menciptakan lapangan sandi pada halaman HTML.

(Anda dapat menemukan lebih banyak contoh di bagian bawah halaman ini)


Forms

Suatu bentuk adalah daerah yang dapat berisi elemen form.

Bentuk elemen elemen yang memungkinkan user untuk memasukkan informasi (seperti text field, textarea fields, drop-down, radio button, checkbox, dll) dalam bentuk.

Suatu bentuk didefinisikan dengan tag <form>.

<form>
. .
input elements
. .
</form>

Input

Bentuk yang paling umum digunakan <input> tag adalah tag. Jenis input ditentukan dengan atribut jenis. Yang paling umum digunakan masukan jenis dijelaskan di bawah ini.

Text Fields

Text field yang digunakan ketika Anda menginginkan para pengguna untuk mengetik huruf, angka, dll in a form. dalam formulir.

<form>
First name:
<input />
<br />
Last name:
<input />
</ form>

Tampilannya dalam browser:

First name:
Last name:

Perhatikan bahwa bentuk itu sendiri tidak terlihat. Juga mencatat bahwa dalam kebanyakan browser, lebar dari text field adalah 20 karakter secara default.

Tombol radio

Tombol radio digunakan ketika Anda menginginkan para pengguna untuk memilih salah satu dari sejumlah pilihan.

<form>
<input value=”male” /> Male
<br />
<input value=”female” /> Wanita
</form> </ form>

Tampilannya dalam browser:

Male
Perempuan

Catatan bahwa hanya satu pilihan yang dapat dipilih.

Checkboxes

Kotak centang yang digunakan saat Anda ingin pengguna untuk memilih satu atau lebih pilihan dari sejumlah pilihan.

<form>
Aku punya sepeda:
<input value=”Bike” />
<br />
Aku punya mobil:
<input value=”Car” />
<br />
Aku punya pesawat terbang:
<input value=”Airplane” />
</ form>

Tampilannya dalam browser:

Aku punya sepeda:
Aku punya mobil:
Aku punya pesawat terbang:


Aksi Formulir Atribut dan Submit Button

Ketika pengguna mengklik pada tombol “Submit”, isi formulir dikirim ke server. Bentuk tindakan atribut mendefinisikan nama file untuk mengirim konten ke. File didefinisikan dalam atribut action biasanya melakukan sesuatu dengan input yang diterima.

<form action=”html_form_submit.asp” method=”get”>
Username:
<input />
<input value=”Submit” />
</ form>

Tampilannya dalam browser:

Username:

Jika Anda mengetik beberapa karakter dalam kolom teks di atas, dan klik tombol “Submit”, browser akan mengirimkan masukan Anda ke halaman yang disebut “html_form_submit.asp”. Halaman akan memperlihatkan kepada anda menerima masukan.


More Examples

Checkboxes
Contoh ini menunjukkan cara membuat kotak centang pada halaman HTML. Seorang pengguna dapat memilih atau hapuskan tanda kotak centang.

Radio buttons
Contoh ini menunjukkan cara membuat tombol radio pada halaman HTML.

Drop down box sederhana
Contoh ini menunjukkan cara membuat sederhana kotak drop-down pada halaman HTML. Sebuah kotak drop-down daftar yang dapat dipilih.

Lain drop down box
Contoh ini menunjukkan cara membuat sederhana kotak drop-down dengan pra-nilai yang dipilih.

Textarea
Contoh ini menunjukkan cara membuat Seorang pengguna dapat menulis teks dalam teks-daerah. Dalam teks-area yang Anda dapat menulis jumlah karakter terbatas.

Buat tombol
Contoh ini menunjukkan cara membuat tombol. Pada tombol Anda dapat menentukan teks Anda sendiri.

Fieldset sekitar data
Contoh ini menunjukkan cara menggambar perbatasan dengan keterangan di sekitar data Anda.

Form Examples

Formulir dengan input field dan sebuah tombol submit
Contoh ini menunjukkan bagaimana cara menambahkan sebuah form ke halaman. Bentuk berisi dua input field dan sebuah tombol submit.

Formulir dengan kotak centang
Formulir ini berisi tiga kotak centang, dan tombol kirim.

Form dengan tombol radio
Formulir ini berisi dua tombol radio, dan tombol kirim.

Kirim e-mail dari suatu bentuk
Contoh ini menunjukkan bagaimana untuk mengirim e-mail dari formulir.


Form Tags

Tag Deskripsi
<form> Mendefinisikan bentuk input pengguna
<input> Mendefinisikan sebuah field input
<textarea> Mendefinisikan sebuah text-area (a multi-line text input control)
<label> Mendefinisikan sebuah label untuk kontrol
<fieldset> Mendefinisikan fieldset
<legend> Mendefinisikan keterangan untuk sebuah fieldset
<select> Mendefinisikan sebuah daftar dipilih (drop-down box)
<optgroup> Mendefinisikan grup pilihan
<option> Mendefinisikan suatu pilihan dalam menu drop-down box
<button> Mendefinisikan sebuah tombol
<isindex> Deprecated. Gunakan <input> sebaliknya
«Previous Lanjut Bab »

  1. Mei 6, 2013 pukul 6:40 pm

    I like to all a touch of shade when taking care of Christmas card
    “envelopes”. Is it tough to include a small “clip art” sweet walking cane or Christmas Bells or Minature Christmas plant when using tags?
    Think I will certainly begin using labels this year.

    Many thanks!
    Ellen.

  2. Mei 9, 2013 pukul 9:30 pm

    Hi! Someone in my Myspace group shared this website with us so I came to give it
    a look. I’m definitely loving the information. I’m bookmarking and will be tweeting this
    to my followers! Superb blog and great style and design.

  1. No trackbacks yet.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: