htmlControls.html (2754B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Html_Control_Form</title> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width"> 7 </head> 8 9 <p>Calendar Form</p> 10 <section> 11 <input type="date" id="calendar"> 12 <button onclick="printDate()" id="submitDate"> Submit date </button> 13 <div id="displayDate"></div> 14 </section> 15 16 <p>Clock Form</p> 17 <section> 18 <input type="time" id="clock"> 19 <button onclick="printTime()" id="submitTime"> Submit time </button> 20 <div id="displayTime"></div> 21 </section> 22 23 <p>Color Form</p> 24 <section> 25 <input type="color" id="colorPicker"> 26 <button onclick="printColor()" id="submitColor"> Submit color </button> 27 <div id="displayColor"></div> 28 </section> 29 30 <p>Drop-down Form</p> 31 <select id="dropDown"> 32 <option type="text" text="The Only Ones">The Only Ones</option> 33 <option type="text" text="The National">The National</option> 34 </select> 35 <button onclick="printOption()" id="submitOption"> Submit drop down option </button> 36 <div id="displayOption"></div> 37 38 </br> 39 <div> 40 <form method="post" enctype="multipart/form-data"> 41 <div> 42 <label>Choose file to upload</label> 43 </br> 44 <input type="file" id="upload_file"/> 45 </div> 46 </form> 47 </div> 48 </br> 49 <div> 50 <form method="post" enctype="multipart/form-data"> 51 <div> 52 <label for="photosUpload">Choose image or video file to upload:</label> 53 <input type="file" id="photosUpload" accept="image/*,video/*"/> 54 </div> 55 </form> 56 </div> 57 </br> 58 <div> 59 <form method="post" enctype="multipart/form-data"> 60 <div> 61 <label for="audioFileUpload">Choose audio file to upload:</label> 62 <input type="file" id="audioFileUpload" accept="audio/*"/> 63 </div> 64 </form> 65 </div> 66 67 <script> 68 function printOption() { 69 let dropDown = document.querySelector("#dropDown"); 70 let displayOption = document.querySelector("#displayOption"); 71 72 displayOption.innerHTML = "Selected option is: " + dropDown.value; 73 } 74 </script> 75 76 <script> 77 function printDate() { 78 let calendar = document.querySelector("#calendar"); 79 let displayDate = document.querySelector("#displayDate"); 80 81 displayDate.innerHTML = "Selected date is: " + calendar.value; 82 } 83 </script> 84 85 86 <script> 87 function printTime() { 88 let time = document.querySelector("#clock"); 89 let displayTime = document.querySelector("#displayTime"); 90 91 displayTime.innerHTML = "Selected time is: " + time.value; 92 } 93 </script> 94 95 <script> 96 function printColor() { 97 let colorPicker = document.querySelector("#colorPicker"); 98 let displayColor = document.querySelector("#displayColor"); 99 100 displayColor.innerHTML = "Selected color is: " + colorPicker.value; 101 } 102 </script> 103 </html>