Tugas 5 (Pemrograman Web)

TUGAS 5 PEMROGRAMAN WEB
HTML FORM

  1. memiliki text input untuk memasukkan nama
  2. memiliki radio button input untuk memilih jenis kelamin (laki-laki / perempuan)
  3. memiliki drop down list untuk memilih Fakultas dari semua fakultas di UNSRI
  4. memiliki text area untuk memasukkan Biografi
  5. memiliki text input untuk memasukkan mata kuliah favorit, yang sudah memiliki beberapa nama mata kuliah yang sudah terdefinisi (gunakan datalist)
  6. memiliki range input untuk menentukan tinggi badan
  7. memiliki password input untuk memasukkan kata rahasia
  8. memiliki checkbox untuk menentukan apakah tamu membawa kado atau tidak
  9. memiliki number input untuk memasukkan semester yang sedang ditempuh
  10. memiliki date input untuk memasukkan tanggal lahir
  11. memiliki color input untuk memasukkan warna favorit
  12. memiliki email input untuk memasukkan email
  13. memiliki caption form "Buku Tamu" yang menggabungkan semua isian form
  14. memiliki tombol "Reset" untuk menghapus semua data form
  15. memiliki sebuah tombol kirim, yang apabila dipilih, akan menampilkan halaman "Terima kasih"

JAWABAN:

1.Membuat sebuah text input memakai tag sebagai berikut


<tr>
<td width="23%" height="19" bgcolor="#00CCFF"><font face="Comic Sans MS">Nama &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</font></td>
<input type="text" name="Depan"size="20" placeholder="depan" style="font family:Comic Sans MS;font-size:12pt; font-color:lavender;"></font>
<td width="50%" height="19" bgcolor="#00CCFF"><font face="Comic Sans MS"></td>
<input type="text" name="belakang"size="20" placeholder="belakang" style="font family:Comic Sans MS;font-size:12pt"></font>
<td width="50%" height="19" bgcolor="#00CCFF"><font face="Comic Sans MS"></td>
</tr>
hasilnya ouputnya:

2.tag html membuat sebuah radio butto segai berikut

<tr>
<td width="23%" height="19" bgcolor="#00CCFF"><font face="Comic Sans MS">Jenis Kelamin &nbsp;&nbsp;:</font></td>
<td width="77%" height="19" bgcolor="#00CCFF"><font face="Comic Sans MS">
<input type="radio" name="jenis kelamin" value="laki-laki" checked >Laki-laki
<input type="radio" name="Jenis kelamin" value="Perempuan">Perempuan</font></td>
</tr>
hasil outputnya

3.membuat sebuah dropdown
 <td width="23%"height="19"bgcolor="#00CCFF"><font face="Comic Sans MS">Fakultas &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font></td>
<td width="77%" height="19"bgcolor="#00CCFF"><font face="Comic Sans MS">:
<select size="1" name="Fakultas" style="font-family:Comic Sans MS;font-size:12pt">
<option selected value="Fasilkom">FASILKOM</option>
<option  value="Fkip" >FKIP</option>
<option  value="Fk">FK</option>
<option  value="Fisip">FISIP</option>
<option  value="FE">FE</option>
<option  value="FH">FH</option>
<option  value="FT">FT</option>
<option  value="Mipa">MIPA</option>
<option  value="FKM">FKM</option>
<option  value="Fisip">FP</option>
</select></font>
</td>
</tr>

 hasil ouputnya



4.membuat sebuah text area
<tr>
<td width="20%"height="16"bgcolor="#00CCFF"><font face="Comic Sans MS">Biografi&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</font></td>
<td width="30px"height="16"bgcolor="#00CCFF"><font face="Comic Sans MS">
<textarea rows="6" name="Biografi"cols="60"></textarea></font></td>
</tr>
hasil ouputnya


5.tag html membuat text inputan yang terdapat datalist
<td width="20%"height="16"bgcolor="#00CCFF"><font face="Comic Sans MS">Mata kuliah&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</td>
<input list="matakuliah" name="matakuliah" size="30px">
<datalist id="matakuliah">
<option value="Algoritma dan pemrograman">
<option value="Konsep Sistem Informasi">
<option value="Pemrograman Web">
<option value="Pengantar Teknologi Informasi">
<option value="Agama">
<option value="Praktek Pemrograman Web">
<option value="Basis Data">
<option value="Praktek Basis Data">
<option value="Praktek alpro">
<option value="Oarkom">
</datalist>

 hasil ouputnya


6.mmebuat sebuah range input tinggi badan.
<br>
<br>Tinggi badan&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:
100<input type="range" name="Tinggi badan" min="100" max="200">200<br><br>

 hasil ouputnya

7.membuat sebuah text berisi passsword
<tr>
<td width="20%"height="16"bgcolor="#00CCFF"><font face="Comic Sans MS">Password&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</font></td>
<input type="password" name="psw" size="40"></tr>

 hasil outputnya




8.membuat sebuah checbox
<tr>
<td width="20%"height="16"bgcolor="#00CCFF"><font face="Comic Sans MS">Membawa kado&nbsp;&nbsp;:</font></td>
<input type="checkbox" name="membawa kado" value="ya">ya
</tr>

 hasil ouputnya

9. membuat sebuah number input
Semester&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:
<input type="number" name="jumlah sks" min="1" max="8">
hasil ouputnya

10.membuat date input form
Tanggal Lahir&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:
<input type="date" name="bday">
hasil ouputnya

11.for dengan pilihan warna
Select your favorite color &nbsp;&nbsp;&nbsp;&nbsp;:
<input type="color" name="warna" value="#ff0000">

hasil ouputnya:



12.membuat isi form dengan memasukkan email
E-mail&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: <input type="email" name="user_email" size="40" placeholder="example@gmail.com">

hasil ouputnya'

13.membuat caption form
<fieldset>
<legend>Buku Tamu</legend>
<fieldset>
<legend>Pengisian Data Tamu</legend>
</fieldset>
</fieldset>

 hasil ouputnya
14.submit untuk mereset data dalam form
<input type="Reset" value="Reset">

 hasil ouputnya
15.membuat sebuah tombol mengarah ke halaman terima kasih
<input type="submit" value="Kirim" onclick="alert('Terima Kasih')">

 hasil ouputnya



style yang digunakan dalam membuat sebuah from
<style>
div#header{
width:1000px;
height:230px;
background-color:black;
margin-left:190px;
color:white;
padding-bottom:30px;
border:3px solid red;}
div#content{
width: 850px;
height:925px;
padding:30px;
margin: auto; /* membuat posisi di tengah */
border:2px solid red;
background-color:gray;
color:black;
mardin-bottom:100px;}
div.cities{
background-color:brown;
color: white;
margin: 2px 2px 2px 2px;
padding: 30px;
height:90px;
border:2px solid lavender;
border-radius:6px;}
nav {
border-top: 1px solid white;
border-bottom: 1px solid white;
padding: 1em;
background-color: lime;
text-align: right;
width:260px;
margin-left:950px;}
a {
color: white;
padding: 1em; 
text-decoration: none;}
a:hover:not(.active){
background-color: gray;
padding: 1em;}
.active {
background-color: firebrick;
padding:1em;}
table#to1 td{
width:85px;
height:20px;}
div#atas{
width:1000px;
margin-left:190px;}
</style>
keselurhuna html
<!DOCTYPE html>
<html>
<head>
<style>
div#header{
width:1000px;
height:230px;
background-color:black;
margin-left:190px;
color:white;
padding-bottom:30px;
border:3px solid red;}
div#content{
width: 850px;
height:925px;
padding:30px;
margin: auto; /* membuat posisi di tengah */
border:2px solid red;
background-color:gray;
color:black;
mardin-bottom:100px;}
div.cities{
background-color:brown;
color: white;
margin: 2px 2px 2px 2px;
padding: 30px;
height:90px;
border:2px solid lavender;
border-radius:6px;}
nav {
border-top: 1px solid white;
border-bottom: 1px solid white;
padding: 1em;
background-color: lime;
text-align: right;
width:260px;
margin-left:950px;}
a {
color: white;
padding: 1em; 
text-decoration: none;}
a:hover:not(.active){
background-color: gray;
padding: 1em;}
.active {
background-color: firebrick;
padding:1em;}
table#to1 td{
width:85px;
height:20px;}
div#atas{
width:1000px;
margin-left:190px;}
</style>
</head>
<body style="background-image:url(waw.jpg);">
<div id="atas">
<marquee><h2><i><font color="brown">Welcome to Website Beriadi Agung Nur Rezqe</font></i></h2></marquee></div>
<div id="header">
<br>
<table id="to1" valign="bottom">
<tr>
<td></td>
<td><h2><center>Berlix</center></h2></td>
<td></td>
<td></td>
<td></td>
<td> <a href="home.html">Home</a></td>
<td> <a href="gambar/login.html">login</a></td>
<td> <a href="gambar/profil.html">Profil</a></td>
<td> <a href="http://beriadiagung.blogspot.co.id/" target="_blank" />Blog</a></td>
<td> <a href="gambar/music.html">Music</a></td>
</tr>
</table>
<hr style="width:800px;">
<br>
<form action="http://www.google.com">
<table align="center">
<tr>
<td style="background-color:red;">Google Search&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td><input type="search" name="googlesearch"size="60" style="font family:Comic Sans MS;font-size:12pt;"></font></td>
<td><input type="submit" value="X"></td>
<td> <img src="gambar/download.png" width="30px" height="30px" usemap="#a" />
<map name="a">
<area shape="polygon" coords="0,1,13,1,28,0,29,15,28,29,12,30,0,30,3,6" href="http://beritico.blogspot.co.id/" alt="istagram" title="istagram" target="_blank"/>
</map></td>
<td> <img src="gambar/f.jpg" width="30px" height="30px" usemap="#b" />
<map name="b">
<area shape="polygon" coords="0,1,13,1,28,0,29,15,28,29,12,30,0,30,3,6" href="https://web.facebook.com/beriadi.agung.5" alt="facebook" title="facebook" target="_blank"/>
</map></td>
<td> <img src="gambar/images.png" width="30px" height="30px" usemap="#c"/>
<map name="c">
<area shape="polygon" coords="0,1,13,1,28,0,29,15,28,29,12,30,0,30,3,6" href="https://www.youtube.com/watch?v=Ia4n952MJr4" alt="youtube" title="youtube" target="_blank"/>
</map></td>
</tr>
</table>
</form>
<br>
<hr style="border:0;">
<div id="content">
<div class="cities">
<h2 align="center">BUKU TAMU</h2>
</div> 
<form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi">
<br>
<fieldset>
<legend>Buku Tamu</legend>
<fieldset>
<legend>Pengisian Data Tamu</legend>
<tr>
<td width="23%" height="19" bgcolor="#00CCFF"><font face="Comic Sans MS">Nama &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</font></td>
<input type="text" name="Depan"size="20" placeholder="depan" style="font family:Comic Sans MS;font-size:12pt; font-color:lavender;"></font>
<td width="50%" height="19" bgcolor="#00CCFF"><font face="Comic Sans MS"></td>
<input type="text" name="belakang"size="20" placeholder="belakang" style="font family:Comic Sans MS;font-size:12pt"></font>
<td width="50%" height="19" bgcolor="#00CCFF"><font face="Comic Sans MS"></td>
</tr>
<br>
<br>
<tr>
<td width="23%" height="19" bgcolor="#00CCFF"><font face="Comic Sans MS">Jenis Kelamin &nbsp;&nbsp;:</font></td>
<td width="77%" height="19" bgcolor="#00CCFF"><font face="Comic Sans MS">
<input type="radio" name="jenis kelamin" value="laki-laki" checked >Laki-laki
<input type="radio" name="Jenis kelamin" value="Perempuan">Perempuan</font></td>
</tr>
<br>
<br>
<tr>
<td width="23%"height="19"bgcolor="#00CCFF"><font face="Comic Sans MS">Fakultas &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font></td>
<td width="77%" height="19"bgcolor="#00CCFF"><font face="Comic Sans MS">:
<select size="1" name="Fakultas" style="font-family:Comic Sans MS;font-size:12pt">
<option selected value="Fasilkom">FASILKOM</option>
<option  value="Fkip" >FKIP</option>
<option  value="Fk">FK</option>
<option  value="Fisip">FISIP</option>
<option  value="FE">FE</option>
<option  value="FH">FH</option>
<option  value="FT">FT</option>
<option  value="Mipa">MIPA</option>
<option  value="FKM">FKM</option>
<option  value="Fisip">FP</option>
</select></font>
</td>
</tr>
<br>
<br>
<tr>
<td width="20%"height="16"bgcolor="#00CCFF"><font face="Comic Sans MS">Biografi&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</font></td>
<td width="30px"height="16"bgcolor="#00CCFF"><font face="Comic Sans MS">
<textarea rows="6" name="Biografi"cols="60"></textarea></font></td>
</tr>
<br>
<br>
<td width="20%"height="16"bgcolor="#00CCFF"><font face="Comic Sans MS">Mata kuliah&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</td>
<input list="matakuliah" name="matakuliah" size="30px">
<datalist id="matakuliah">
<option value="Algoritma dan pemrograman">
<option value="Konsep Sistem Informasi">
<option value="Pemrograman Web">
<option value="Pengantar Teknologi Informasi">
<option value="Agama">
<option value="Praktek Pemrograman Web">
<option value="Basis Data">
<option value="Praktek Basis Data">
<option value="Praktek alpro">
<option value="Oarkom">
</datalist>
<br>
<br>Tinggi badan&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:
100<input type="range" name="Tinggi badan" min="100" max="200">200<br><br>
<tr>
<td width="20%"height="16"bgcolor="#00CCFF"><font face="Comic Sans MS">Password&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</font></td>
<input type="password" name="psw" size="40"></tr>
<br>
<br>
<tr>
<td width="20%"height="16"bgcolor="#00CCFF"><font face="Comic Sans MS">Membawa kado&nbsp;&nbsp;:</font></td>
<input type="checkbox" name="membawa kado" value="ya">ya
</tr>
<br>
<br>
Semester&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:
<input type="number" name="jumlah sks" min="1" max="8">
<br>
<br>
Tanggal Lahir&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:
<input type="date" name="bday">
<br>
<br>
Select your favorite color &nbsp;&nbsp;&nbsp;&nbsp;:
<input type="color" name="warna" value="#ff0000">
<br>
<br>
E-mail&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: <input type="email" name="user_email" size="40" placeholder="example@gmail.com">
<br>
<br>
<input type="submit" value="Kirim" onclick="alert('Terima Kasih')">
<input type="Reset" value="Reset">

 </fieldset>
</fieldset>
</form>
</div>
</div>
</body>

</html>

 hasil ouputnya
'

selesai :)

Komentar

Posting Komentar

Postingan populer dari blog ini

TUGAS 7 Javascript & DHTML

Gambar
Buatlah sebuah halaman web dengan ketentuan sebagai berikut: Menampilkan alert "Selamat Datang" ketika halaman pertama kali dibuka terdapat dua buah input text dimana user bisa memasukkan 2 buah angka, dan sebuah tombol. Jika tombol ini ditekan, hasil perkalian 2 buah angka ini akan ditampilkan di sebelah tombol. terdapat dua buah input text dimana user bisa memasukkan nama depan dan nama belakangnya, dan sebuah tombol. Jika tombol ini ditekan, hasil penggabungan 2 buah nama ini akan ditampilkan di sebelah tombol. terdapat dua buah input text dimana user bisa memasukkan  2 buah angka yang nilai awal keduanya 0. Jika nilai input text ini berubah, akan ditampilkan sesuatu sesuai dengan nilai kedua input text tersebut. Jika input pertama lebih besar dari input kedua, akan ditampilkan "A menang". Jika input pertama lebih kecil dari input kedua, akan ditampilkan "B menang". Jika input pertama sama dengan input kedua, akan ditampilkan "Seri...
Baca selengkapnya

Pengenalan apa itu website statis

Gambar
Website statis  yaitu website yang mana pengguna tidak bisa mengubah konten dari web tersebut secara langsung menggunakan browser. Interaksi yang terjadi antara pengguna dan server hanyalah seputar pemrosesan link saja.  Tugas 2 Pemrograman Web Buat background dengan warna tertentu dengan nama (i.e: red, green) Buat sebuah judul tulisan dengan warna tertentu dengan cara selain dengan nama (gunakan HEX) Judul dibikin rapat tengah. Buat tulisan minimal 2 paragraf dengan font tertentu tentang tempat makan favorit Anda di Palembang dan sekitarnya. Dalam tulisan tersebut, huruf pertama setiap paragraf dibikin dengan huruf kapital dan font berukuran lebih besar. Gunakan ke-10 element berikut di dalam tulisan Anda: <b> Defines bold text <em> Defines emphasized text <i> Defines italic text <small> Defines smaller text <strong> Defines important text <sub> Defines subscripted text <sup> Defines superscripted text <in...
Baca selengkapnya

Tugas 9 Pemrograman Web

Buatlah sebuah halaman web dengan AJAX pada hosting yang telah Anda miliki dengan ketentuan sebagai berikut: memiliki sebuah tombol yang jika di-klik akan mengambil judul pada tautan http://api.babyhanana.com/index.php/home/judul dan menampilkannya pada web Anda. memiliki sebuah tombol yang jika di-klik akan mengambil url gambar pada tautan  http://api.babyhanana.com/index.php/home/gambar dan menampilkan gambarnya pada web Anda memiliki sebuah tombol yang jika di-klik akan mengambil daftar kategori pada tautan http://api.babyhanana.com/index.php/home/kategori dan menampilkan setiap kategori tersebut pada web Anda dengan menggunakan elemen <li> memiliki sebuah tombol yang jika di-klik akan mengambil daftar kategori dalam format JSON pada tautan http://api.babyhanana.com/index.php/home/kategori_json dan menampilkan setiap kategori tersebut pada web Anda dengan menggunakan elemen <li> (gunakan for) memiliki sebuah tombol yang jika di-kl...
Baca selengkapnya