Input devices
Devices that you use to give input to a computer, like a mouse or a keyboard, are input devices.
<html>
<head><style> body { text-align: center; padding-top: 12px; } input { font-size: 16px; } textarea { font-size: 16px; } </style></head>
<body>
<p>A keyboard helps users type into input fields</p>
<input id="usernameInput" type="text" placeholder="Input">
<br>
<p>A mouse helps users click on buttons</p>
<button onclick="signUp()">Button</button>
<p id="message"></p>
<script>function signUp() {
var username = document.getElementById("usernameInput").value;
var phone = document.getElementById("phoneInput").value;
document.getElementById("message").innerHTML = username + ", we sent a confirmation to your phone.";
console.log("Sending text to " + phone);
}</script>
</body>
</html>]]>In HTML, we use elements like button
and input
to gather user input from input devices.
Output devices
Devices like a computer monitor or a printer are output devices. They use the input from your keyboard or mouse to give you output or feedback.
<html>
<head>
<style>
button { touch-action: manipulation; }
</style>
</head>
<body style="text-align:center;">
<h3>Choose Your Character</h3> <img height=180 id="character" src="https://mimo.app/r/hacker.gif"> <br> <button onclick="previous()">Previous</button> <button onclick="next()">Next</button>
<script>
var currentIndex = 0;
const images = [ 'https://mimo.app/r/hacker.gif', 'https://mimo.app/r/wizard.gif', 'https://mimo.app/r/ducky.gif', 'https://mimo.app/r/pirate.gif','https://mimo.app/r/helene.gif'];
function next() { if (currentIndex >= images.length - 1) { currentIndex = 0; } else { currentIndex += 1; } document.getElementById("character").setAttribute("src", images[currentIndex]); } function previous() { if (currentIndex <= 0) { currentIndex = images.length - 1; } else { currentIndex -= 1; } document.getElementById("character").setAttribute("src", images[currentIndex]); }
</script>
</body>
</html> ]]>This dynamic webpage changes the output of a webpage based on the input a user gives.
Touch-screen phones
A touch-screen is both an input and output device because you use it to give input to your phone and to receive output as well.