SMAN 1 SUMATERA BARAT JOBSHEET 5
Memahami dasar-dasar
Bidang Studi : TIK Waktu : 45 menit
pemrograman berbasis web
Kelas / Sem : XII / 1 Pertemuan : 5
A. Tujuan
1) Peserta didik mengerti fitur-fitur software bahasa pemrograman dan fungsinya untuk
mengelola halaman web.
2) Peserta didik mampu membuat struktur dokumen dengan tag HTML.
3) Peserta didik dapat mengenali dan memahami fungsi obyek-obyek web dan tag-tag HTML
dalam pembuatan halaman-halaman web yang meliputi:
- Memformat dokumen dan menambahkan objek
- Membuat tabel dan frame
- Membuat dan membangkitkan Link
4) Peserta didik dapat mengenali dan memahami fitur-fitur pengelolaan file halaman web.
5) Peserta didik dapat melakukan kombinasi tag-tag HTML dengan obyek-obyek lain untuk
membangun halaman web yang disimpan dalam format HTML.
B. Teori singkat
Form Elements
Dalam belajar HTML dasar, Form merupakan materi yang sangat penting untuk dipelajari.
Form terdiri dari berbagai komponen / elemen. Elemen-elemen dalam sebuah form berfungsi
untuk memasukan data dari user dan mengirimkannya ke server. Sekarang mari kita bahas Jenis
dan fungsi dari elemen form satu per satu :
1. Text Field (tag <input type="text" />)
Elemen form yang digunakan untuk memasukan teks (huruf dan angka) dalam satu baris.
Lebar karakter defaultnya adalah 20 karakter, nameun bisa kita ubah sesuai keinginan kita.
- Penulisan : <input type="text" />
- Atribut :
✓ name : nama dari text field
✓ id : id dari text field, isinya bisa sama dengan name
✓ maxlength : maksimal panjang karakter yang bisa diinput
✓ readonly : tekxt field hanya bisa dibaca, tidak bisa diinput, tapi bisa diklik
✓ disabled : tekxt field hanya bisa dibaca, tidak bisa diinput, dan tidak bisa diklik
✓ placeholder : diisi dengan petunjuk atau fungsi dari text field, akan muncul dengan
warna yang samar pada text field tersebut
2. Password Field (tag <input type="password" />)
Elemen form yang digunakan untuk memasukan teks password dalam satu baris. Karakter
yang kita ketik akan muncul dalam bentuk titik-titik atau bulatan-bulatan hitam. Lebar karakter
defaultnya adalah 20 karakter, nameun bisa kita ubah sesuai keinginan kita.
- Penulisan : <input type="password" />
Ratih, [Link]
SMAN 1 Sumatera Barat 1
- Atribut :
✓ name : nama dari password field
✓ id : id dari password field, isinya bisa sama dengan name
✓ maxlength : maksimal panjang karakter yang bisa diinput
✓ placeholder : diisi dengan petunjuk, akan muncul dengan warna yang samar pada
password field tersebut sebelum password diisi.
- Struktur penulisan password field :
3. Number Field (tag <input type="number" />)
Elemen form yang digunakan untuk memasukan angka. Lebar karakter defaultnya adalah
20 karakter, nameun bisa kita ubah sesuai keinginan kita. Angka yang dimasukan bisa dibatasi
dalam rentang tertentu. Jika nilai yang dimasukan di luar rentang yang ditentukan, maka akan
muncul peringatan. Untuk menaikan dan menurunkan nilainya bisa menggunakan tombol naik
dan tombol turun.
- Penulisan : <input type="number" />
- Atribut :
✓ name : nama dari number field
✓ id : id dari number field, isinya bisa sama dengan name
✓ maxlength : maksimal panjang karakter yang bisa diinput
✓ min : nilai minimal yang bisa diinput
✓ max : nilai maksimal yang bisa diinput
✓ placeholder : diisi dengan petunjuk, akan muncul dengan warna yang samar pada
number field tersebut sebelum diisi angka.
4. Date Field (tag <input type="date" />)
Elemen form yang digunakan untuk memasukan tanggal. Kita tinggal memilih tanggal
yang diinginkan dari kalender yang disediakan.
- Penulisan : <input type="date" />
- Atribut :
✓ name : nama dari date field
✓ id : id dari date field, isinya bisa sama dengan name
5. Range Field (tag <input type="range" />)
Elemen form yang digunakan untuk memasukan nilai dalam rentang tertentu, nilai
defaultnya 0 sampai dengan 100. disajikan dalam bentuk slider yang bisa digeser untuk
menaikan dan menurunkan nilai.
- Penulisan : <input type="range" />
- Atribut :
✓ name : nama dari range field
✓ id : id dari range field, isinya bisa sama dengan name
✓ min : nilai terkecil
✓ max : nilai terbesar
✓ value : nilai yang aktif
✓ step : nilai range penamebahan dan pengurangan
Ratih, [Link]
SMAN 1 Sumatera Barat 2
6. Drop Down List (tag <select> </select>)
Elemen form yang digunakan untuk daftar / list dalam bentuk drop down. Ada 2 tag yang
digunakan yaitu <select> untuk mendefinisilan drop down list dan <option> untuk
mendefinisikan isinya.
- Penulisan : <select ><option> isi </option></select>
- Atribut :
✓ name : nama dari drop down list (atribut dari tag select)
✓ id : id dari drop down list (atribut dari tag select)
✓ value : isi pilihan dari drop down list (atribut dari option)
7. Text Area (tag <input type="text" />)
Elemen form yang digunakan untuk memasukan teks (huruf dan angka) lebih dari satu baris.
- Penulisan : <textarea>
- Atribut :
✓ name : nama dari text area
✓ id : id dari text area, isinya bisa sama dengan name
✓ cols : maksimal panjang karakter yang bisa diinput
✓ rows : maksimal baris yang bisa diinput
✓ readonly : textarea hanya bisa dibaca, tidak bisa diinput, tapi bisa diklik
✓ disabled : textarea hanya bisa dibaca, tidak bisa diinput, dan tidak bisa diklik
✓ placeholder : diisi dengan petunjuk atau fungsi dari textarea, akan muncul dengan
warna yang samar pada text field tersebut
8. Radio Button (tag <input type="radio" />)
Elemen form yang digunakan untuk menentukan satu pilihan di antara beberapa pilihan yang
disediakan.
- Penulisan : <input type="radio">
- Atribut :
✓ name : nama dari radio button
✓ id : id dari radio button, isinya bisa sama dengan name
✓ value : nilai dari radio buttin
✓ checked : memberikan tanda pilihan pada salah satu radio button
✓ disabled : radio button hanya ditampilkan, tidak bisa diinput dan tidak bisa diklik
9. Checkbox (tag <input type="checkbox" />)
Elemen form yang digunakan untuk menentukan beberapa pilihan atau semua di antara semua
pilihan pilihan yang disediakan.
- Penulisan : <input type="checkbox">
- Atribut :
✓ name : nama dari checkboxn
✓ id : id dari checkbox, isinya bisa sama dengan name
✓ value : nilai dari checkbox
✓ checked : memberikan tanda pilihan pada salah satu checkbox
✓ disabled : checkbox hanya ditampilkan, tidak bisa diinput dan tidak bisa diklik
Ratih, [Link]
SMAN 1 Sumatera Barat 3
C. Peralatan
1. Komputer/Laptop
2. Jobsheet
D. Keselamatan Kerja
1. Perhatikan keselamatan penggunaan alat dan gunakan prosedur kerja yang benar.
2. Bertanya pada guru jika ada hal-hal yang belum dipahami.
3. Lakukan pembersihan dan perawatan peralatan komputer dan tempat kerja sebelum dan
sesudah digunakan.
E. Latihan
Buka kembali latihan sebelumnya, kemudian save as : jobsheet_7.html. kerjakanlah
latihan berikut:
<form name="form1">
<pre>
Nama :<input type="text" name="nm" maxlength="30" placeholder="nama anda"/><br>
Password :<input type="password" name="pwd" maxlength="30" placeholder="kata kunci
anda"/><br>
Tanggal Lahir :<input type="date" name="tgllahir" /><br>
<form name="form1">Jurusan :
<select name="Jurusan" id="jurusan">
<option value="TKJ">Teknik Komputer Jaringan</option>
<option value="TSM">Teknik Sepeda Motor</option>
<option value="RPL">Rekayasa Perangkat Lunak</option>
<option value="AP">Administrasi Perkantoran</option>
</select><br>
<form name="form1">Komentar :
<textarea name="pesan" id="pesan" rows="4" cols="50">
</textarea><br>
<form name="form1">Jurusan yang dipilih :<br>
<input type="radio" name="myRadio" id="myRadio" value="TKJ" checked="checked">Teknik Komputer
Jaringan <br>
<input type="radio" name="myRadio" id="myRadio" value="TSM">Teknik Sepeda Motor <br>
<input type="radio" name="myRadio" id="myRadio" value="RPL">Rekayasa Perangkat Lunak <br>
<input type="radio" name="myRadio" id="myRadio" value="AP">Administrasi Perkantoran <br>
<form name="form1">Mata Pelajaran :<br>
<input type="checkbox" name="mp" id="mp" value="PW" checked="checked">Pemrograman Web <br>
<input type="checkbox" name="mp" id="mp" value="JD">Jaringan Dasar <br>
<input type="checkbox" name="mp" id="mp" value="SO">Sistem Operasi <br>
<input type="checkbox" name="mp" id="mp" value="PK">Perakitan Komputer <br>
</pre></form>
Ratih, [Link]
SMAN 1 Sumatera Barat 4