Source code
Revision control
Copy as Markdown
Other Tools
<!doctype html>
<html>
<head>
<title>Html_Control_Form</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
</head>
<p>Misc Link Types</p>
<section>
</section>
<section>
</section>
<p>Drop-down Form</p>
<select id="dropDown">
<option type="text" text="The Only Ones">The Only Ones</option>
<option type="text" text="The National">The National</option>
</select>
<button onclick="printOption()" id="submitOption">
Submit drop down option
</button>
<div id="displayOption"></div>
<section>
<p>Copy <input type="text" placeholder="and Paste" id="textInput" /> me</p>
<button onclick="printInput()" id="submitInput">Submit input</button>
<div id="displayInput"></div>
</section>
<p>Calendar Form</p>
<section>
<input type="date" id="calendar" />
<button onclick="printDate()" id="submitDate">Submit date</button>
<div id="displayDate"></div>
</section>
<script>
function printOption() {
let dropDown = document.querySelector("#dropDown");
let displayOption = document.querySelector("#displayOption");
displayOption.innerHTML = "Selected option is: " + dropDown.value;
}
</script>
<script>
function printInput() {
let textInput = document.querySelector("#textInput");
let displayInput = document.querySelector("#displayInput");
displayInput.innerHTML = "You entered: " + textInput.value;
}
</script>
<script>
function printDate() {
let calendar = document.querySelector("#calendar");
let displayDate = document.querySelector("#displayDate");
displayDate.innerHTML = "Selected date is: " + calendar.value;
}
</script>
</html>