PENGANTAR KOMPUTER DAN TI 2C PERTEMUAN 6 FORM & INPUT HTML

Ukuran: px

Mulai penontonan dengan halaman:

Download "PENGANTAR KOMPUTER DAN TI 2C PERTEMUAN 6 FORM & INPUT HTML"

Benny Darmadi
8 tahun lalu
Tontonan:

1 PENGANTAR KOMPUTER DAN TI 2C PERTEMUAN 6 FORM & INPUT HTML

2 FORM Elemen HTML yang digunakan untuk mendapatkan masukan dari pengguna web. Pengguna web dapat memasukkan 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 ke server dalam satu saat.

3 FORM Kegunaan Form : memperoleh data-data user baik nama, alamat dan data lainnya untuk mendaftar pada service yang di sediakan. memperoleh informasi pembelian secara online memperoleh feedback dari user mengenai website anda.

4 Element Form Sintaks: <FORM ACTION= url_ METHOD= get post ENCTYPE= > </FORM> MIME => Multipurpose Internet Mail Extension Fungsi MIME digunakan sebagai mekanisme transfer/pengiriman berbagai macam data pada web/ seperti audio video, aplikasi, gambar, text file dll agar browser tidak salah menterjemahkan konten yang akan diterima.

5 Jenis Masukan dalam Form/Formulir Text, digunakan untuk memasukkan suatu nilai untuk dikirmkan kepada server. Nilai yang dimasukkan dapat berupa angka ataupun teks. Radio, menyediakan beberapa pilihan, hanya satu pilihan yang bias dipilih. Check Box, menyediakan beberapa pilihan, biasanya lebih dari satu pilihan yang dipilih. List, menyediakan pilihan dalam bentuk list pilihan, pilihan yang dipilih dapat lebih dari satu. Button, digunakan untuk mendefinisikan tombol untuk melakukan pemrosesan form. Ada bermacam-macam button, yaitu: Submit: digunakan untuk memanggil URL, setelah input selesai dimasukkan Reset: digunakan untuk menginisialisasi setiap elemen form. Button: digunakan untuk membuat form lebih interaktif, untuk memanggil script yang ada dalam dokumen HTML. Image, digunakan sebagai pengganti button, berupa button yang berbentuk gambar. Text Area, digunakan untuk memasukkan data dalam bentuk teks berupa memo.

HTML Input Element - Text <INPUT TYPE= text NAME= var1 SIZE=# MAXLENGTH=#> Atribut : type, name, size, maxlength, value. Value pada atribut size menunjukkan besar text box.

6 HTML Input Element - Text <INPUT TYPE= text NAME= var1 SIZE=# MAXLENGTH=#> Atribut : type, name, size, maxlength, value. Value pada atribut size menunjukkan besar text box. Value pada atribut maxlength menunjukkan jumlah karakter maksimum yang dapat ditampung. <body> <form action="info.htm" method="post"> Nama : <input type="text" name="nama" size="20"> <br> Hobby : <input type="text" name="hobby" size="20"> <br> <input type="submit" value="kirim"> <input type="reset" value="kosongkan"> </form> </body>

7 HTML Input Element - Radio Atribut : Type, name, value, checked. <body> <form> Jenis Kelamin : <br> <input type="radio" name= jkelamin" value="p" checked> Pria <br> <input type="radio" name="jkelamin value="w"> Wanita <br> </form> </body>

8 HTML Input Element - CheckBox Atribut : Type, Name, Checked. <body> <form> Buah yang anda sukai : <br> <input type="checkbox" name="anggur" checked> Anggur <br> <input type="checkbox" name="jeruk"> Jeruk <br> <input type="checkbox" name="melon"> Melon <br> </form> </body>

9 HTML Input Element Combo Box Perintah : tag <select> <form> Musik yang paling anda sukai : <br> <select name="musik"> <option value="jazz"> Jazz <option value="rock"> Rock <option value="pop"> Pop <option value="lain2"> Lain </select> </form>

HTML Input Element List Box Hampir sama dengan combo, tambahan : size= jml_yg_ditampilkan <form> Musik yang paling anda sukai : <br> <select name="musik" size="2"> <option value="jazz" selected> Jazz

10 HTML Input Element List Box Hampir sama dengan combo, tambahan : size= jml_yg_ditampilkan <form> Musik yang paling anda sukai : <br> <select name="musik" size="2"> <option value="jazz" selected> Jazz <option value="rock"> Rock <option value="pop"> Pop <option value="lain2"> Lain </select> </form> Value pada atribut size digunakan untuk menampilkan pilihan pada list lebih dari satu. Default adalah satu pilihan, secara otomatis maka list berupa list box, yang dapat berlaku seperti drop down list box.

$Tag Button <INPUT TYPE= submit > <INPUT TYPE= reset > <html> <head> <title>contoh Button</title> <script language="javascript"> function kirim_form () {window.$

11 HTML Input Element - Button Atribut : type, value, onclick. Tag Button <INPUT TYPE= submit > <INPUT TYPE= reset > <html> <head> <title>contoh Button</title> <script language="javascript"> function kirim_form () {window.alert ("Form telah sukses dikirim"); window.open (" } </script> </head> <body> <form> Klik tombol dibawah ini.<br> <input type="button" value="kirim Form" onclick="kirim_form()"> </form> </body> </html>

12 HTML Input Element Image & File Fungsi utama dari tag input dengan type image adalah memasukkan gambar ke dalam form. Gambar tersebut akan berfungsi sebagai objek form yang bisa di-klik oleh user. Ketika user men-klik gambar tersebut, web browser akan mengirimkan koordinat titik dimana gambar di-klik. Sintaks Input Image: <input type="image" src="source_image" alt="alt_lable"/> Fungsi input type file adalah untuk dapat melakukan upload file. Sintaks Input File: <input type="file" name="file_gambar" accept="image/*">

13 HTML Input Element - TextArea Atribut : cols, rows, name, size. <body> <form> Komentar anda : <br> <textarea name="komentar" rows="5" cols="40"> </textarea> </form> </body>

14 Contoh Script Halaman Form <HTML> <BODY> <FORM ACTION= html_form_cation.asp METHOD= get > <FIELDSET> <LEGEND>Biodata</LEGEND> <P>Input Text<BR> Nama Depan: <INPUT TYPE="text" NAME="firstname"><BR> Nama Keluarga: <INPUT TYPE="text" NAME=lastname"> </P> <P>Saya Suka Buah:<BR> <INPUT TYPE="checkbox" name="tomat">tomat <BR> <INPUT TYPE="checkbox" name="apel">apel </P> <P> Jenis Kelamin:<BR> <INPUT TYPE="radio" CHECKED NAME="sex">Laki-laki<BR> <INPUT TYPE="radio" NAME="sex">Perempuan<BR> Usia:<BR> <INPUT TYPE="radio" CHECKED NAME="usia">Dewasa<BR> <INPUT TYPE="radio" NAME="usia">Anak-anak<BR> </P> </FIELDSET> <P>Merk Mobil yang anda suka:<br> <SELECT NAME="cars"> <OPTION value="volvo">volvo <OPTION value="suzuki">suzuki <OPTION value="bmw">bmw <OPTION value="mercedes">mercedes </SELECT> <P>Text area ini digunakan untuk memasukkan data berupa komentar atau pun<br> catatan lainnya, bersifat mirip artikel.<br> <TEXTAREA ROWS=5 COLS=30>This is a sample text area!</textarea> </P> <P> <INPUT TYPE="button" value="ok Boo"> <INPUT TYPE="reset" value="ressset"> <INPUT TYPE="submit" value="sssubmit"> </P> <BODY> </HTML>

15 OUTPUT

dokumen-dokumen yang mirip

Perancangan & Pemprograman WEB. Pertemuan 4 Materi Formulir &Latihan HTML

Perancangan & Pemprograman WEB Pertemuan 4 Materi Formulir &Latihan HTML Dasar Penggunaan Formulir Untuk membuat formulir maka kita menggunakan tag dan . Dua atribut yang umum digunakan pada