htmlControls.html (1903B)
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>Misc Link Types</p> 10 <section> 11 <a href="https://duckduckgo.com/">External link</a> 12 </section> 13 14 <section> 15 <a href="mailto://example@example.com">Email link</a> 16 <a href="tel://1234567890">Telephone link</a> 17 </section> 18 19 <p>Drop-down Form</p> 20 <select id="dropDown"> 21 <option type="text" text="The Only Ones">The Only Ones</option> 22 <option type="text" text="The National">The National</option> 23 </select> 24 <button onclick="printOption()" id="submitOption"> 25 Submit drop down option 26 </button> 27 <div id="displayOption"></div> 28 29 <section> 30 <p>Copy <input type="text" placeholder="and Paste" id="textInput" /> me</p> 31 <button onclick="printInput()" id="submitInput">Submit input</button> 32 <div id="displayInput"></div> 33 </section> 34 35 <p>Calendar Form</p> 36 <section> 37 <input type="date" id="calendar" /> 38 <button onclick="printDate()" id="submitDate">Submit date</button> 39 <div id="displayDate"></div> 40 </section> 41 42 <script> 43 function printOption() { 44 let dropDown = document.querySelector("#dropDown"); 45 let displayOption = document.querySelector("#displayOption"); 46 47 displayOption.innerHTML = "Selected option is: " + dropDown.value; 48 } 49 </script> 50 51 <script> 52 function printInput() { 53 let textInput = document.querySelector("#textInput"); 54 let displayInput = document.querySelector("#displayInput"); 55 56 displayInput.innerHTML = "You entered: " + textInput.value; 57 } 58 </script> 59 60 <script> 61 function printDate() { 62 let calendar = document.querySelector("#calendar"); 63 let displayDate = document.querySelector("#displayDate"); 64 65 displayDate.innerHTML = "Selected date is: " + calendar.value; 66 } 67 </script> 68 </html>