selamat datang di blog saya
Kamis, 31 Maret 2016
kemampuan suatu komponen melakukan pencarian dari data
yang ada berdasarkan input dari user.
Autofocus: atribut pengaturan fokus pada suatu elemen setelah halaman di
load.
Boolean: tipe untuk mewakili data dengan format benar salah.
Border: batas yang mengelilingi padding dan content.
Cascading Style Sheet (CSS): standar yang digunakan untuk mengatur
tampilan suatu halaman HTML
Case Sensitive: bentuk pernyataan yang akan membedakan antara huruf besar
dan kecil untuk nama yang sama.
Cols: jumlah kolom karakter yang dapat ditampilkan oleh textarea.
Disabled: atribut untuk menonaktifkan mode entri pada suatu komponen formulir
HTML.
ECMAScript: Nama lain untuk menyatakan standar Javascript.
Embedded style sheet: CSS yang ditempatkan dalam tag <style>.
sebutan dari satu aksi yang dilakukan oleh user atau dapat juga berasal
dari browser untuk diolah oleh aplikasi.
External style sheet: CSS yang ditempatkan pada file tersendiri, umumnya file
dengan ekstensi *.css.
Fungsi: kumpulan program untuk menjalankan suatu proses tertentu.
Inline style sheet: CSS yang ditempatkan pada suatu elemen HTML.
Java: bahasa pemrograman untuk pengembangan aplikasi lintas platform
menggunakan mesin virtual Java.
Javascript: bahasa pemrograman untuk pengolahan halaman HTML
Komentar program: bagian dari program yang tidak akan dieksekusi interpreter
ataupun compiler.
Komponen checkbox: komponen formulir HTML untuk menentukan beberapa
pilihan dari yang ada.
Komponen datalist: komponen formulir HTML untuk menampilkan data lebih
dari dengan dukungan autocomplete.
Komponen input file: komponen formulir HTML untuk pengiriman file.
Komponen input image: komponen formulir HTML untuk membuat tombol dari
gambar.
Komponen radio button: komponen formulir HTML untuk memilih satu dari
sekian pilihan.
Komponen select: komponen formulir HTML untuk menampilkan lebih dari satu
pilihan.
Margin: daerah paling diluar yang membatasi dengan elemen HTML yang
lainnya dan tidak berwarna.
perluasan standar email,
sekarang juga digunakan secara meluas untuk standar lainnya di internet, untuk
mendukung pengiriman data dengan format teks selain ASCII, non-teks dan
penerapan banyak format dalam satu file (multipart message bodies).
Notasi camel case: notasi penamaan yang menggunakan huruf kapital pada
setiap kata-nya tanpa mengandung spasi.
Notasi hungaria: notasi penamaan yang memberikan awalan berupa jenis data
yang akan ditampung oleh suatu variabel.
Padding: area yang mengelilingi content.
Pemrograman berorientasi obyek: pemrograman yang menggambarkan suatu
aplikasi sebagai interaksi antar obyek seperti yang terjadi dalam kehidupan
sehari-hari.
Property: bagian CSS untuk menunjuk detail modifikasi yang akan dilakukan
pada suatu elemen HTML.
Pustaka: kumpulan konstanta, fungsi, kelas atau obyek dalam pemrograman.
Rows: jumlah baris teks yang dapat ditampilkan oleh textarea.
Selector: elemen HTML, yang ditunjuk melalui atribut class, ID atau nama tag,
yang akan dimodifikasi tampilannya oleh CSS.
String: tipe untuk mewakili format data yang berupa kumpulan karakter.
Struktur percabangan: struktur program yang memiliki kondisi tertentu untuk
menjalankan alur yang berbeda.
Struktur perulangan: struktur program yang memungkinkan suatu kumpulan
perintah dijalankan berkali-kali dengan terpenuhinya suatu kondisi.
Textarea: komponen formulir HTML untuk menampung teks yang panjang.
<!doctype html>
<html>
<head>
<title>penulisan password </title>
</head>
<body>
<form >
Password: <input type="password" name="pwd" maxlength="6">
</form>
</body>
</html>
Contoh hasil kompilasi dari listing diatas :
Gambar 1.5 form input password
3) 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>
Gambar 1.6 form input text
4) Form menggunakan input hidden
Format tag form input hidden HTML-nya adalah sebagai berikut :
<INPUT TYPE=HIDDEN NAME=name VALUE=value>
Pada format form input hidden ditandai dengan atribut form type =hidden pada
tag <input>, yang artinya ada form inputan yang disembunyikan atau tidak tidak
tampilkan. Untuk selengkapnya dapat dilihat pada program berikut
Bila listing program diatas dijalankan dibrowser akan menghasilkan tampilan
sebagai berikut :
<!doctype html>
<html>
<head>
<title>hidden input file </title>
</head>
<body>
<form >
Nama : <input type=” name=”fnama”><br>
<input type=”hidden” name=”negara” value=”Indonesia”>
<input type=”submit” value=”Submit”>
</form>
</body>
</html>
Gambar 1.7 hasil form input dengan hidden
Bila tag type=”hidden” dihilangkan maka pada <input type=”hidden”> maka
menghasilkan tampilan sebagai berikut :
<form >
Nama : <input type=”text” name=”fnama”><br>
<input type=”submit” value=”Submit”>
</form>
Gambar 1.8 hasil form input tanpa atribut hidden
5) 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”>
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> Yang perlu diperhatikan pada penggunaan input radio adalah bahwa atribut nama (name) dari komponen dari input tersebut harus sama. Contoh bentuk tampilannya adalah sebagai berikutKomponen 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). Atau bisa dikatakan bahwa komponen input checkbox digunakan sebgai masukan untuk data atau nilai pilihan dengan alternatif jawaban lebih dari 1 opsi pilihan. Tampilan dari komponen input ini berupa kotak yang dapat diberi tanda centang/contreng. Jenis input ini biasa digunakan untuk memasukkan data pilihan yang pilihannya bisa lebih dari satu, seperti hobby, makanan, dan lain-lain. Format tag HTML-nya adalah sebagai berikut : <input type=checkbox name=name value=value> <input type=checkbox name=name value=value checked> Setiap komponen input harus diberikan nama (name) yang berbeda karena data yang diolah di dalam pemrograman adalah berdasarkan nilai (value) dari nama komponen input tersebut. 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> Listing kode diatas menghasilkan tampilannya sebagai berikut : Gambar 2.4 hasil form input checkbox 4) 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. Karena pada saat sistem web dijalankan maka data yang diolah di dalam pemrograman adalah berdasarkan nilai (value) dari nama komponen input tersebut. 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> Bila listing program diatas di jalankan di browser (http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_image) akan menghasilkan tampilan sebagai berikut : Gambar 2.5 form input image 5) 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. Karena pada saat sistem web dijalankan maka data yang diolah di dalam pemrograman adalah berdasarkan nilai (value) dari nama komponen input tersebut. 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>
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> Yang perlu diperhatikan pada penggunaan input radio adalah bahwa atribut nama (name) dari komponen dari input tersebut harus sama. Contoh bentuk tampilannya adalah sebagai berikutKomponen 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). Atau bisa dikatakan bahwa komponen input checkbox digunakan sebgai masukan untuk data atau nilai pilihan dengan alternatif jawaban lebih dari 1 opsi pilihan. Tampilan dari komponen input ini berupa kotak yang dapat diberi tanda centang/contreng. Jenis input ini biasa digunakan untuk memasukkan data pilihan yang pilihannya bisa lebih dari satu, seperti hobby, makanan, dan lain-lain. Format tag HTML-nya adalah sebagai berikut : <input type=checkbox name=name value=value> <input type=checkbox name=name value=value checked> Setiap komponen input harus diberikan nama (name) yang berbeda karena data yang diolah di dalam pemrograman adalah berdasarkan nilai (value) dari nama komponen input tersebut. 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> Listing kode diatas menghasilkan tampilannya sebagai berikut : Gambar 2.4 hasil form input checkbox 4) 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. Karena pada saat sistem web dijalankan maka data yang diolah di dalam pemrograman adalah berdasarkan nilai (value) dari nama komponen input tersebut. 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> Bila listing program diatas di jalankan di browser (http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_image) akan menghasilkan tampilan sebagai berikut : Gambar 2.5 form input image 5) 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. Karena pada saat sistem web dijalankan maka data yang diolah di dalam pemrograman adalah berdasarkan nilai (value) dari nama komponen input tersebut. 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>
Langganan:
Komentar (Atom)