wong banaran: Form dan Input HTML

Pemrogaman WEB dengan HTML, Form dan Input HTML, Method, Jenis Masukkan Dalam Form, Field text, Checkbox, Tombol Radio, Dropdown box sederhana, Dropdown dengan cara Lain, Text Area, Tombol, Fieldset sekitar data, Form dengan field input, Form dengan Check Box, Form dengan Tombol Radio, Mengirim Mail Dari Form, Tag-tag Form

Elemen HTML yang digunakanunutk mendapatkan masukan dari pengguna web. Pengguna web dapat memeasukan input melalui halaman-halaman HTML.

Elemen /tag ini digunakan untuk membatasi input. Dalam satu form dapat terdiri atas beberapa form, akan tetapi hanya satu form yang dapat dikirimkan keserver dalam satu saat.

Form tidak dapat berbentuk nested.

Sintaks:

</form>

Atribut ACTION tempat menspesifikasikan url yang akan digunakan sebagai pemroses field input form.

URL adalah lokasi dokumen yang akan melakukan proses terhadap input dari form

Method

Atribut yang digunakan untuk menyatakan bagaimana masukan-masukan berasal dari form dikirimkan kepada program CGI.

Jenis Masukkan Dalam Form

Jenis masukan dalam satu formulir dibedakan menjadi:

Text, digunakan untuk memasukan suatu nilai untuk dikirimkan kepada server. Nilai yang dimasukkan berupa angka ataupun text.
Radio , menyediakan beberapa pilihan, hanya satu pilihan yang bisa dipilih.
Check box, menyediakan beberapa pilihan, bisa lebih dari satu pilihan yang dipilih
List, menyediakan pilihan dalam bentuk list pilihan, pilihan yang dapat dipilih lebih dari Satu.
Botton, digunakan untik mendefinisikan tombol untuk melakukan pemrosesan form. Ada bermacam-macam button
Submit, digunakan untuk memanggil url, setelah inpit selesai dimasukkan
Reset, digunakan untuk menginisialisasikansetipa elemen form
Button, digunakan untuk membuat form lebuh interaktif, untuk memanggil script yang ada didalam dokumen html
Image, digunakan sebagai pengganti button, berupa button yang berbentuk gambar
Text area, digunakan untuk memasukkan data dalam bentuk text berupa memo

Setiap jenis masukkan dalam formulir mempunyai tag-tag sendiri dengan masing-masing atributnya.

Tag text

Value pada atribut size menunjukkan besr text box. Value pada atribut maxlength menunjukkan jumlah karakter maksimum yang dapat ditampung.

Tag Radio

<input type=”radio”> Pilihan 1

<input type=”radio”> Pilihan 2

<input type=”radio”> Pilihan 3

Tag CheckBox

<input type=”checkbox”> Pilihan

<input type=” checkbox”> Pilihan

Tag Select

<option> Pilihan 1

<option> Pilihan 2

<option> Pilihan 3

</select>

Value pada atribut size digunakan untuk menampilkan pilihan pada list lebih dari satu. Default adalah satu pilihan, secara otomatis maka lis berupa lis list box, yang dapat berlaku seperti drop down list boc.

Tag Button

<input type=”reset”

Tag Image

Text area

Pada setiap elemen dapat diberikan nama, dengan memberikan atribut name, dengan value berupa string yang mendefinisikan nama elemen. Dalam pemrograman sering sebagai nama variable. Nama variable sebaiknya mencerminkan fungsi dari variable tersebut.

Field text

Contoh ini mendemonstrasikan bagaimana membuat field text pada sautu dokumen HTML, tempat pemakai dapat menuliskan teks ke dalam field tersebut.

<!—coba_inputteks.html

<html>

<body>

<form>

Nama depan:

<br>

Nama keluarga:

</form>

</body>

</html>

Checkbox

Contoph ini mendemonstrasikan bagaimana membuat check box pada suatu dokumen HTML, pemakai dapat memilih atau membatalkan pilihan dari checkbox.

<!—coba_inputchekbox.html

<html>

<body>

Saya suka sebuah :

<form>

<input type=”checkbox” name=”tomat”>Tomat

<br>

<input type=”checkbox” name=”apel”>Apel

</form>

</body>

</html>

Tombol Radio

Contoh ini mendemonstrasikan bagaimana membuat tombol radio pada suatu dokumen web, pemakai dapat memilih sebuah tombol radio.

<!—coba_inputradio.html

<html>

<body>

<form>

<input type=”radio” checked name=”Sex”>Laki-laki

<br>

<input type=”radio” name=”Sex”>Perempuan

</form>

<p>

Pada saat seorang pemakai meng-klik pada sebuah tombol radio,tombol menjadi ditandai, dan seluruh tombol lainnya dengan nama yang sama menjadi tidak ditandai.

</p>

</body>

</html>

Pada contoh dibawah ini mendemonstrasikan bagaimana menggunakan tombol radio dalam du group radio terpisah yaitu group sex dan group usia, yaitu dengan memberikan nama yang berbeda bagi setiap group.

<!—coba_inputradio2.html

<html>

<body>

<form>

<input type=”radio” checked name=”Sex”>Laki-laki

<br>

<input type=”radio” name=”Sex”>Perempuan

<br>

<input type=”radio” checked name=”Usia”>Dewasa

<br>

<input type=”radio” name=”Usia”>Anak-anak

</form>

</body>

</html>

Dropdown box sederhana

Contoh ini mendemonstrasikan bagaimana membuat dropdown box sederhana, dropdown box adalah daftar yang dapat dipilih.

<!—coba_inputdropdown.html

<html>

<body>

Merek mobil yang anda suka:

<form>

<option value=”Volvo”>Volvo

<option value=”saab”>Saab

<option value=”fiat”>Fiat

<option value=”audi”>Audi

</select>

</form>

</body>

</html>

Dropdown dengan cara Lain

Contoh ini mendemonstrasikan bagaimana membuat dropdown box sederhana dengan sebuah nilai yang ditentukan sebelumnya.

<!—coba_dropdown2.html

<html>

<body>

Merek mobil yang anda suka:

<form>

<option value=”volvo”>Volvo

<option value=”saab”>Saab

<option value=”fiat” selected>Fiat

<option value=”audi”>Audi

</select>

</form>

</body

</html>

Text Area

Contoh ini mendemonstrasikan bagaimana membuat suatu teks area (sebuah control input dengan multy-line). Dalam suatu teksarea anda dapat menuliskan karakter yang tidak terbatas.

<!—coba_inputtextarea.html

<html>

<body>

<p>Ini contoh menggunakan text area untuk memasukan data berupa komentar atau catatan lainnya, bersifat mirip artikel.

</p>

<form>

Anak-anak sedang bermain bola di halaman

</textarea>

</form>

</body>

</html>

Tombol

Contoh ini mendemonstrasikan bagaimana membuat sebuah tombol pada button and adapt mendefinisikan text yang diinginkan

<!—coba_inputtombol.html

<html>

<body>

<form>

</form>

</body>

</html>

Fieldset sekitar data

Contoh ini mendemonstrasikan bagaimana membuat suatu border dengan caption di sekeliling data anda.

<!—coba_inputfieldset.html

<html>

<body>

Informasi kesehatan

</legend>

<form>

Tinggi : <input type=”text” size=”3”>

Berat :<input type=”text” size=”3”>

</form>

</fieldset>

<p>

Jika tidak ada border maka browser anda versinya terlalu tua!

</p>

</body>

</html>

Form dengan Check Box

Form ini berisi dua checkbox dan sebuah tombol submit.

<!—coba_formcheckbox.html

<html>

<body>

<input type=”checkbox” name=”tomat”>Tomat

<br>

<input type=”checkbox” name=”apel”>Apel

<br>

</form>

<p>

Jika tombol “submit” di-click, maka anda akan mengirimkan data yang diinputkan kepada page baru yang disebut form_action.asp.

</p>

</body>

</html>

Form dengan field input

Contoh ini mendemonstrasikan bagaimana menambah sebuah form ke dalam suatu page. Form berisi suatu field input dan sebuah tombol submit

<!—coba_formteks.html

<html>

<body>

Masukan nama anda:

<br>

</form>

<p>

Jika tombol “Submit” di-click, maka anda akan mengirimkan data yang diinputkan kepada page baru yang disebut html_form_action.asp.

</p>

</body>

</html>

Tag-tag Form

Tag Awal	NN	IE	W3	Kegunaan
<form> <input> <textarea> <label> <fieldset> <legend> <select> <optgroup> <option> <button> <isindex>	3.0 3.0 3.0 3.0 3.0	3.0 3.0 3.0 4.0 4.0 3.0 3.0 4.0	3.2 3.2 3.2 4.0 4.0 4.0 3.2 4.0 3.2 4.0	Definisi form untuk input dari pemakai Definisi sebuah field input Definisi suatu text area (input teks dengan control mutyline) Definisi sebuah labe untuk suatu control Definisi suatu field set Definisi suatu caption untuk suatu field set Definisi suatu list yang dapat dipilih (suatu dropdown box) Definisi suatu grup option Definisi option dalam drop down box Definisi sebuah text box Deprecated. Use <input> instead