Repository Universitas Komputer Indonesia

Pemrograman WEB-1
Materi ini membahas mengenai Penggunaan Input dan label untuk membuat form masukan dan keluaran
Text, Checkbox, Select dan Radi

Suryana, Taryana

 
BAB 11 
W3 INPUTS DAN LABEL 
 
Taryana Suryana M.Kom 
Teknik Informatika 
2023/2024 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
HP.081221480577 – 087832908499 
 
11.W3.CCS Input 
Kelas w3-input memungkinkan Anda untuk membuat form input 
lebih baik dan lebih rapih, ada beberapa type masukan yang dapat 
digunakan, yaitu: 
Text 
Checkbox 
Select 
Radio 
 
11.1. Input Text 
Jika anda ingin memasukan data dalam bentuk kotak masukan satu 
baris, maka dapat digunakan input type text,  adapun penggunaannya 
adalah seperti berikut: 
 
 
<input class="w3-input" type="text" style="width:50%" name=”namaobjek” > 
 
 
 
Contoh Misalkan anda ingin membuat form input, dengan nama 
variable akan disimpan di namasiswa, maka code programnya adalah 
sebagai berikut: 
 
<input class="w3-input" type="text" name=”namasiswa”> 
 
 
 
Kode Lengkap: 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="css/w3.css"> 
<div class="w3-container"> 
<center> 
<h1>Berbagai Macam Input 
</center> 
<hr> 
<form class="w3-container"> 
<label>Input Standar<input class="w3-input" type="text" style="width:50%"> 
<label>Input Border<input class="w3-input w3-border" type="text" 
style="width:50%"> 
<label>Input round border <input class="w3-input w3-border w3-round-large" 
type="text" style="width:50%"> 
<label>Input border-0<input class="w3-input w3-border-0" type="text" 
style="width:50%"> 
<label>Input border warna<input class="w3-input w3-border w3-red" type="text" 
style="width:50%"> 
<label>Input hover<input class="w3-input w3-border w3-hover-blue" type="text" 
style="width:50%"> 
<label class="w3-text-blue">Input Animate<input class="w3-input w3-animate-input" 
type="text" style="width:135px"> 
<hr> 
</div> 
</div> 
 
 
 
11.1.1 Mewarnai Label dan Input 
Apabila anda ingin mewarnai label atau input pada form, maka dapat 
dilakukan dengan menambahkan class “w3-text-namawarna”, 
contoh: 
<label class="w3-text-teal"><b>First Name</b></label> 
<input class="w3-input w3-light-grey" type="text"> 
  
 
11.1.2. Bordered Input 
Ketika membuat form dan anda ingin agar form inputan memiliki garis atau 
border makan dapat dilakukan dengan menambahkan class w3-border, 
contoh: 
 
 
<input class="w3-input w3-border w3-round" type="text"> 
<input class="w3-input w3-border w3-round-large" type="text"> 
 
 
11.1.3.Hoverable inputs 
Class w3-hover-color akan menambahkan warna 
background ketika kursor mouse berada diatas kotak 
inputan. 
input class="w3-input w3-hover-green" type="text"> 
 
11.1.4. Animate Input 
Membuat Form Input dengan menggunakan w3-animate-input, pada 
contoh ini akan ditampilkan form masukan dengan lebar default 
sebesar 135px atau bisa juga dalam %, kemudian ketika Kursor mouse 
anda Click di kotak inputan tadi, maka otomatis form input akan 
menjadi lebar begitu juga jika di click diluar kotak input, maka form 
akan kembali ke awal 
Contoh: 
<p> 
<input class="w3-input w3-animate-input" type="text" style="width:135px"><br> 
<input class="w3-input w3-border w3-animate-input" type="text" style="width:30%"> 
 
</p> 
 
11.2. Input Card 
Jika anda menghendaki agar form input berbentuk seperti kartu, 
maka dapat ditambahkan class card seperti berikut: 
 
<div class="w3-card-4"> 
 <div class="w3-card-4"> 
    <div class="w3-container w3-green"> 
      <h2>DATA SISWA</h2> 
    </div> 
 <div> 
</div> 
 
 
NamaFile:css37.html 
 
<html> 
<title>W3.CSS</title> 
<meta name="viewport" content="width=device-width, initial-
scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<body> 
 
<div class="w3-container"> 
  <h2>Input Card</h2> 
   
  <div class="w3-card-4"> 
    <div class="w3-container w3-green"> 
      <h2>DATA SISWA</h2> 
    </div> 
 
    <form class="w3-container"> 
      <p> 
      <input class="w3-input" type="text" name="nim"> 
      <label>NIM</label></p> 
      <p>      
      <input class="w3-input" type="text" name="namalengkap"> 
      <label>NAMA LENGKAP</label></p> 
 
    </form> 
  </div> 
</div> 
</body> 
</html> 
 
 
 
 
Gambar 11.2. Form Input Bentuk Kartu 
 
 
  
 
 
 
11.3. Input Checkbox 
Jika anda ingin membuat form input dengan pilihan berbentuk 
checkbox atau checklist, maka dapat digunakan kelas w3-check,  
adapun perintah dasarnya adalah sebagai berikut: 
 
<input class="w3-check" type="checkbox" 
name="namaobjek"> 
 
<input class="w3-check" type="checkbox" checked="checked"> 
<label>Milk</label> 
 
<input class="w3-check" type="checkbox"> 
<label>Sugar</label> 
 
<input class="w3-check" type="checkbox" disabled> 
<label>Lemon (Disabled)</label> 
 
 
 
 
 
NamaFile:css38.html 
 
<html> 
<title>W3.CSS</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<body> 
 
<div class="w3-card-4"> 
<p> 
  <div class="w3-container w3-orange"> 
    <h2>Bahasa Pemrograman</h2> 
  </div> 
  <form class="w3-container" action="action_page.php"> 
  <p> 
  <input class="w3-check" type="checkbox" checked="checked" name="pascal"> 
  <label>Pascal</label></p> 
  <p> 
  <input class="w3-check" type="checkbox" name="delphi"> 
  <label>Delphi</label></p> 
  <p> 
  <input class="w3-check" type="checkbox" disabled> 
  <label>Assembler (Disabled)</label></p> 
  <hr> 
 <p> 
<button class="w3-btn w3-round-xxlarge w3-purple">Kirim Form</button> 
</form> 
</div> 
</body> 
</html> 
 
 
 
 
Gambar 11.3. Form Input Checkbox 
 
 
 
11.4.INPUT TIPE RADIO 
Jika anda ingin membuat form input dengan pilihan berbentuk radio, 
maka dapat digunakan kelas w3-radio,  adapun perintah dasarnya 
adalah sebagai berikut: 
<input class="w3-radio" type="radio" name="namaobjek" value="nilai" checked> 
 
 
NamaFile:css39.html 
<html> 
<meta name="viewport" content="width=device-width, 
initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<body> 
<div class="w3-card-4"> 
<p> 
  <div class="w3-container w3-orange"> 
 
    <h2>Jenis Kelamin</h2> 
  </div> 
  <form class="w3-container" action="action_page.php"> 
  <p> 
  <input class="w3-radio" type="radio" name="gender" 
value="male" checked> 
  <label>Pria</label></p> 
  <p> 
  <input class="w3-radio" type="radio" name="gender" 
value="female"> 
  <label>Wanita</label></p> 
  <p> 
  <input class="w3-radio" type="radio" name="gender" 
value="" disabled> 
  <label>Tidak Tahu (Disabled)</label></p> 
 <hr> 
 <p> 
<button class="w3-btn w3-round-xxlarge w3-purple">Kirim 
Form</button> 
</form> 
</div> 
</body> 
</html> 
 
 
 
Gambar 11.4. Form Input Radio 
 
 
 
 
11.5.Menggunakan Select Option 
Jika anda ingin membuat form dengan input berupa pilihan yang 
berbentuk dropdown, maka dapat digunakan kelas w3-select,  
adapun perintah dasarnya adalah sebagai berikut: 
 
<select class="w3-select" name="namaobjek"> 
    <option value="" disabled selected>Pilihan Anda</option> 
    <option value="1">Satu</option> 
    <option value="2">Dua</option> 
    <option value="3">Tiga</option> 
    <option value="4">Empat</option> 
  </select> 
 
 
Contoh misalkan ingin dibuat pilihan seperti Gambar 11.5 berikut: 
 
 
Gambar 11.5. Menggunakan Select Option 
 
NamaFile:css40.html 
<html> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
 
<form class="w3-container w3-card-4" action="action_page.php"> 
<div class="w3-container w3-green"> 
   <h2>Memilih menggunakan Select Option</h2> 
  </div> 
 
   <select class="w3-select" name="option"> 
    <option value="" disabled selected>Tempat Pavorit Kamu</option> 
    <option value="1">Cafe</option> 
    <option value="2">Taman</option> 
    <option value="3">Gunung</option> 
 <option value="4">laut</option> 
  </select> 
  <p><button class="w3-btn w3-teal">Kirim</button></p> 
</form> 
</html> 
 
 
  
 
Tugas 11. Buat Form Seperti berikut: 
Data Form, warna, isi, Boleh di Rubah asal memenuhi 4 jenis Tipe 
Input, yaitu ada text,select, radio dan checkbox 
NAMAFile:TUGAS11-NIM-NAMA.PDF 
 
 
Kirim Screenshot program dan Code Program dalam bentuk PDF ke Tugas 
Kuliah Online, dikirim paling telat hari Sabtu 
 
 
DAFTAR PUSTAKA IF 
1. Suryana, Taryana (2023) Materi 10. Display Layout Dan Button Pwk-
1/s1/i 22849. [Teaching Resource] 
2. Suryana, Taryana (2023) File Pendukung W3 Css. [Teaching 
Resource] 
3. Suryana, Taryana (2023) Materi 10. Display Layout Dan Button Web1 
Ul1/2016-21622. [Teaching Resource] 
4. Suryana, Taryana (2023) Materi 10. Display Layout Dan Button If-
10/s1/i-20968. [Teaching Resource] 
5. Suryana, Taryana (2023) Materi 10. Display Layout Dan Button If-
11/s1/i-22971. [Teaching Resource] 
6. Suryana, Taryana (2023) Materi 10. Display Layout Dan Button If-
7/s1/i-20965. [Teaching Resource] 
7. Suryana, Taryana (2023) Materi 10. Display Layout Dan 
Button. [Teaching Resource] 
8. Suryana, Taryana (2023) Materi 9 Menggunakan Framework W3css If-
11 Jurusan Pwk Unikom 2023-2024. [Teaching Resource] 
9. Suryana, Taryana (2023) Materi 9 Menggunakan Framework W3css If-
11 Teknik Teknik Informatika 2023-2024. [Teaching Resource] 
10. Suryana, Taryana (2023) Materi7. Membagi Layar Dengan Frame Dan 
Iframe Teknik Informatika 2023-2024. [Teaching Resource] 
11. Suryana, Taryana (2023) Materi 6. Membuat Tautan Atau Link Dalam 
Html Teknik Informatika 2023-2024. [Teaching Resource] 
12. Suryana, Taryana (2023) Materi 5. Form Dengan Html Dan Html5 
Teknik Informatika Unikom 2023-2024. [Teaching Resource] 
13. Suryana, Taryana (2023) Materi 4. Membuat Tabel Dengan 
Html. [Teaching Resource] 
14. Suryana, Taryana (2023) Materi 3. Membuat List Berurutan Dan List 
Tidak Berurutan. [Teaching Resource] 
15. Suryana, Taryana (2023) Materi 2 Memformat Dokumen 
Html. [Teaching Resource] 
16. Suryana, Taryana (2023) Materi 1. Pengenalan Pemrograman Web, 
Browser Dan Text Edit. [Teaching Resource] 
17. Suryana, Taryana (2023) Materi 1. Pengenalan E-commerce Dan 
Persiapan Software Pendukungnya. [Teaching Resource] 
18. Suryana, Taryana (2023) Materi 11 Input Dan Label. [Teaching 
Resource] 
19. Suryana, Taryana (2023) Materi 10. Display Layout Dan 
Button. [Teaching Resource] 
 
20. Suryana, Taryana (2023) Materi 11. Input Dan Label Dalam W3 
Framework. [Teaching Resource] 
21. Suryana, Taryana (2022) Materi 9. Framework Css. [Teaching 
Resource] 
22. Suryana, Taryana (2022) W3 Css Framework. [Teaching Resource] 
23. Suryana, Taryana (2022) Materi 8 Pengenalan Css. [Teaching 
Resource] 
24. Suryana, Taryana (2022) Frame Dalam Html. [Teaching Resource] 
25. Suryana, Taryana (2022) Materi 6 Membuat Tautan Atau Link Dalam 
Html. [Teaching Resource] 
26. Suryana, Taryana (2022) Materi 5 Form Dengan Html Dan 
Html5. [Teaching Resource] 
27. Suryana, Taryana (2022) Materi 4. Membuat Tabel Dalam 
Html. [Teaching Resource] 
28. Suryana, Taryana (2022) Materi 3 Membuat List / Daftar. [Teaching 
Resource] 
29. Suryana, Taryana (2022) Materi 2 Memformat Dokumen 
Html. [Teaching Resource] 
30. Suryana, Taryana (2022) Materi 1 Pengenalan Html. [Teaching 
Resource] 
31. Suryana, Taryana (2021) Bab 1. Pengenalan Html. [Teaching Resource] 
32. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan 
Menggunakan Html Dan Dreamweaver. [Teaching Resource] 
33. https://www.w3schools.com/html, September, 2021 
34. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser 
Dan Text Editor.  [Teaching Resource] 
35. Suryana, Taryana (2021) Pengenalan Komputer Aplikasi It 1 Dan 
Pemrograman Web. [Teaching Resource] 
36. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan 
HTML, CSS & Java Script, Elexmedia Komputindo, Jakarta 
37. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan 
HTML., Gava Media, Jogyakarta 
38. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan 
HTML, CSS & Java Script, Elexmedia Komputindo, Jakarta 
39. Suryana, Taryana (2021) Bab 1. Pengenalan Html. [Teaching Resource] 
40. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan 
Menggunakan Html Dan Dreamweaver. [Teaching Resource] 
41. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan 
HTML., Gava Media, Jogyakarta 
42. https://www.w3schools.com/html, September, 2021 
43. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser 
Dan Text Editor.  [Teaching Resource] 
44. Suryana, Taryana (2021) Pengenalan Komputer Aplikasi It 1 Dan 
Pemrograman Web. [Teaching Resource] 
 
45. Suryana, Taryana (2021) Memformat Dokumen Html. [Teaching 
Resource] 
46. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html 
Materi Jurusan Perancangan Wilayah Dan Kota. [Teaching Resource] 
47. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html 
Untuk Jurusan Teknik Sipil. [Teaching Resource] 
48. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan 
Html. [Teaching Resource] 
49. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-wa1-
ul2-2021. [Teaching Resource] 
50. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas Ts-
2021-1. [Teaching Resource] 
51. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas Pwk-
2021-1. [Teaching Resource] 
52. Suryana, Taryana (2021) Input Dan Output Data Barang Dan Data 
Member. [Teaching Resource] 
53. Suryana, Taryana (2021) Membuat Aplikasi Pencatatan Perkawinan 
Disdukcapil. [Teaching Resource] 
54. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If3-
2021-1. [Teaching Resource] 
55. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-2-
2021-1. [Teaching Resource] 
56. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-
12021-1. [Teaching Resource] 
57. https://www.w3schools.com/html 
58. Suryana, Taryana (2022) Materi 10. Display Layout Dan 
Button. [Teaching Resource] 
59. Suryana, Taryana (2022) Materi 9. Framework Css. [Teaching 
Resource] 
60. Suryana, Taryana (2022) W3 Css Framework. [Teaching Resource] 
61. Suryana, Taryana (2022) Materi 8 Pengenalan Css. [Teaching 
Resource] 
62. Suryana, Taryana (2022) Frame Dalam Html. [Teaching Resource] 
63. Suryana, Taryana (2022) Materi 6 Membuat Tautan Atau Link Dalam 
Html. [Teaching Resource] 
64. Suryana, Taryana (2022) Materi 5 Form Dengan Html Dan 
Html5. [Teaching Resource] 
65. Suryana, Taryana (2022) Materi 4. Membuat Tabel Dalam 
Html. [Teaching Resource] 
66. Suryana, Taryana (2022) Materi 3 Membuat List / Daftar. [Teaching 
Resource] 
67. Suryana, Taryana (2022) Materi 2 Memformat Dokumen 
Html. [Teaching Resource] 
 
68. Suryana, Taryana (2022) Materi 1 Pengenalan Html. [Teaching 
Resource] 
69. Suryana, Taryana (2021) Bab 1. Pengenalan Html. [Teaching Resource] 
70. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan 
Menggunakan Html Dan Dreamweaver. [Teaching Resource] 
71. https://www.w3schools.com/html, September, 2021 
72. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser 
Dan Text Editor.  [Teaching Resource] 
73. Suryana, Taryana (2021) Pengenalan Komputer Aplikasi It 1 Dan 
Pemrograman Web. [Teaching Resource] 
74. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan 
HTML, CSS & Java Script, Elexmedia Komputindo, Jakarta 
75. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan 
HTML., Gava Media, Jogyakarta 
76. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan 
HTML, CSS & Java Script, Elexmedia Komputindo, Jakarta 
77. Suryana, Taryana (2021) Bab 1. Pengenalan Html. [Teaching Resource] 
78. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan 
Menggunakan Html Dan Dreamweaver. [Teaching Resource] 
79. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan 
HTML., Gava Media, Jogyakarta 
80. https://www.w3schools.com/html, September, 2021 
81. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser 
Dan Text Editor.  [Teaching Resource] 
82. Suryana, Taryana (2021) Pengenalan Komputer Aplikasi It 1 Dan 
Pemrograman Web. [Teaching Resource] 
83. Suryana, Taryana (2021) Memformat Dokumen Html. [Teaching 
Resource] 
84. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html 
Materi Jurusan Perancangan Wilayah Dan Kota. [Teaching Resource] 
85. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html 
Untuk Jurusan Teknik Sipil. [Teaching Resource] 
86. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan 
Html. [Teaching Resource] 
87. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-wa1-
ul2-2021. [Teaching Resource] 
88. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas Ts-
2021-1. [Teaching Resource] 
89. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas Pwk-
2021-1. [Teaching Resource] 
90. Suryana, Taryana (2021) Input Dan Output Data Barang Dan Data 
Member. [Teaching Resource] 
91. Suryana, Taryana (2021) Membuat Aplikasi Pencatatan Perkawinan 
Disdukcapil. [Teaching Resource] 
 
92. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If3-
2021-1. [Teaching Resource] 
93. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-2-
2021-1. [Teaching Resource] 
94. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-
12021-1. [Teaching Resource] 
95. https://www.w3schools.com/html 
 
 
 
 


Materi 11 Input Dan Label If-3/s1/i-20961

Aplikasi Teknologi Informasi I
Materi ini membahas mengenai Penggunaan Input dan label untuk membuat form masukan dan keluaran
Text, Checkbox, Select dan Radi

 
BAB 11 
W3 INPUTS DAN LABEL 
 
Taryana Suryana M.Kom 
Jurusan Perancangan Wilayah dan Kota 
2023/2024 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
HP.081221480577 – 087832908499 
 
11.W3.CCS Input 
Kelas w3-input memungkinkan Anda untuk membuat form input 
lebih baik dan lebih rapih, ada beberapa type masukan yang dapat 
digunakan, yaitu: 
Text 
Checkbox 
Select 
Radio 
 
11.1. Input Text 
Jika anda ingin memasukan data dalam bentuk kotak masukan satu 
baris, maka dapat digunakan input type text,  adapun penggunaannya 
adalah seperti berikut: 
 
 
<input class="w3-input" type="text" style="width:50%" name=”namaobjek” > 
 
 
 
Contoh Misalkan anda ingin membuat form input, dengan nama 
variable akan disimpan di namasiswa, maka code programnya adalah 
sebagai berikut: 
 
<input class="w3-input" type="text" name=”namasiswa”> 
 
 
 
Kode Lengkap: 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="css/w3.css"> 
<div class="w3-container"> 
<center> 
<h1>Berbagai Macam Input 
</center> 
<hr> 
<form class="w3-container"> 
<label>Input Standar<input class="w3-input" type="text" style="width:50%"> 
<label>Input Border<input class="w3-input w3-border" type="text" 
style="width:50%"> 
<label>Input round border <input class="w3-input w3-border w3-round-large" 
type="text" style="width:50%"> 
<label>Input border-0<input class="w3-input w3-border-0" type="text" 
style="width:50%"> 
<label>Input border warna<input class="w3-input w3-border w3-red" type="text" 
style="width:50%"> 
<label>Input hover<input class="w3-input w3-border w3-hover-blue" type="text" 
style="width:50%"> 
<label class="w3-text-blue">Input Animate<input class="w3-input w3-animate-input" 
type="text" style="width:135px"> 
<hr> 
</div> 
</div> 
 
 
 
11.1.1 Mewarnai Label dan Input 
Apabila anda ingin mewarnai label atau input pada form, maka dapat 
dilakukan dengan menambahkan class “w3-text-namawarna”, 
contoh: 
<label class="w3-text-teal"><b>First Name</b></label> 
<input class="w3-input w3-light-grey" type="text"> 
  
 
11.1.2. Bordered Input 
Ketika membuat form dan anda ingin agar form inputan memiliki garis atau 
border makan dapat dilakukan dengan menambahkan class w3-border, 
contoh: 
 
 
<input class="w3-input w3-border w3-round" type="text"> 
<input class="w3-input w3-border w3-round-large" type="text"> 
 
 
11.1.3.Hoverable inputs 
Class w3-hover-color akan menambahkan warna 
background ketika kursor mouse berada diatas kotak 
inputan. 
input class="w3-input w3-hover-green" type="text"> 
 
11.1.4. Animate Input 
Membuat Form Input dengan menggunakan w3-animate-input, pada 
contoh ini akan ditampilkan form masukan dengan lebar default 
sebesar 135px atau bisa juga dalam %, kemudian ketika Kursor mouse 
anda Click di kotak inputan tadi, maka otomatis form input akan 
menjadi lebar begitu juga jika di click diluar kotak input, maka form 
akan kembali ke awal 
Contoh: 
<p> 
<input class="w3-input w3-animate-input" type="text" style="width:135px"><br> 
<input class="w3-input w3-border w3-animate-input" type="text" style="width:30%"> 
 
</p> 
 
11.2. Input Card 
Jika anda menghendaki agar form input berbentuk seperti kartu, 
maka dapat ditambahkan class card seperti berikut: 
 
<div class="w3-card-4"> 
 <div class="w3-card-4"> 
    <div class="w3-container w3-green"> 
      <h2>DATA SISWA</h2> 
    </div> 
 <div> 
</div> 
 
 
NamaFile:css37.html 
 
<html> 
<title>W3.CSS</title> 
<meta name="viewport" content="width=device-width, initial-
scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<body> 
 
<div class="w3-container"> 
  <h2>Input Card</h2> 
   
  <div class="w3-card-4"> 
    <div class="w3-container w3-green"> 
      <h2>DATA SISWA</h2> 
    </div> 
 
    <form class="w3-container"> 
      <p> 
      <input class="w3-input" type="text" name="nim"> 
      <label>NIM</label></p> 
      <p>      
      <input class="w3-input" type="text" name="namalengkap"> 
      <label>NAMA LENGKAP</label></p> 
 
    </form> 
  </div> 
</div> 
</body> 
</html> 
 
 
 
 
Gambar 11.2. Form Input Bentuk Kartu 
 
 
  
 
 
 
11.3. Input Checkbox 
Jika anda ingin membuat form input dengan pilihan berbentuk 
checkbox atau checklist, maka dapat digunakan kelas w3-check,  
adapun perintah dasarnya adalah sebagai berikut: 
 
<input class="w3-check" type="checkbox" 
name="namaobjek"> 
 
<input class="w3-check" type="checkbox" checked="checked"> 
<label>Milk</label> 
 
<input class="w3-check" type="checkbox"> 
<label>Sugar</label> 
 
<input class="w3-check" type="checkbox" disabled> 
<label>Lemon (Disabled)</label> 
 
 
 
 
 
NamaFile:css38.html 
 
<html> 
<title>W3.CSS</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<body> 
 
<div class="w3-card-4"> 
<p> 
  <div class="w3-container w3-orange"> 
    <h2>Bahasa Pemrograman</h2> 
  </div> 
  <form class="w3-container" action="action_page.php"> 
  <p> 
  <input class="w3-check" type="checkbox" checked="checked" name="pascal"> 
  <label>Pascal</label></p> 
  <p> 
  <input class="w3-check" type="checkbox" name="delphi"> 
  <label>Delphi</label></p> 
  <p> 
  <input class="w3-check" type="checkbox" disabled> 
  <label>Assembler (Disabled)</label></p> 
  <hr> 
 <p> 
<button class="w3-btn w3-round-xxlarge w3-purple">Kirim Form</button> 
</form> 
</div> 
</body> 
</html> 
 
 
 
 
Gambar 11.3. Form Input Checkbox 
 
 
 
11.4.INPUT TIPE RADIO 
Jika anda ingin membuat form input dengan pilihan berbentuk radio, 
maka dapat digunakan kelas w3-radio,  adapun perintah dasarnya 
adalah sebagai berikut: 
<input class="w3-radio" type="radio" name="namaobjek" value="nilai" checked> 
 
 
NamaFile:css39.html 
<html> 
<meta name="viewport" content="width=device-width, 
initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<body> 
<div class="w3-card-4"> 
<p> 
  <div class="w3-container w3-orange"> 
 
    <h2>Jenis Kelamin</h2> 
  </div> 
  <form class="w3-container" action="action_page.php"> 
  <p> 
  <input class="w3-radio" type="radio" name="gender" 
value="male" checked> 
  <label>Pria</label></p> 
  <p> 
  <input class="w3-radio" type="radio" name="gender" 
value="female"> 
  <label>Wanita</label></p> 
  <p> 
  <input class="w3-radio" type="radio" name="gender" 
value="" disabled> 
  <label>Tidak Tahu (Disabled)</label></p> 
 <hr> 
 <p> 
<button class="w3-btn w3-round-xxlarge w3-purple">Kirim 
Form</button> 
</form> 
</div> 
</body> 
</html> 
 
 
 
Gambar 11.4. Form Input Radio 
 
 
 
 
11.5.Menggunakan Select Option 
Jika anda ingin membuat form dengan input berupa pilihan yang 
berbentuk dropdown, maka dapat digunakan kelas w3-select,  
adapun perintah dasarnya adalah sebagai berikut: 
 
<select class="w3-select" name="namaobjek"> 
    <option value="" disabled selected>Pilihan Anda</option> 
    <option value="1">Satu</option> 
    <option value="2">Dua</option> 
    <option value="3">Tiga</option> 
    <option value="4">Empat</option> 
  </select> 
 
 
Contoh misalkan ingin dibuat pilihan seperti Gambar 11.5 berikut: 
 
 
Gambar 11.5. Menggunakan Select Option 
 
NamaFile:css40.html 
<html> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
 
<form class="w3-container w3-card-4" action="action_page.php"> 
<div class="w3-container w3-green"> 
   <h2>Memilih menggunakan Select Option</h2> 
  </div> 
 
   <select class="w3-select" name="option"> 
    <option value="" disabled selected>Tempat Pavorit Kamu</option> 
    <option value="1">Cafe</option> 
    <option value="2">Taman</option> 
    <option value="3">Gunung</option> 
 <option value="4">laut</option> 
  </select> 
  <p><button class="w3-btn w3-teal">Kirim</button></p> 
</form> 
</html> 
 
 
  
 
Tugas 11. Buat Form Seperti berikut: 
Data Form, warna, isi, Boleh di Rubah asal memenuhi 4 jenis Tipe 
Input, yaitu ada text,select, radio dan checkbox 
NAMAFile:TUGAS11-NIM-NAMA.PDF 
 
 
Kirim Screenshot program dan Code Program dalam bentuk PDF ke Tugas 
Kuliah Online, dikirim paling telat hari Sabtu 
 
 
DAFTAR PUSTAKA 
1. Suryana, Taryana (2023) Materi 10. Display Layout Dan Button Pwk-
1/s1/i 22849. [Teaching Resource] 
2. Suryana, Taryana (2023) Materi 10. Display Layout Dan Button Pwk-
1/s1/i 22849. [Teaching Resource] 
3. Suryana, Taryana (2023) File Pendukung W3 Css. [Teaching 
Resource] 
4. Suryana, Taryana (2023) Materi 10. Display Layout Dan Button Web1 
Ul1/2016-21622. [Teaching Resource] 
5. Suryana, Taryana (2023) Materi 10. Display Layout Dan Button If-
10/s1/i-20968. [Teaching Resource] 
6. Suryana, Taryana (2023) Materi 10. Display Layout Dan Button If-
11/s1/i-22971. [Teaching Resource] 
7. Suryana, Taryana (2023) Materi 10. Display Layout Dan Button If-
7/s1/i-20965. [Teaching Resource] 
8. Suryana, Taryana (2023) Materi 10. Display Layout Dan 
Button. [Teaching Resource] 
9. Suryana, Taryana (2023) Materi 9 Menggunakan Framework W3css If-
11 Jurusan Pwk Unikom 2023-2024. [Teaching Resource] 
10. Suryana, Taryana (2023) Materi 9 Menggunakan Framework W3css If-
11 Teknik Teknik Informatika 2023-2024. [Teaching Resource] 
11. Suryana, Taryana (2023) Materi7. Membagi Layar Dengan Frame Dan 
Iframe Teknik Informatika 2023-2024. [Teaching Resource] 
12. Suryana, Taryana (2023) Materi 6. Membuat Tautan Atau Link Dalam 
Html Teknik Informatika 2023-2024. [Teaching Resource] 
13. Suryana, Taryana (2023) Materi 5. Form Dengan Html Dan Html5 
Teknik Informatika Unikom 2023-2024. [Teaching Resource] 
14. Suryana, Taryana (2023) Materi 4. Membuat Tabel Dengan 
Html. [Teaching Resource] 
15. Suryana, Taryana (2023) Materi 3. Membuat List Berurutan Dan List 
Tidak Berurutan. [Teaching Resource] 
16. Suryana, Taryana (2023) Materi 2 Memformat Dokumen 
Html. [Teaching Resource] 
17. Suryana, Taryana (2023) Materi 1. Pengenalan Pemrograman Web, 
Browser Dan Text Edit. [Teaching Resource] 
18. Suryana, Taryana (2023) Materi 1. Pengenalan E-commerce Dan 
Persiapan Software Pendukungnya. [Teaching Resource] 
19. Suryana, Taryana (2023) Materi 11 Input Dan Label. [Teaching 
Resource] 
 
20. Suryana, Taryana (2023) Materi 10. Display Layout Dan 
Button. [Teaching Resource] 
21. Suryana, Taryana (2023) Materi 11. Input Dan Label Dalam W3 
Framework. [Teaching Resource] 
22. Suryana, Taryana (2022) Materi 9. Framework Css. [Teaching 
Resource] 
23. Suryana, Taryana (2022) W3 Css Framework. [Teaching Resource] 
24. Suryana, Taryana (2022) Materi 8 Pengenalan Css. [Teaching 
Resource] 
25. Suryana, Taryana (2022) Frame Dalam Html. [Teaching Resource] 
26. Suryana, Taryana (2022) Materi 6 Membuat Tautan Atau Link Dalam 
Html. [Teaching Resource] 
27. Suryana, Taryana (2022) Materi 5 Form Dengan Html Dan 
Html5. [Teaching Resource] 
28. Suryana, Taryana (2022) Materi 4. Membuat Tabel Dalam 
Html. [Teaching Resource] 
29. Suryana, Taryana (2022) Materi 3 Membuat List / Daftar. [Teaching 
Resource] 
30. Suryana, Taryana (2022) Materi 2 Memformat Dokumen 
Html. [Teaching Resource] 
31. Suryana, Taryana (2022) Materi 1 Pengenalan Html. [Teaching 
Resource] 
32. Suryana, Taryana (2021) Bab 1. Pengenalan Html. [Teaching Resource] 
33. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan 
Menggunakan Html Dan Dreamweaver. [Teaching Resource] 
34. https://www.w3schools.com/html, September, 2021 
35. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser 
Dan Text Editor.  [Teaching Resource] 
36. Suryana, Taryana (2021) Pengenalan Komputer Aplikasi It 1 Dan 
Pemrograman Web. [Teaching Resource] 
37. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan 
HTML, CSS & Java Script, Elexmedia Komputindo, Jakarta 
38. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan 
HTML., Gava Media, Jogyakarta 
39. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan 
HTML, CSS & Java Script, Elexmedia Komputindo, Jakarta 
40. Suryana, Taryana (2021) Bab 1. Pengenalan Html. [Teaching Resource] 
41. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan 
Menggunakan Html Dan Dreamweaver. [Teaching Resource] 
42. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan 
HTML., Gava Media, Jogyakarta 
43. https://www.w3schools.com/html, September, 2021 
44. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser 
Dan Text Editor.  [Teaching Resource] 
 
45. Suryana, Taryana (2021) Pengenalan Komputer Aplikasi It 1 Dan 
Pemrograman Web. [Teaching Resource] 
46. Suryana, Taryana (2021) Memformat Dokumen Html. [Teaching 
Resource] 
47. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html 
Materi Jurusan Perancangan Wilayah Dan Kota. [Teaching Resource] 
48. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html 
Untuk Jurusan Teknik Sipil. [Teaching Resource] 
49. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan 
Html. [Teaching Resource] 
50. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-wa1-
ul2-2021. [Teaching Resource] 
51. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas Ts-
2021-1. [Teaching Resource] 
52. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas Pwk-
2021-1. [Teaching Resource] 
53. Suryana, Taryana (2021) Input Dan Output Data Barang Dan Data 
Member. [Teaching Resource] 
54. Suryana, Taryana (2021) Membuat Aplikasi Pencatatan Perkawinan 
Disdukcapil. [Teaching Resource] 
55. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If3-
2021-1. [Teaching Resource] 
56. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-2-
2021-1. [Teaching Resource] 
57. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-
12021-1. [Teaching Resource] 
58. https://www.w3schools.com/html 
59. Suryana, Taryana (2022) Materi 10. Display Layout Dan 
Button. [Teaching Resource] 
60. Suryana, Taryana (2022) Materi 9. Framework Css. [Teaching 
Resource] 
61. Suryana, Taryana (2022) W3 Css Framework. [Teaching Resource] 
62. Suryana, Taryana (2022) Materi 8 Pengenalan Css. [Teaching 
Resource] 
63. Suryana, Taryana (2022) Frame Dalam Html. [Teaching Resource] 
64. Suryana, Taryana (2022) Materi 6 Membuat Tautan Atau Link Dalam 
Html. [Teaching Resource] 
65. Suryana, Taryana (2022) Materi 5 Form Dengan Html Dan 
Html5. [Teaching Resource] 
66. Suryana, Taryana (2022) Materi 4. Membuat Tabel Dalam 
Html. [Teaching Resource] 
67. Suryana, Taryana (2022) Materi 3 Membuat List / Daftar. [Teaching 
Resource] 
 
68. Suryana, Taryana (2022) Materi 2 Memformat Dokumen 
Html. [Teaching Resource] 
69. Suryana, Taryana (2022) Materi 1 Pengenalan Html. [Teaching 
Resource] 
70. Suryana, Taryana (2021) Bab 1. Pengenalan Html. [Teaching Resource] 
71. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan 
Menggunakan Html Dan Dreamweaver. [Teaching Resource] 
72. https://www.w3schools.com/html, September, 2021 
73. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser 
Dan Text Editor.  [Teaching Resource] 
74. Suryana, Taryana (2021) Pengenalan Komputer Aplikasi It 1 Dan 
Pemrograman Web. [Teaching Resource] 
75. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan 
HTML, CSS & Java Script, Elexmedia Komputindo, Jakarta 
76. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan 
HTML., Gava Media, Jogyakarta 
77. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan 
HTML, CSS & Java Script, Elexmedia Komputindo, Jakarta 
78. Suryana, Taryana (2021) Bab 1. Pengenalan Html. [Teaching Resource] 
79. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan 
Menggunakan Html Dan Dreamweaver. [Teaching Resource] 
80. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan 
HTML., Gava Media, Jogyakarta 
81. https://www.w3schools.com/html, September, 2021 
82. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser 
Dan Text Editor.  [Teaching Resource] 
83. Suryana, Taryana (2021) Pengenalan Komputer Aplikasi It 1 Dan 
Pemrograman Web. [Teaching Resource] 
84. Suryana, Taryana (2021) Memformat Dokumen Html. [Teaching 
Resource] 
85. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html 
Materi Jurusan Perancangan Wilayah Dan Kota. [Teaching Resource] 
86. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html 
Untuk Jurusan Teknik Sipil. [Teaching Resource] 
87. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan 
Html. [Teaching Resource] 
88. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-wa1-
ul2-2021. [Teaching Resource] 
89. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas Ts-
2021-1. [Teaching Resource] 
90. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas Pwk-
2021-1. [Teaching Resource] 
91. Suryana, Taryana (2021) Input Dan Output Data Barang Dan Data 
Member. [Teaching Resource] 
 
92. Suryana, Taryana (2021) Membuat Aplikasi Pencatatan Perkawinan 
Disdukcapil. [Teaching Resource] 
93. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If3-
2021-1. [Teaching Resource] 
94. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-2-
2021-1. [Teaching Resource] 
95. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-
12021-1. [Teaching Resource] 
96. https://www.w3schools.com/html 
 
 
 
 


Materi 11 Input Dan Label Pwk-1/s1/i 22849

Artikel Umum
Tulisan ini dibuat pada tahun 2017, sebagai panduan dasar membuat user atau mendaftar di Sinta Ristek Dikt

Cara Mendaftar Sinta Ristek Dikti

kurniiasih, dewi

Rusfiana, Yudi

Hilman, Yusuf adam

Sosiologi Teknologi Dalam E-Government

Pemrograman Web 2
Materi ini Membahas mengenai bagaimana cara membaca data yang dikirim dari form html kemudian diproses di javascript dan ditampilkan kembali hasilnya di form htm

 
BAB 5 
Membaca Data Bertipe Text Dari Html Ke 
Javascript 
 
 
Oleh:Taryana Suryana M.Kom 
Teknik Informatika Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081221480577 
 
 
 
  
5.1.Membaca Data dari HTML ke 
JavaScript  
Pada materi ini akan dibahas bagaimana membaca data dari objek yang dituliskan di HTML 
kemudian dibaca di JavaScript. 
Untuk lebih Mudah dalam Mempelajari Proses Pembacaan data dari html dan 
menampilkannya dengan JavaScript dapat dilakukan dengan membuat sebuah file 
template.html yang nantinya dapat dijadikan acuan ketika akan membuat program 
dalam JavaScript yang memiliki Proses ke sebuah Function. 
1. Buat Sebuah Function dalam JavaScript 
2. Function dipanggil melalui button melalui method onclick, 
 
Berkut adalah kode program untuk template.html 
<form name=form> 
<script> 
function proses() 
{ 
  alert("Halo ini Java Script"); 
} 
 
</script> 
 
<html> 
<center> 
<h2>Judul Program 
<hr> 
<table> 
 Kode HTML di Sini 
</table> 
<hr> 
<input type=button value=Proses onclick="proses()"> 
<input type=reset value=Reset> 
 
 
 
Gambar 5.1. Keluaran template.html 
 
 
 
Gambar 5.2. Messagebox ketika tombol Proses di Click 
 
 
 
 
 
 
 
 
 
5.2.Membaca Data Bertipe Text  
Untuk membuat form masukan dengan tipe text dapat dilakukan dengan memberikan perintah 
dasar html berikut: 
 <input type=text name=namaobjek size=5> 
Lebih jelasnya berikut akan dibuat form masukan untuk menghitung Luas Persegi Panjang, 
dengan Input Panjang dan lebar serta hasil keluarannya adalah Luas. 
1. Buatlah design form masukan seperti gambar 3.1.  
 
Gambar 5.2.Design Form Objek Text 
 
2. Data contoh 
Tabel 5.1 Berikut merupakan contoh Data Masukan dan Hasilnya 
 Tabel 5.1. Data Masukan dan variabel 
 
Variabel Data Masukan Keluaran 
Panjang 100  
Lebar 50  
Luas Panjang*lebar 5000 
 
 
3. Code Program 
Berikut adalah code program untuk membuat form seperti gambar 5.2 diatas 
 
Nama File:textbox.html 
<form name=form> 
<script> 
function proses() 
{ 
var panjang=document.form.panjang.value; 
var lebar=document.form.lebar.value; 
var luas=panjang*lebar; 
document.form.luas.value=luas; 
} 
</script> 
 
 
<html> 
<center> 
<font size=4> 
Menghitung Luas Persegi Panjang 
<hr> 
<table> 
<tr><td>Panjang<td><input name=panjang size=5> 
<tr><td>Lebar<td><input name=lebar size=5> 
<tr><td colspan=2><hr> 
<tr><td>Luas<td><input name=luas size=5> 
</table> 
<hr> 
<input type=button value="Proses" onclick="proses()"> 
<input type=reset value="Reset"> 
</html> 
 
4. Skenario Pengujian 
Untuk menguji Program apakah sesuai dengan yang diharapkan dapat dilakukan 
dengan cara pengujian sebagai berikut: 
1) Jalankan Program textbox.html 
2) Akan ditampilkan Form seperti gambar 5.2 
3) Isi Kolom Panjang dan Lebar, Panjang diisi angka 100 dan lebar diisi angka 50, 
kemudian click tombol Proses 
4) Program akan melakukan proses perkalian antara Panjang*Lebar, sehingga pada 
Kolom Luas akan ditampilkan angka 5000 
5) Jika Luas  yang ditampilkan sesuai dengan tabel 5.1 diatas, maka program sudah 
sesuai dengan yang diharapkan 
6) Jika Form masukan tidak di isi maka akan ditampilkan hasil seperti gambar 5.4 
 
Gambar 5.3.Tampilan Layar ketika panjang dan lebar diisi data 
 
 
 
 
Gamar 5.4.Tampilan Layar ketika Panjang dan Lebar tidak diisi 
  
 
Tugas 5.1  
Buat Program untuk menghitung Gaji Pegawai dengan Design  Form Seperti gambar 5.5 berikut: 
 
Dengan Input Nama Pegawai, Jamkerja, upahperjam dan jumlah anak. 
sedangkan outputnya Gaji Perbulan, Tunjangan Anak, Gaji Total sebulan, PPH10% dan Gaji Bersih 
diterima 
 
 
 
Gambar 5.5. Design Form Program Gaji Pegawai 
Note: 
*1 minggu 5 hari kerja 
*1 Bulan 4 Minggu 
*Tunjangan Anak 10% Tiap Anak  dari Gaji  
 
 
 
setelah semua program selesai dibuat dan hasilnya sesuai dengan hasil hitungan manual 
anda :  
 
Dengan menggunakan Microsoft Word Copy Paste Kode program beserta 
tangkapan layar hasil keluarannya (screenshot), kemudian kirim ke Modul Tugas 
yang ada di kuliahonline.unikom.ac.id, Nama File: Tugas5-nama-nim-kelas.pdf 
Dikumpulkan Paling Lambat Setiap Hari Minggu Jam 18:00 
 
Ok…selamat mencoba 
 
 
PUSTAKA 
 
1. Suryana, Taryana (2023) Materi 4. Array Dalam Java Script. [Teaching Resource] 
2. Suryana, Taryana (2023) Materi 3 Fungsi Kondisi - Fungsi Logika. [Teaching Resource] 
3. Suryana, Taryana (2023) Materi 3. Materi 3 Fungsi Kondisi - Fungsi Logika. [Teaching Resource] 
4. Suryana, Taryana (2023) Materi 2 Perulangan Dalam Java Script. [Teaching Resource] 
5. Suryana, Taryana (2023) Materi 1 Pengenalan Java Script. [Teaching Resource] 
6. Suryana, Taryana (2022) Penggunaan Array Dan Methode Array Dalam Java Script. [Teaching 
Resource] 
7. Suryana, Taryana (2022) Materi 3. Operator Dalam Php. [Teaching Resource] 
8. Suryana, Taryana (2022) Materi 3. Membuat List Atau Daftar Dalam Html. [Teaching Resource] 
9. Suryana, Taryana (2022) Fungsi Logika Atau Percabangan. [Teaching Resource] 
10. Suryana, Taryana (2022) Pengenalan Dasar Pemrograman Java Script. [Teaching Resource] 
11. Suryana, Taryana (2022) Fungsi Logika Atau Pecabangan Dalam Javascript. [Teaching Resource] 
12. Suryana, Taryana (2022) Operator Dalam Php Dan Mysql. [Teaching Resource] 
13. Suryana, Taryana (2021) Edit Data Pada Aplikasi Ijin Gangguan Ho. [Teaching Resource] 
14. Suryana, Taryana (2021) Pembuatan Aplikasi Ijin Gangguan Ho Dengan Php Dan 
Mysql. [Teaching Resource] 
15. Suryana, Taryana (2021) Fungsi Logika Dalam Pemrograman Php Dan Mysql. [Teaching 
Resource] 
16. Suryana, Taryana (2021) Input Dan Output Data Barang Dan Data Member. [Teaching Resource] 
17. Suryana, Taryana (2021) Instalasi Xampp Untuk Menjalankan Web Server Apache Database 
Mysql Dan Program Php. [Teaching Resource] 
18. Suryana, Taryana (2021) Membuat Formulir Pemasukan Data Dengan Html Dan Html5 Kelas If-
wa1-ul2-2021. [Teaching Resource] 
19. Suryana, Taryana (2021) Berbagai Macam Operator Dalam Php Dan Mysql. [Teaching Resource] 
20. Suryana, Taryana (2021) Instalasi Xampp Untuk Pemrograman E-commerce. [Teaching Resource] 
21. Suryana, Taryana (2021) Pengenalan E-commerce. [Teaching Resource] 
22. Suryana, Taryana (2021) Membuat Database. [Teaching Resource] 
23. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, 
Elexmedia Komputindo, Jakarta 
24. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
25. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
26. https://www.w3schools.com/  September, 2021 
27. Suryana, Taryana; Sarwono, Jonathan. E-Commece Menggunakan PHP & MySQL, Graha Ilmu, 
Jogyakarta 
28. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor. [Teaching 
Resource] 
29. Suryana, Taryana, e-COMMERCE MENGUNAKAN PHP DAN MYSQL, Graha Ilmu, 
Jogyakarta 
30. http://www.grahailmu.co.id/previewpdf/978-979-756-182-6-231.pdf 
 
 
 
 


Materi 5 Membuat Form Input Dan Penangangan Dengan Java Script

Pemrograman Web 2
Materi ini membahas mengenai bagaimana cara membaca data dengan input select dan textarea yang dikirim dari form html 
kemudian diproses di javascript dengan menggunakan fungsi logik

 
BAB 6 
MEMBACA DATA OBJEK BERTIPE  
SELECT dan TEXTAREA 
 
 
Oleh:Taryana Suryana M.Kom 
Teknik Informatika Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081221480577 
 
 
 
 
6.1.Membaca Data Objek Select dan 
Textarea 
Pada materi ini akan dibahas bagaimana membaca data dari objek yang bertipe select, 
biasanya digunakan untuk memilih satu pilihan diantara beberapa pilihan yang ditawarkan. 
Sedangkan objek bertipe textarea digunakan untuk memasukan data yang panjang 
 
 
Objek bertipe select dapat digunakan untuk memilih satu pilihan diantara beberapa 
pilihan yang ditawarkan 
Objek bertipe textarea dapat digunakan untuk menampung masukan text yang panjang 
 
1. Buatlah design form masukan seperti gambar 6.1. Berikut  
 
 
Gambar 6.1.Design Form Objek Select dan Textarea 
 
2. Data contoh 
Tabel 6.1 Berikut merupakan contoh data value dari objek Jabatan dan Pendidikan 
 Tabel 6.1. Design output keluaran 
 
JABATAN VALUE 
 MANAGER 
 HRD 
 MARKETING 
PENDIDIKAN VALUE 
 SMA 
 S1 
 S2 
 
 
 
3. Code Program 
Berikut adalah code program untuk membuat form seperti gambar 6.1 diatas 
 
Nama File:select.html 
<form name=form> 
<script> 
function proses() 
{ 
  var jabatan=document.form.jabatan.value; 
  var pendidikan=document.form.pendidikan.value; 
  var alamat=document.form.alamat.value; 
  alert("Jabatan:"+jabatan+"\nPendidikan:"+pendidikan+"\nAlamat:"+alamat); 
} 
</script> 
<html> 
 <center> 
 Membaca Objek bertipe select dan Text Area 
 <hr> 
 
 <table> 
 <tr><td>Jabatan<td><select name=jabatan> 
 <option>MANAGER 
 <option>HRD 
 <option>MARKETING 
 </select> 
 <tr><td>Pendidikan<td><select name=pendidikan> 
 <option>SMA 
 <option>S1 
 <option>S2 
 <option>S3 
 </select> 
<tr><td>Alamat<td><textarea name=alamat></textarea> 
 </table> 
 <hr> 
 <input type=button value="Proses" onclick="proses()"> 
 <input type=reset value="Reset"> 
</html> 
 
 
Gambar 6.2.Mengisi Form Objek Select dan Text Area 
 
 
4. Skenario Pengujian 
Pengujian: 
Untuk menguji Program apakah sesuai dengan yang diharapkan dapat dilakukan dengan cara 
pengujian sebagai berikut: 
1) Pilih Jabatan Manager 
2) Pilih Pendidikan SMA 
3) Pada Alamat Tulis:Jl.Dipati ukur 112 Bandung 
4) Click Tombol Proses 
5) Selanjutnya pada Popup Message, akan ditampilkan Jabatan, Pendidikan dan Alamat   sesuai 
masukan 
 
 
 
 
Gambar 6.3 Output Object tipe select dan text area 
 
 
5.Membandingkan Isi Value Objek bertipe Select 
Untuk membandingkan isi variabel yang ada dalam object Select, dapat dilakukan dengan cara 
membandingkan isi variabel apakah sama dengan isi Value, contoh: 
Jika Jabatan “Manager” maka Gajipokok nya adalah 15000000 
 
1. var jabatan=document.form.jabatan.value; 
2. if(jabatan==”MANAGER”) var gajipokok=15000000; 
3. document.form.gajipokok.value=gajipokok; 
 
TUGAS 6. 
Tugas 6.1. Buat Program untuk menghitung Gaji Pegawai dengan Design  Form Seperti berikut: 
 
Dengan Input Nama Pegawai menggunakan text, Jabatan dan Pendidikan menggunakan object 
select, Alamat menggunakan textarea,  
Gaji Pokok merupakan outputnya, dapat dicari berdasarkan nama jabatannya, dengan ketentuan 
seperti tabel 6.1 
Tabel 6.1. Tabel Gaji Pokok berdasarkan Jabatan 
 
Jabatan Gajipokok 
MANAGER 15000000 
HRD 8000000 
MARKETING 5000000 
 
 
Berikut adalah design Form yang akan dibuat: 
 
 
Gambar 6.4.Design Form Masukan data Pegawai 
 
 
 
 
 
 
Gambar 6.5.Hasil Output Program Gaji Pegawai 
 
Isi data Nama Pegawai, jabatan dan Pendidikan, Kemudian Click Tombol Proses, maka 
hasilnya gajipokok harus keluar sesuai table gaji diatas 
  
 
Tugas6.2. 
Untuk tugas62 merupakan lanjutan dari tugas61, dengan menambahkan Tunjangan, 
Tunjangan dicari berdasarkan Pendidikan, adapun rincian tunjangan adalah seperti tabel 
berikut: 
 
Tabel 6.2. Pendidikan 
 
PENDIDIKAN TUNJANGAN 
SMA 10% 
S1 15% 
S2 20% 
S3 30% 
 
Contoh: 
Jika Jabatan MANAGER dan Pendidikan SMA maka Tunjangannya adalah sebesar 10% 
dari Gajipokok, yaitu 10% dari 15000000, yaitu sebesar 1.5 Juta Rupiah 
 
 
Gambar 6.6.Hasil Output Program Gaji Pegawai 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Gaji Total bisa dicari dari Gajipokok ditambah dengan Tunjangan 
setelah semua program selesai dibuat dan hasilnya sesuai dengan hasil hitungan manual 
anda :  
 
Dengan menggunakan Microsoft Word Copy Paste Kode program beserta 
tangkapan layar hasil keluarannya (screenshot), kemudian kirim ke Modul Tugas 
yang ada di kuliahonline.unikom.ac.id, Nama Filenya: Tugas6-nama-nim-kelas.pdf 
Dikumpulkan Paling Lambat Setiap Hari Minggu Jam 18:00 
Ok…selamat mencoba 
 
 
 
 
  
 
 
DAFTAR PUSTAKA 
 
1. Suryana, Taryana (2023) Materi 5 Membuat Form Input Dan Penangangan Dengan Java 
Script. [Teaching Resource] 
2. Suryana, Taryana (2023) Materi 4. Array Dalam Java Script. [Teaching Resource] 
3. Suryana, Taryana (2023) Materi 3 Fungsi Kondisi - Fungsi Logika. [Teaching Resource] 
4. Suryana, Taryana (2023) Materi 3. Materi 3 Fungsi Kondisi - Fungsi Logika. [Teaching Resource] 
5. Suryana, Taryana (2023) Materi 2 Perulangan Dalam Java Script. [Teaching Resource] 
6. Suryana, Taryana (2023) Materi 1 Pengenalan Java Script. [Teaching Resource] 
7. Suryana, Taryana (2022) Penggunaan Array Dan Methode Array Dalam Java Script. [Teaching 
Resource] 
8. Suryana, Taryana (2022) Materi 3. Operator Dalam Php. [Teaching Resource] 
9. Suryana, Taryana (2022) Materi 3. Membuat List Atau Daftar Dalam Html. [Teaching Resource] 
10. Suryana, Taryana (2022) Fungsi Logika Atau Percabangan. [Teaching Resource] 
11. Suryana, Taryana (2022) Pengenalan Dasar Pemrograman Java Script. [Teaching Resource] 
12. Suryana, Taryana (2022) Fungsi Logika Atau Pecabangan Dalam Javascript. [Teaching Resource] 
13. Suryana, Taryana (2022) Operator Dalam Php Dan Mysql. [Teaching Resource] 
14. Suryana, Taryana (2021) Edit Data Pada Aplikasi Ijin Gangguan Ho. [Teaching Resource] 
15. Suryana, Taryana (2021) Pembuatan Aplikasi Ijin Gangguan Ho Dengan Php Dan 
Mysql. [Teaching Resource] 
16. Suryana, Taryana (2021) Fungsi Logika Dalam Pemrograman Php Dan Mysql. [Teaching 
Resource] 
17. Suryana, Taryana (2021) Input Dan Output Data Barang Dan Data Member. [Teaching Resource] 
18. Suryana, Taryana (2021) Instalasi Xampp Untuk Menjalankan Web Server Apache Database 
Mysql Dan Program Php. [Teaching Resource] 
19. Suryana, Taryana (2021) Membuat Formulir Pemasukan Data Dengan Html Dan Html5 Kelas If-
wa1-ul2-2021. [Teaching Resource] 
20. Suryana, Taryana (2021) Berbagai Macam Operator Dalam Php Dan Mysql. [Teaching Resource] 
21. Suryana, Taryana (2021) Instalasi Xampp Untuk Pemrograman E-commerce. [Teaching Resource] 
22. Suryana, Taryana (2021) Pengenalan E-commerce. [Teaching Resource] 
23. Suryana, Taryana (2021) Membuat Database. [Teaching Resource] 
24. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, 
Elexmedia Komputindo, Jakarta 
25. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
26. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
27. https://www.w3schools.com/  September, 2021 
28. Suryana, Taryana; Sarwono, Jonathan. E-Commece Menggunakan PHP & MySQL, Graha Ilmu, 
Jogyakarta 
29. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor. [Teaching 
Resource] 
30. Suryana, Taryana, e-COMMERCE MENGUNAKAN PHP DAN MYSQL, Graha Ilmu, 
Jogyakarta 
31. http://www.grahailmu.co.id/previewpdf/978-979-756-182-6-231.pdf 
 
 
 
 
 
 
 


Materi 6. Membaca Data Objek Select Dan Textarea

Aplikasi IT-2
Materi ini membahas mengenai cara membaca data dari objek bertipa checkbox dan radio di dalam java scrip

Materi 7 Penggunaan Checkbox Dan Radio

Komputer Aplikasi Akuntansi VI - E-Commerce
Materi ini membahas mengenai penggunaan perintah SQL Delete, untuk melakukan penghapusan Dat

Materi 7.hapus Data

Pemrograman Web 2
Materi ini membahas mengenai pengenalan Database, Tabel, Field, Type, Length, index, primary key
bahasa sql, insert, update, select, delet

Not a member yet