Assalamu'alaikum warrahmatullahi wabarakatuh.

Pada postingan kali ini saya akan menjelaskan mengenai jQuery.

Langsung saja, saya akan menjelaskan berdasarkan list di bawah ini :

1. Buatlah sebuah paragraf yang berisi pemahaman Anda tentang jQuery.
2. Buatlah sebuah/beberapa paragraf yang menjelaskan maksud perintah jQuery berikut:


• $(this).hide();
• $("h1").click(function(){ alert('Dor') });
• $(".barisgenap").hide();
• $("#elemenkedua").focus(function(){ $(this).css("background-color", "#cccccc"); });
3. Memiliki sebuah tombol yang apabila ditekan akan menghilangkan sebuah elemen. Setelah elemen tadi hilang, maka akan muncul sebuah elemen yang lain. Setelah elemen kedua ini muncul, maka akan muncul pesan pemberitahuan yang bertuliskan "Taraaaa".
4. (Poin 3) Buatlah sebuah tulisan dan sebuah tombol. Sebelum tombol ditekan, maka tulisan ini normal. Tapi setelah tombol ditekan sekali, maka tulisan ini akan menjadi misterius, yakni dia menghilang begitu cursor mouse melewatinya dan muncul kembali ketika cursor mouse tidak lagi melewatinya.
5. Menggunakan jQuery Ajax, buatlah sebuah requst ke alamat http://api.babyhanana.com/index.php/home/kategori_produk lalu tampilkan produk pertama dari setiap kategori menggunakan elemen list.
6. (poin 3) Menggunakan jQuery Ajax, tampilkan semua pesan secara real time menggunakan elemen <li> dengan cara mengambil pesan baru pada tautan http://api.babyhanana.com/index.php/home/pesan_with_id_bigger_than dengan method "GET" dan parameter "last_id" yang merupakan id pesan terakhir yang sudah pernah diterima, yang diakses pesan baru setiap 5 detik.

---



1. Pertama, - .

 Outputnya : 


2. -.

 Outputnya : 


3. -.

 Outputnya : 


4. -.

 Outputnya : 


5. -.

 Outputnya : 


6. -.

 Outputnya : 


7. -.

 Outputnya : 

---

Download file final di sini.


Wassalamu'alaikum warahmatullah wabarakatuh.


Fadilah Nur Imani.

Assalamu'alaikum warrahmatullahi wabarakatuh.

Pada postingan kali ini saya akan menjelaskan mengenai AJAX&JSON.

Langsung saja, saya akan menjelaskan berdasarkan list di bawah ini :

1. 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.
2. 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.
3. 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>.
4. 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).
5. Memiliki sebuah tombol yang jika di-klik akan mengambil daftar kategori beserta produknya dalam format JSON pada tautan http://api.babyhanana.com/index.php/home/kategori_produk dan menampilkan setiap kategori tersebut pada web Anda dengan menggunakan elemen <li> beserta setiap produk kategori tersebut dengan juga menggunakan elemen <li>.
6. Memiliki sebuah input untuk memasukkan nama kategori dan sebuah tombol yang jika di-klik akan mengambil daftar produk untuk kategori tersebut dalam format JSON pada tautan http://api.babyhanana.com/index.php/home/produk_by_kategori  dengan parameter "kategori" dan menampilkan setiap produk tersebut pada web Anda dengan menggunakan elemen <li>.
7. Memiliki sebuah input untuk memasukkan pesan dan sebuah tombol yang jika di-klik akan mengirimkan paremeter "pesan" dengan method "POST" dalam format JSON pada tautan http://api.babyhanana.com/index.php/home/kirim_pesan. Lihat halaman http://api.babyhanana.com/index.php/home/timeline untuk mengecek apakah pesan Anda berhasil terkirim atau tidak (refresh untuk melihat pesan baru ;d).
8. Memiliki sebuah list yang menampikan semua pesan yang diambil ada tautan http://api.babyhanana.com/index.php/home/pesan menggunakan elemen <li>.
9. (4 poin) Memiliki sebuah list yang menampikan semua pesan secara real time menggunakan elemen <li> dengan cara mengambil pesan baru pada tautan http://api.babyhanana.com/index.php/home/pesan_with_id_bigger_than dengan method "GET" dan parameter "last_id" yang merupakan id pesan terakhir yang sudah pernah diterima, yang diakses pesan baru setiap 5 detik.

---



1. Pertama, - .

 Outputnya : 


2. -.

 Outputnya : 


3. -.

 Outputnya : 


4. -.

 Outputnya : 


5. -.

 Outputnya : 


6. -.

 Outputnya : 


7. -.

 Outputnya : 

---

Download file final di sini.


Wassalamu'alaikum warahmatullah wabarakatuh.


Fadilah Nur Imani.

Assalamu'alaikum warrahmatullahi wabarakatuh.

Pada postingan kali ini saya akan menjelaskan mengenai Javascript dan DHTML. Javascript adalah bahasa pemrograman untuk html dan halaman web. Untuk menggunakan Javascript (selanjutnya disingkat menjadi JS) pada html gunakan tag "<script></script>".

Untuk memanggil nilai/tulisan pada html melalui JS, bisa dihubungkan dengan nama id yang digunakan pada element penampung hasil di html inilah yang disebut DHTML.

Ini adalah kriteria yang harus dipenuhi :

1. Menampilkan alert "Selamat Datang" ketika halaman pertama kali dibuka.
2. 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.
3. 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.
4. 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".
5. Menampilkan sebuah gambar dan sebuah tombol. Jika tombol ini ditekan, maka gambar tersebut akan berubah menjadi gambar yang lain.
6. Menampilkan sebuah tulisan berukuran font besar dan berwarna tertentu. Jika tulisan ini ditekan, maka warna tulisan tersebut akan berubah menjadi warna yang lain.
7. Terdapat sebuah input text dimana user bisa memasukkan tulisan, sebuah tombol, dan sebuah list. Jika tombol ditekan, maka tulisan pada input text akan masuk menjadi anggota list yang paling bawah.

---



1. Pertama, gunakan pop up boxes dengan tipe alert, sintaksnya adalah "window.alert("TEKS");" .
<script> window.alert("SELAMAT DATANG ☀"); </script>
 Outputnya : 


2. Kedua, untuk menghasilkan sebuah perkalian antara dua nilai, gunakan sintaks fungsi yang terdapat dua 3 variabel di dalamnya dan operator yang akan digunakan (/*-+).
<input type="text" id="bil1" placeholder="insert"><b> X </b> <input type="text" id="bil2" placeholder="number"> <button onclick="soal1()">=</button> <span id="hasil1"></span> <script> function soal1() { var a = document.getElementById("bil1").value; var b = document.getElementById("bil2").value; var h1 = a*b; document.getElementById("hasil1").innerHTML = h1; } </script>
 Outputnya : 


3. Ketiga, untuk menggabungkan dua buah kata/kalimat yang terpisah, guanakan operator penjumlahan antara variabel yang ada, dan jangan lupa tambahkan string spasi (" ").
First Name : <input type="text" id="nama1" placeholder="insert your first name"> Last Name : <input type="text" id="nama2" placeholder="insert your last name"> <button onclick="soal2()"> Merge Your Name :</button> <span id="hasil2"></span> <script> function soal2() { var a = document.getElementById("nama1").value; var b = document.getElementById("nama2").value; var h2 = a+" "+b; document.getElementById("hasil2").innerHTML = h2; } </script>
 Outputnya : 


4. Keempat, untuk membandingkan dua nilai gunakan comparison dengan sintaks if/else if/else layaknya pada bahasa pemrograman biasa (seperti bahasa c/c++/pascal).
<input type="text" id="bil3" onchange="soal3()" value="0" > <b> versus </b> <input type="text" id="bil4" onchange="soal3()" value="0"> <button onclick="soal3()"> Who's the winner?</button> <span id="hasil3"></span> <script> function soal3() { var h3; var a = document.getElementById("bil3").value; var b = document.getElementById("bil4").value; if (a>b) { h3 = "A won.";} else if (a<b) { h3 = "B won.";} else { h3 = "Seri."} document.getElementById("hasil3").innerHTML = h3; } </script>
 Outputnya : 


5. Kelima,  untuk mengganti sebuah gambar dengan gambar lain, sintaks yang digunakan untuk output masih sama yaitu "document.getElementById("ID-GAMBAR-YANG-AKAN-DIGANTI").src="nama-gambar-pengganti".
<img id="hasil4" src="stuff/pict2.png"> <button onclick="soal4()">Other version ?</button> <script> function soal4() { document.getElementById("hasil4").src="stuff/pict1.png"; } </script>
 Outputnya : 


6. Keenam, untuk mengganti warna sebuah kata/kalimat, gunakan "style.color="nama-warna";" setelah sintaks "document.getElementById("id-kalimat")".
<span >Try to click it!</span> <span id="hasil5" onmousedown="grey()" onmouseup="blue()"><h2> " Grey is the first, blue after it. "</h2> </span>. . . . . . <script> function grey() { document.getElementById("hasil5").style.color="#414141"; } function blue() { document.getElementById("hasil5").style.color="#4c63d9"; } </script>
 Outputnya : 


7. Ketujuh, untuk menambahkan kata/kalimat baru gunakan JS Array push (selebihnya: w3-arrayPush) .
<span>List your top favorite stuffs here : </span> <input id="l-stuffs" type="text" placeholder="list here"> <button onclick="list()">Create</button> <span id="hasil6"></span> <script> var stuffs =[""]; document.getElementById("hasil6").innerHTML = stuffs; function list() { var a = document.getElementById("l-stuffs").value;stuffs.push(a); document.getElementById("l-stuffs").innerHTML = a; document.getElementById("hasil6").innerHTML = stuffs.join(" <li type=list>"); } </script>
 Outputnya : 

---

Download file final di sini.


Wassalamu'alaikum warahmatullah wabarakatuh.


Fadilah Nur Imani.

Assalamu'alaikum warrahmatullahi wabarakatuh.

Pada postingan kali ini saya akan menjelaskan lebih mendetail tentang CSS yang sebelumnya hanya dijelaskan sedikit.

1. Kali ini kita akan memfokuskan pada bagian CSS, maka dari itu saya akan menggunakan file html yang telah saya buat sebelumnya. Anda bisa klik link ini.
2. Ini adalah kriteria yang harus dipenuhi : 


• Gunakan elemen H1 pada judul setiap halaman yang ditentukan warnanya dengan warna tertentu pada style.css.
• Kata pertama pada judul tiap halaman diberikan warna yang berbeda dengan warna kata yang lainnya.
• Setiap link pada bagian atas Navigasi internal diberikan warna tertentu yang sama.
• Setiap link pada bagian samping Navigasi external diberikan warna tertentu dan rata kanan.
• Elemen header dan footer memiliki warna backgrond yang sama.
• Link yang dilewati oleh mouse (on hover) diberikan ukuran font yang lebih besar dari sebelumnya dan diberikan warna background tertentu.

NOTES : Poin utama dari postingan ini adalah menggunakan CSS eksternal.



---



3. Pertama, tambahkan elemen h1 menggunakan html pada judul tiap halaman, yaitu "Motivated Sloth".
<header><h1> Motivated Sloth</h1> </header>
Outputnya :


4. Kedua, untuk membedakan kata pertama dengan kata selanjutnya, gunakan elemen span untuk kata pertama, yaitu "Motivated".  Jangan lupa untuk menambahkan link file CSS eksternal di dalam elemen head. Disini saya menamai file CSS eksternal dengan nama coba.css (lihat properti href).
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="coba.css"> <title></title> </head> <body> <header><h1> <span>Motivated</span> Sloth</h1> </header> </body> </html>
Karena kita menggunakan css eksternal, maka dari itu tambahkan properti color pada css dengan selector sebagai berikut :
header h1 span { color: #FFA500; }
Outputnya :


5. Ketiga, Untuk memberi warna pada tiap link yang terdapat pada elemen div dengan id "topnav", modifikasi lah tampilan navigasi internal dengan selector tersebut.
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="coba.css"> <title>Home - <09031281621039></title> </head> <body class="container-global"> <header><h1> <span>Motivated</span> Sloth</h1> </header> <div id="topnav"> <nav> <ul><strong> <li><a class="active" href="Home.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="contacts.html">Contacts</a></li> <li><a href="form.html">Form</a></li> </strong></ul> </nav> </div> </body> </html>
Ini adalah CSS yang digunakan untuk output di bawah.
#topnav nav { text-align: center; font-family: nexalight; } #topnav nav ul { list-style-type: none; margin: 0; margin-top: 0.5%; padding: 0; overflow: hidden; background-color: #DB7093; } #topnav nav li { display: inline-block; } #topnav nav li a { display: block; color: white; text-align: center; padding: 15px 15px; text-decoration: none; } #topnav nav li a:hover:not(.active) { background-color: #FFA500; color: #6495ed; font-size: 1.2em; } #topnav nav li a.active { background-color: #708090; }
Outputnya :


6. Keempat, ini adalah html untuk navigasi di sebelah kanan. Navigasi kanan ini bagian dari elemen div yang memiliki properti class "sidebar" dan ul "kanan".
<div class="sidebar"> <ul class="kanan"><strong> <li class="l1"><a href="http://wungyom.tumblr.com/tagged/mine">Creation</a></li> <li class="l2"><a href="http://glowingcarrot.tumblr.com">GCarrot</a></li> <li class="l3"><a href="http://instagram.com/imanitor">Imanitor</a></li> <li class="l4"><a href="http://motivatedsloth.blogspot.co.id">Sloth</a></li> <li class="l5"><a href="https://plus.google.com/u/3/108466959866662971592">More</a></li> </strong></ul> </div>
Ini adalah CSS yang digunakan :
div.sidebar { float:right; background-color: #fff; min-width: 13%; margin-top: 1%; margin-right: 5%; font-family: nexalight; border: 2px dashed #DB7093; clear:right; } ul.kanan { margin-top: 5%; margin-bottom: 5%; list-style-type: none; text-align: right; padding: 0% 5% 0% 5%; } ul.kanan li a { padding: 5%; line-height: 2em; text-decoration: none; color: #708090; } ul.kanan li { padding: 4%; margin-top: 4%; } li.l1 { background-color: #5ad3d3; } li.l2 { background-color: #65e9e9; } li.l3 { background-color: #afeeee; } li.l4 { background-color: #b6e2e2; } li.l5 { background-color: #9dcdcd; } ul.kanan li:hover { background-color: #DB7093; color: #fff; font-size: 1.2em; } ul.kanan li a:hover { color: #fff; }
Outputnya :


7. Kelima, Ini adalah html keseluruhan dari halaman Home yang didalamnya meliputi header sampai footer, .
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="coba.css"> <title>Home - <09031281621039></title> </head> <body class="container-global"> <header><h1> <span>Motivated</span> Sloth</h1> </header> <div id="topnav"> <nav> <ul><strong> <li><a class="active" href="Home.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="contacts.html">Contacts</a></li> <li><a href="form.html">Form</a></li> </strong></ul> </nav> </div> <div class="sidebar"> <ul class="kanan"><strong> <li class="l1"><a href="http://wungyom.tumblr.com/tagged/mine">Creation</a></li> <li class="l2"><a href="http://glowingcarrot.tumblr.com">GCarrot</a></li> <li class="l3"><a href="http://instagram.com/imanitor">Imanitor</a></li> <li class="l4"><a href="http://motivatedsloth.blogspot.co.id">Sloth</a></li> <li class="l5"><a href="https://plus.google.com/u/3/108466959866662971592">More</a></li> </strong></ul> </div> <div id="out-of-content"> <article class="content"> <div id="paragraph"> <p> <h2> <u><span id="first-word">-</span> -</u></h2> <p> --</p> </p> </div> </article> <article class="content"> <div id="paragraph"> <p> <h2> <u><span id="first-word">-</span> -</u></h2> <p> -- </p> </div> </article> </div> <footer>Copyright © <b>Fadilah Nur Imani</b> 2017</footer> </body> </html>
Untuk membuat background header dan footer sama, gunakan satukan elemen header dan footer dalam satu baris css dengan menggunakan tanda koma (,) dan css.
header,footer { background-color: #AFEEEE; }
Outputnya :


8. Keenam, untuk memberi efek hover huruf yang membesar, ganti ukuran huruf. Disini saya menggunakan satuan em dengan value 1.2em yang terdapat dalam selector "ul.kanan li:hover" dan "#topnav nav li a:hover:not(.active)" .
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="coba.css"> <title>Home - <09031281621039></title> </head> <body class="container-global"> <header><h1> <span>Motivated</span> Sloth</h1> </header> <div id="topnav"> <nav> <ul><strong> <li><a class="active" href="Home.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="contacts.html">Contacts</a></li> <li><a href="form.html">Form</a></li> </strong></ul> </nav> </div> <div class="sidebar"> <ul class="kanan"><strong> <li class="l1"><a href="http://wungyom.tumblr.com/tagged/mine">Creation</a></li> <li class="l2"><a href="http://glowingcarrot.tumblr.com">GCarrot</a></li> <li class="l3"><a href="http://instagram.com/imanitor">Imanitor</a></li> <li class="l4"><a href="http://motivatedsloth.blogspot.co.id">Sloth</a></li> <li class="l5"><a href="https://plus.google.com/u/3/108466959866662971592">More</a></li> </strong></ul> </div> <div id="out-of-content"> <article class="content"> <div id="paragraph"> <p> <h2> <u><span id="first-word">-</span> -</u></h2> <p> --</p> </p> </div> </article> <article class="content"> <div id="paragraph"> <p> <h2> <u><span id="first-word">-</span> -</u></h2> <p> -- </p> </div> </article> </div> <footer>Copyright © <b>Fadilah Nur Imani</b> 2017</footer> </body> </html>
Ini adalah CSS nya :
ul.kanan li:hover { background-color: #DB7093; color: #fff; font-size: 1.2em; } ul.kanan li a:hover { color: #fff; } #topnav nav li a:hover:not(.active) { background-color: #FFA500; color: #6495ed; font-size: 1.2em; } #topnav nav li a.active { background-color: #708090; }
Outputnya :

---

Download file final di sini.


Wassalamu'alaikum warahmatullah wabarakatuh.


Fadilah Nur Imani.

Assalamu'alaikum warrahmatullahi wabarakatuh.

In this post, I'm going to explain about HTML: form. Let's straight to the point on how to create HTML form.

1. As usual, Open Sublime Text 3 app. After that, create the base structure of HTML.
<!DOCTYPE html> <html> <head> <title></title> </head> <body></body> </html>
2. These are the criteria that going to be fulfilled : 


• Using text input for adding a full name.
• Using radio button input for choosing gender (male or female).
• Using drop down list for choosing one of the faculty in UNSRI.
• Using textarea for adding a biography.
• Using text input for adding a favorite subject, which name of the subjects already defined but still can add that is not on the list (Use datalist).
• Using range input to determine the user's height range.
• Using password input to add secret words.
• Using checkbox to determine whether the guest brings present or not.
• Using number input for adding your current semester.
• Using date input for adding birthdate.
• Using color input for adding a favorite color.
• Using email input for adding an e-mail address.
• Using caption form "Guest Book"  to combine all of the stuff.
• Using "Reset" button to erase all of the filled data.
• Using send button. If the button is clicked, it will send data form to "http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi" (Put it as action property of form).

NOTES : The main point of learning HTML:form is knowing how to insert a data and submit or even reset it using simple HTML&CSS.



---



3. In this chance, I'm going to create only the plain form ( CSS&other styles will be added later ).
4. First, create form tag and add input tag with type "text" to complete the 1st instruction.
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <form> Full Name : <input type="text" name="full-name"> </form> </body> </html>
Outputnya :


5. For the 2nd instruction, create a radio button using input type "radio". In this input type, we use three properti inside it, which are type, name, and value. I'm using male and female as the values here. Also, don't forget to add checked in one of the input tag after value properti because based on the instruction you can't let the option left empty.
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <form> Full Name : <input type="text" name="full-name"> <br> Gender : <input type="radio" name="Gender" value="male" checked> Male <input type="radio" name="Gender" value="female"> Female </form> </body> </html>
Outputnya :


6. Next, for the 3rd insruction, adding drop down list for choosing one of the faculty in UNSRI.
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <form> Full Name : <input type="text" name="full-name"> <br> Gender : <input type="radio" name="Gender" value="male" checked> Male <input type="radio" name="Gender" value="female"> Female <br> Faculty : <select name="Faculty"> <option value="Faculty of Economics">Economy</option> <option value="Faculty of Law">Law</option> <option value="Faculty of Engineering">Engineering</option> <option value="Medical Faculty">Medical</option> <option value="Faculty of Agriculture">Agriculture</option> <option value="Faculty of Teacher Training and Education">Teacher Training and Education</option> <option value="Faculty of Social and Political Science">Social and Political Science</option> <option value="Faculty of Math and Science">Math and Science</option> <option value="Faculty of Computer Science">Computer Science</option> <option value="Faculty of Public Health">Public Health</option> </select> </form> </body> </html>
Outputnya :


7. Based on the 4th instruction, use textarea tag for adding a paragraph about your biography. This tag has 2 properties inside it which determine the size (rows for the width and cols for the height of textarea).
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <form> Full Name : <input type="text" name="full-name"> <br> Gender : <input type="radio" name="Gender" value="male" checked> Male <input type="radio" name="Gender" value="female"> Female <br> Faculty : <select name="Faculty"> <option value="Faculty of Economics">Economy</option> <option value="Faculty of Law">Law</option> <option value="Faculty of Engineering">Engineering</option> <option value="Medical Faculty">Medical</option> <option value="Faculty of Agriculture">Agriculture</option> <option value="Faculty of Teacher Training and Education">Teacher Training and Education</option> <option value="Faculty of Social and Political Science">Social and Political Science</option> <option value="Faculty of Math and Science">Math and Science</option> <option value="Faculty of Computer Engineering">Computer Engineering</option> <option value="Faculty of Public Health">Public Health</option> </select> <br> Biography : <br> <textarea name="Biography" rows="15" cols="50">
Outputnya :


8. And then, as what mentioned on the 5th instruction, add "text input for adding a favorite subject, which name of the subjects already defined but still can add that is not on the list" using data list :
Favorite subject : <input list="subjects" name="Subjects"> <datalist id="subjects"> <option value="Algorithm and Programming"> <option value="Web Programming"> <option value="Data Base"> <option value="Data Structure"> <option value="Multimedia"> </datalist>
Outputnya :





9. The 6th instruction wanted us to use range input to determine the user's height range.
Height : <input type="range" name="Height" min="0" max="200" id="a" value="0" oninput="x.value=parseInt(a.value)"> <output name="x" for="a"></output>Cm
Outputnya :


10. Now the 7th instruction told us to have password input to add secret words.
<br> Password : <input type="password" name="Password">
Outputnya :


11. Based on the 8th instruction, I use checkbox to determine whether the guest brings present or not.
<br> Present : <input type="checkbox" name="Bring-the-Present?" value="Yes"> I bring the present. Outputnya :


12. The 9th instruction said to use number input for adding your current semester which means you can't insert another character except for numbers. The maximum and minimum number is set so you can't choose apart from the limit.
Semester : <input type="number" name="Semester" min="1" max="10"> Outputnya :


13. Next, we're going to use date input for adding birthdate form on the list based on the 10th instruction.
<br> Birthdate : <input type="date" name="Birthdate"> Outputnya :


14. Next, based on the 11th instruction we'll use color input to select a color. When the color input area is selected, a color picker will appear.
<br> Select your favorite color: <input type="color" name="Favorite-Color"> Outputnya :


15. In the next instruction (12th), I'm going to add an e-mail input.
<br> E-mail: <input type="email" name="E-mail"> Outputnya :


16. Both of the instructions (13th & 14th) wanted a reset and send button. Now here they are :
<br> <input type="reset" value="Reset"> <input type="submit" value="Send"> Outputnya :


17. Finally, The 15th instruction. Now all of the data will be sent to a server using action property on form tag.
<form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi"> Outputnya :

---

You can download the final HTML right here.


Wassalamu'alaikum warahmatullah wabarakatuh.


Fadilah Nur Imani.