Modul membuat FORM

tri mardiyanti

Modul membuat FORM

BAB I Menyajikan Komponen Entri Teks Form HTML digunakan untuk memilih pelbagai macam inputan yang disediakan. Data bisa diinputan dalam bentuk textarea, input teks , pilihan radio button, check box dan lain sebagainya. Bentuk inputan tersebut dikemas elemen dalam tag-tag form. Pada kegiatan belajar ini akan mem pelajari inputan text. Komponen text area multiline Komponen text area merupakan area tempat untuk menyimpan text atau tulisan baru, atau bisa dikatakan sebuah komponen HTML yang digunakan untuk menampilkan text dalam bentuk dan format text. Untuk menampung input teks yang panjang dan mungkin tersusun atas lebih dari 1 baris, maka digunakan komponen input ‘textarea’. TEXTAREA dapat digabungkan dengan tag FORM untuk menjadi inputan yang akan diolah oleh file pemroses sebagaimana seperti yang telah dijelaskan pada tag FORM tersebut. Format umum penulisan text area multiline <textarea atribute=”atribute"> Terdapat beberapa atribut dari text area, diantaranya row,col dan lain sebagainya. NAME Atribut ini digunakan untuk meemberikan nama dari TEXTAREA. Atribut ini akan sangat berguna jika tag TEXTAREA digabungkan dengan tag FORM. COLS Atribut COLS digunakan untuk menentukan lebar dari TEXTAREA. Contoh berikut menampilkan 3 komponen textarea dengan lebar textarea bervariasi : <!DOCTYPE html> <html> <head> <title>cek form </title> </head> <body> <p> Silahkan diisi pada teks area yang tersedia</p> <TEXTAREA NAME="rendah" COLS=30 ROWS=5></TEXTAREA> <TEXTAREA NAME="sedang" COLS=30 ROWS=10></TEXTAREA> <TEXTAREA NAME="tinggi" COLS=30 ROWS=20></TEXTAREA> </body> </html> READONLY Atribut ini digunakan agar tulisan yang terdapat didalam TEXT AREA hanya dapat dibaca dan disalin tapi tidak dapat diubah. Contoh : <!DOCTYPE html> <html> <head> <title>cek form </title> </head> <body> <TEXTAREA NAME=”untukdibaca” COLS=40 ROWS=6 READONLY> Tulisan ini tidak dapat diubah tapi bisa disalin. </TEXTAREA> </body> </html> DISABLED Atribut ini digunakan agar tulisan yang terdapat didalam TEXTAREA tidak dapat disalin dan diubah. Contoh : <!DOCTYPE html> <html> <head> <title>cek form </title> </head> <body> <TEXTAREA NAME=”terlarang” COLS=40 ROWS=6 DISABLED> Tulisan ini tidak dapat disalin maupun diubah. </TEXTAREA> </body> </html> Komponen input text password Input tpe ‘password’ ini akan menghasilkan input dengan notasi ’●’. Biasanya input tipe ‘password’ digunakan dalam form untuk masukan kata kunci atau password dari pengguna di dalam form login.Format dari elemen input text password HTML-nya adalah sebagai berikut : <input type=password name=name> <input type=password name=name maxlength=length> <input type=password name=name size=size> <input type=password name=name value=value> Berikut adalah penggalan listing program penulisan form input password, dimana form diberi nama=pwd dengan panjang maximal karakternya adalah 6. <!doctype html> <html> <head> <title>penulisan password </title> </head> <body> <form > Password: <input type="password" name="pwd" maxlength="6"> </form> </body> </html> Komponen input text Komponen input text merupakan komponen untuk memasukan data text ke server dalam bentuk textfield. Format tag HTML-nya adalah sebagai berikut : <INPUT TYPE=TEXT NAME=name> <INPUT TYPE=TEXT NAME=name MAXLENGTH=length> <INPUT TYPE=TEXT NAME=name SIZE=size> <INPUT TYPE=TEXT NAME=name VALUE=value> Berikut contoh listing program yang menggunakan form input Contoh bentuk tampilannya adalah sebagai berikut : <!doctype html> <html> <head> <title>input text</title> </head> <body> <form> Nama : <input type="text" name="nama"><br> Sekolah : <input type="text" name="sekolah"> </form> </body> </html> Pembuatan form biodata dengan input text Berikut ini adalah contoh dari sebuah halaman web yang berisi form yang sederhana : <html> <head> <title> Form 1 </title> </head> <body> <form name=”form1” method=”POST” action=”inputdata.php”> <input name=”negara” value=”Indonesia”> Nama : <input type="text" name="nama"><br><br> Kelas: <input type="text" name="kelas" maxlength="2"><br><br> No : <input type="text" name="nomor" value="10"><br><br> Hobby: <input type="text" name="hobby" size="8"><br><br> Password: <input type="password" name="password"><br><br> <input type="submit" name="submit" value="Submit">   <input type="reset" name="reset" value="Reset"> </form> </body> </html> Pembuatan form dengan elemen fieldset Berikut adalah contoh pembuatan form dengan menggunakan elemen fielsdet serta input form : <!DOCTYPE html> <html> <head><title>Hooya</title></head> <body> <fieldset ><legend>Proses Sign in</legend><td width="256" align="center" valign="top"> <p align="center"><font color="#000000" size="+3">YAHOO! <label for="textfield" ></label></font> <font color="#000000" size="+3"><label for="textfield" ></label></font> <font size="+3"><label for="textfield" ></label></font> <label for="textfield" ></label></p> <p align="center"> <input type="text" name="textfield" id="textfield" value="ID Yahoo" /></p> <p align="center"> <label for="textfield2"></label> <input type="text" name="textfield2" id="textfield2" value="Password" /></p> <p align="center"> <input type="submit" name="button" id="button" value="Sign in" /></p> <p align="center" ><font color="#0000FF">Tidak bisa mengakses account </font></p> <p align="center" ><font color="#0000FF">Bantuan Sign in</font></p> <p align="center">------------Atau ------------ </p> <p align="center"> <input type="submit" name="button2" id="button2" value="Buat Account Baru"/></p> <p align="center">------------------------------</p> <p align="center"> Masuk dengan Facebok atau Google</p><p> </p></td> </fieldset> </body> </html> TUGAS 1 Buatlah dokumen html untuk membuat tampilan form berikut! Buatlah form dengan menggunakan elemen fieldset seperti contoh berikut ini! Test Formatif 1 Jelaskan tentang 6 atribut baru pada komponen textarea html5 ? Bagaimana format penulisan untuk pembuatan textarea multiline ? Bagaimana format penulisan input password ? Bagaimana format penulisan input text hidden ? BAB 2 Menyajikan Komponen Entri Pilihan Form HTML digunakan untuk memilih pelbagai macam inputan yang disediakan. Data bisa diinputan dalam komponen entri pilihan, diantaranya input file, radio button, chexbox, select serta datalist. Komponen input file Komponen input file berfungsi untuk memasukan data file yang dibutuhkan kedalam sistem web yang dibuat. Format tag HTML-nya adalah sebagai berikut : <input type=file name=name accept=mime type list> Name= “name” merupakan pemberian nama pada komponen input sebagai nama dari komponen. Karena pada saat sistem web dijalankan maka data yang diolah di dalam pemrograman adalah berdasarkan nilai (value) dari nama komponen input tersebut. Contoh bentuk tampilannya adalah sebagai berikut : <!doctype html> <html> <head><title>input file </title></head> <body> <font face="Courier New, Courier, mono">---- Tambahkan File KRS --- </font><br> <form > <input type="file" name="pic" accept="image/*"> </form> </body> </html> Komponen radio button Pada form input radio button hanya ada satu pilihan yang terseleksi,tidak bisa digunakan untuk multiple answer. Format umum tag HTML dari Form Input Radio Button adalah sebagai berikut : <input type=radio name=name value=value> <input type=radio name=name value=value checked> Name= “name” merupakan pemberian nama pada komponen input sebagai nama dari komponen. Karena pada saat sistem web dijalankan maka data yang diolah di dalam pemrograman adalah berdasarkan nilai (value) dari nama komponen input tersebut. Berikut adalah penggalan listing program penulisan form input radio button. <!doctype html> <html> <head><title>radio button </title></head> <body> Tingkat Pendidikan : <form> <input type="radio" name="pendidikan" value="SD">SD<br> <input type="radio" name="pendidikan" value="SMP">SMP<br> <input type="radio" name="pendidikan" value="SMA">SMA sederajat<br> <input type="radio" name="pendidikan" value="D3">D3<br> <input type="radio" name="pendidikan" value="S1">S1<br> <input type="radio" name="pendidikan" value="S2">S2<br> <input type="radio" name="pendidikan" value="S3">S3<br> </form> </body> </html> Komponen chexbox Komponen chexbox memiliki fungsi yang hampir sama dengan radio button, yaitu untuk menentukan pilihan. Namun pada chexbox dapat digunakan untuk memilih lebih dari satu jawaban (multi answer). Format tag HTML-nya adalah sebagai berikut : <input type=checkbox name=name value=value> <input type=checkbox name=name value=value checked> Nilai dari komponen checkbox berupa nilai boolean, yakni true apabila dicentang dan false apabila input pilihan tersebut tidak dicentang. Berikut ini adalah contoh penerapan dari format form input check box <!doctype html> <html> <head><title>FORM INPUT</title></head> ---- KETERANGAN ----<form> <input type="checkbox" name="vehicle" value=" Sakit ">Sakit<br> <input type="checkbox" name="vehicle" value="Ijin">Ijin<br> <input type="checkbox" name="vehicle" value="Tanpa">Tanpa Keterangan<br> </form> </body> </html> Komponen Input Image Komponen input image bertujuan untuk memasukan file gambar yang dibutuhkan oleh sistem web, misalnya saja file gambar foto.jpg. Format tag HTML dengan atribut image adalah sebagai berikut : <input type=image name=name src="url"> <input type=image name=name src="url" align="alignment"> Name= “name” merupakan pemberian nama pada komponen input sebagai nama dari komponen. Sedangkan type=image merupakan tipe file yang dapat dimasukan dalam sistem. Berikut adalah salah satu contoh form Input Image dengan atribut image <!doctype html> <html> <body> <form > Nama depan : <input type="text" name="fname"><br> Nama belakang: <input type="text" name="lname"><br> <input type="image" src="img_submit.gif" alt="Submit" width="50" height="50"> </form> </body> </html> Komponen select Komponen input dengan tipe ‘select’ adalah komponen input dengan banyak pilihan nilai dan hanya memungkinkan untuk memilih 1 alternatif opsi pilihan. Istilah lain dari bentuk komponen ini adalah combo box atau list box. Contoh penggunaan komponen ini adalah pemilihan data agama, jurusan, pekerjaan,dan sebagainya. Format umum Penulisan komponen select adalah sebagai berikut : <select name=”name”> <option value="nilai1"> nilai1 </option> <option value=" nilai2"> nilai2 </option> <option value=" nilai3"> nilai3 </option> <option value=" nilai4 "> nilai4</option> </select> Name= “name” merupakan pemberian nama pada komponen input select sebagai nama dari komponen. Sedangkan value=”nilai” merupakan nilai dari setiap pilihan yang diberikan. Berikut ini adalah contoh penggunaan dari komponen input bertipe ‘select’ : <html> <head><title>Form</title></head> <body> Pilih Jurusanmu : <form> <select name="jurusan"> <option value="informatika">informatika</option> <option value="matematika">matematika</option> <option value="kimia">kimia</option> <option value="biologi">biologi</option> <option value="fisika">fisika</option> </select> </form> </body> </html> Komponen datalist Datalist digunakan untuk membuat daftar list. Komponen datalist memberikan dukungan autocomplete dasar untuk pilihan pada field input. Komponen datalist merupakan pengabungan antara list dan field input dengan atribut autocomplete. Format umum Penulisan komponen datalist adalah sebagai berikut : <input list="list"> <datalist id="id"> <option value="nilai1"> <option value=" nilai2"> <option value=" nilai3"> </datalist> Berikut ini adalah contoh penggunaan dari komponen input datalist <!DOCTYPE html> <html> <body> <form action="demo_form.asp" method="get"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit"> </form> </body> </html> Contoh Pembuatan Form dengan elemen entri pilihan Berikut adalah listing kode untuk membuat form menggunakan elemen entri pilihan, textarea <!DOCTYPE html > <html> <head><title>form</title></head> <body> <table border="1"> <tr><td><form id="form1" name="form1" method="post" action=""> <table width="354" align="center"> <tr><td height="24" colspan="3" align="center"><B>PENDAFTARAN</td></tr> <tr><td>Nama Pengguna</td> <td align="center">:</td> <td><label for="textfield"></label><input type="text" name="textfield" id="textfield" /></td> </tr> <tr><td>Sandi</td> <td align="center">:</td> <td><label for="textfield2"></label><input type="text" name="textfield2" id="textfield2" /></td> </tr> <tr><td>Jenis Kelamin</td> <td align="center">:</td> <td><input type="checkbox" name="checkbox" id="checkbox" /> <label for="checkbox">Pria <input type="checkbox" name="checkbox2" id="checkbox2" />Wanita</label></td> </tr> <tr><td>Tanggal lahir</td> <td align="center">:</td> <td><label for="select"></label> <select name="select" id="select"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> </select> <label for="select2"></label> <select name="select2" id="select2"> <option>Januari</option> <option>Februari</option> <option>Maret</option> <option>April</option> <option>Mei</option> <option>Juni</option> <option>Juli</option> <option>Agustus</option> <option>September</option> <option>Oktober</option> <option>November</option> <option>Desember</option> </select> <label for="select3"></label> <select name="select3" id="select3"> <option>1991</option> <option>1992</option> <option>1993</option> <option>1994</option> <option>1995</option> <option>1996</option> <option>1997</option> <option>1998</option> <option>1999</option> </select></td> </tr> <tr><td colspan="2"> </td> <td><input type="submit" name="button" id="button" value="Simpan" /> <input type="reset" name="button2" id="button2" value="Batal" /></td> </tr> </table> </td></tr> </table> </form> </body> </html> Pembuatan form dengan elemen entri pilihan dan elemen fieldset Berikut adalah listing kode untuk membuat form menggunakan elemen entri pilihan, textarea dan fieldset. <html> <head><title>pengaturan pada form</title></head> <body> <form> <form action="test.html"> <fieldset> <legend>tentang anda </legend> <table> <tr><td width="50"> <label for="first">nama lengkap </label></td> <td><input type="text" name="nama_lengkap" id="first" size="20" maxlength="50" /><br /> </td></tr> <tr><td><label for="last">alamat</label></td> <td><input type="text" name="alamat" id="last" size="20" maxlength="50" /><br /></td></tr> <tr><td><label for="desc">pesan dan kesan</label> <td><textarea rows="5" cols="20" id="desc">tuliskan pesan anda disini</textarea><br /></td> </tr> </table> <fieldset class="hoby"> <legend>hoby anda?</legend> <input type="radio" id="berkebun" value="berkebun" name="hoby" /><label for="cberkebun"> berkebun</label><br /> <input type="radio" id="memasak" value="memasak" name="hoby" /><label for="memasak"> memasak</label><br /> <input type="radio" id="renang" value="renang" name="hoby" /><label for="renang"> renang</label><br /> </fieldset> <input type="submit" value="submit" id="submit" /> </fieldset> </form> </body> </html> TUGAS 1 Buatlah dokumen html untuk membuat tampilan form berikut! Buatlah form dengan menggunakan elemen fieldset seperti contoh berikut ini! Test Formatif 1 Jelaskan fungsi dan format penulisan komponen input file Jelaskan fungsi dan format penulisan komponen radio button Jelaskan fungsi dan format penulisan komponen chexbox Jelaskan fungsi dan format penulisan komponen datalist BAB 3 Memahami Anatomi dan Cara Kerja Cascading Style Sheet Definisi dan fungsi cascading style sheet Cascading Style Sheet atau lebih sering disebut dengan istilah CSS merupakan salah satu dokumen website yang bertujuan untuk mengatur gaya (style) tampilan website. CSS bukanlah sebuah bahasa pemrograman, melainkan sebuah aturan untuk mengendalikan beberapa komponen pada web sehingga akan lebih terstruktur, seragam dan mudah dalam pengaturan saat pendesain sebuah halaman web. CSS merupakan sekitar pembuatan dan pengaturan style font, warna, jarak, bentuk, dan lain-lain yang tidak dapat dilakukan dengan elemen - elemen HTML. Dengan penggunaan dari CSS dalam pembuatan web akan memberikan beberapa manfaat seperti berikut ini : Kode HTML menjadi lebih sederhana dan lebih mudah diatur. Ukuran file menjadi lebih kecil sehingga load file lebih cepat. Mudah untuk mengubah tampilan, hanya dengan mengubah file CSS saja. Dapat berkolaborasi dengan JavaScript dan merupakan pasangan setia HTML. Dapat digunakan dalam hampir semua jenis web browser. Anatomi dari cascading style sheet Bagian – bagian utama dari sebuah CSS itu terdiri dari tiga bagian yaitu: selector, property, value. Jika dalam HTML dikenal ada tag-tag yang menyusun sebuah dokumen HTML maka dalam CSS juga dikenal dengan sebutan selector. Bagian CSS Keterangan Selektor nama-nama yang diberikan untuk style-style yang berbeda, baik itu style internal maupun eksternal bagian elemen HTML yang akan ditunjuk untuk mengatur style dapat berupa class dan ID Property aturan dalam CSS untuk mengubah selector yang dipilih property mempunyai nilai yang disebut dengan value properties di dalam tanda { } Value Merupakan nilai dari property CSS CSS memiliki aturan tersendiri dalam penulisan sintaks. Penulisan sintaks tersebut terbagi ke dalam tiga bagian yaitu: selector, property, dan value. Format penulisan bagian-bagian dari CSS dapat dituliskan sebagai berikut : Selector{ Property : value; } Berikut ini sedikit contoh penggunaan selektor, property, dan value untuk mengatur style pada sebuah form form{ margin-left:0; } Dari contoh penggunaan selector, property, dan value di atas maka tiap bagian akan di jelaskan sebagai berikut : form : selector yang akan di atur stylenya margin-left : property yang digunakan untuk jarak fieldset daribatas kiri layout 0 : nilai dari property margin-left Dengan adanya CSS memungkinkan untuk menampilkan halaman yang sama dengan format yang berbeda.

Log In

Modul membuat FORM

Related papers

Related papers