NAMA : YOGI PRAYOGA ARI NRP : 2103147020 KELAS : D3PJJ PERCOBAAN 1 Text input adalah tag input dengan tipe text dimana tag ini berguna dalam penginputan text dengan skala yang tidak terlalu banyak. Terdapat atribut size dan maxlenght dimana size berperan sebagai setting ukuran dari tag input text tersebut, dan maxlenght berperan sebagai batas maksimum input karakter value dari tag input text tersebut. <input type= text size= 20 >, menjadi lebih pendek dari contoh diatas. <input type= text maxlenght=50>, membatasi karakter inputan sejumlah 50 karakter. PERCOBAAN 2
Tag input radio berguna untuk memilih option pada masing-masing pilihan, jadi input dengan type radio hanya membatasi satu pilihan saja selagi value name-nya sama, sehinggan bila value pada atribut name nya berbeda tag input radio tidak akan memilih salah satu. <input type=radio name=hobby>membaca</input> PERCOBAAN 3 Kebalikan dari tag input bertipe radio diatas, dengan merubah type menjadi checkbox akan membuat tampilan menjadi tipe cek yang dapat dipilih lebih dari satu pilihan. <input type=checkbox name=hobby>elektronika</input>
PERCOBAAN 4 Pada tag input atribut tipe dengan value submit beguna untuk membuat tampilan yang berupa tombol dan ini berkaitan dengan pengaksesan value/hasil input bertipe text, radio, cekbox dll. Contoh anda mempunyai form isian buku tamu seperti diatas dan form ini mempunyai atribut action yang mengarah ke suatu link, bila anda mempunyai tombol dengan tipe submit,tombol submit inilah yang bertugas untuk mengarahkan ke link tujuan tersebut. Sedang tombol yg bertipe reset akan menhosongkan atau membatalkan inputan yang sudah anda ketikkan atau pilih. Untuk tombol bertipe button tidak akan berpengaruh di form HTML. <input type=submit name=tombol value=kirim> PERCOBAAN 5 Tag select option berguna untuk membuat tampilan dengan list kebawah atau drop-down list, didalam tag select tidak akan menjadi lengkap apabila tag option ada didalamnya, jadi dalam suatu tag select harus ada tag option nya agar menjadi seperti yang diatas. <select name="jurusan"> <option value="e">elektronika</option>
<option value="l">lisrik</option> <option value="i">in format ika </option> <option value="t">telekomunikasi</option> </select> PERCOBAAN 6 Tag textarea,tag ini membantu dalam membuat suatu inputan dengan karakter yang lebih banyak, berbeda dengan tag input bertipe text, textarea dikhususkan untuk mempermuda inputan yang berupa karakter text bisa berupa paragraf atau suatu pernyataan yang mengandung banyak kata-kata. <textarea rows=5 cols=50 placeholder="tulis komentar anda"></textarea> PERCOBAAN 7
Tag form akan mengeksekusi hasil dari kumpulan inputan yang berada didalam tag form itu sendiri. Jadi jika ada bebearapa tipe input yang didalam form akan terbaca ketika tombol submit ditekan. Contoh seperti diatas, kode nya seperti ini : Ada beberapa tag input yang berada didalam form, jika masing-masing input diisi maka di valuevaluenya akan tereksekusi, untuk pembuktiannya URL akan membaca nya, hasilnya akan seperti ini : D:/form/praktikum4/form_get.html?nama=nama&email=email%40email.com&hobby=e&tombol=ki rim Ini membuktikan bahwa tag input text yang mempunyai atribut dengan value nama akan membaca inputan dari yang kita ketikkan, D:/form/praktikum4/form_get.html?nama=nama&email=email%40email.com&hobby=e&tombol=ki rim Sama halnya dengan yang lain. Dan jika ditekan tombol batal (tipe reset) akan kembali kosong seperti atau seperti belum terisi. PERCOBAAN 8
Penggunaan label adalah untuk mendeklarasikan inputan yang mempunyai element atribut id sama dengan elemnt atribut for pada tag label. <input type= radio id= female > <label for= female >female</label> Mendefinisikan bahwa label itu juga bagian dari input radio tersebut. PERCOBAAN 9 Tag fieldset berguna untuk mengelompokkan berbagai jenis tipe input didalam tag fieldset itu sendiri, dan juga memperindah tampilan sehingga mempermudah pengguna dalam mengelompokkan macam-macam inputandari judul inputan itu sendiri. Detail kontak : 1. Email Perangkat Komputer : 1.CPU 2.No HP 2.monitor 3. Telepon 3.mouse 4. keyboard PERCOBAAN 10 Pada percobaan 10 ini adalah penambahan atribut required, atribut ini berguna untuk mem-validasi suatu jenis inputan agar memasukkan value atau mengisi dari inputan tersebut. <input type= text name= username required= required >
Kode diatas diharuskan kita mengisi form text diatas. PERCOBAAN 11 Tag input dengan tipe date diatas, memudahkan dalam input kalender, penulisannya : <input type="date" name="ultah" /> Pada tag tipe seperti ini ada beberapa browser yang belum support atribut bertipe date ini, contoh browser yang support adalah chrome, opera dan safari. PERCOBAAN 12 Browser secara otomatis akan memberitahu kalau input yang kita ketikkan belum mengandung symbol @, ini adalah fungsi validasi dari tag input dengan tipe email. Dan jika setelah ada symbol @ kita tidak melengkapinya maka akan ada validsi dialog seperti dibawah ini :
Sehingga validasi ini memudahkan dalam memberitahu informasi email yang benar. Penulisan kode nya : <input type="email" name="email" /> PERCOBAAN 13 Atribut placeholder adalah jenis atribut yang memberitahukan ke pengguna apa yang seharusnya diketik kedalam form input tersebut. Penulisan kodenya : <input type="search" name="search" placeholder="ketikkan pencarian anda"/> Value pada placeholder adalah info atau tulisan yang akan muncul pada form text seperti gambar diatas.