Input

In the context of HTML and web development, an "input" is an element that allows users to enter data into a form on a webpage. This could be anything from typing text into a box, choosing a date from a calendar, selecting options from a dropdown menu, to clicking a checkbox or radio button.

For students, think of an input element like a question on a test or a blank in a form. It's a space where you provide your answer or information.

Let's create a simple demo to illustrate this. I'll make a basic HTML page with a few different types of input elements: a text box where you can type your name, a checkbox to select an option, and a submit button to send the information. Here's how it looks in code and what it does:

  • Text Box: For typing in your name.

  • Checkbox: To select or unselect an option.

  • Submit Button: To send your entered information.

Let me write up a quick example.

Here's a simple HTML example demonstrating different input elements:

<html>
<head>
<title>Input Elements Demo</title>
</head>
<body>

<h2>Student Information Form</h2>

<form action="/submit_form">
  <label for="fname">Name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  
  <label for="subscribe">Subscribe to newsletter:</label>
  <input type="checkbox" id="subscribe" name="subscribe" value="Yes"><br><br>
  
  <input type="submit" value="Submit">
</form>

</body>
</html>

In this demo:

  • There's a text input for entering a name. You can type anything into this box.

  • A checkbox allows you to select whether you want to subscribe to a newsletter.

  • Finally, a submit button sends the information you entered.

This form is a basic example of how inputs are used on web pages to collect data from users. Each input type serves a different purpose, from entering text to making choices.

In Jux, the input can accept text. The input itself, as we can se is the area that can accept text and therefor, most of the time we would like to add more information to it like an asset (icon) or some labels to help and hint about the usage and the data expected by users.

PreviousButtonNextRoadmap 🛣️

Last updated