Lesson 7: Interactive Elements
Interactive elements
Web pages usually have some interactive elements, which, when paired with JavaScript, can carry out many different functions. A basic interactive element is hyperlinking.
Hyperlinking
Hyperlinking is when we connect another web page URL address to a group of words or a button, or something else. When the user clicks the word, it redirects them to the assigned web page. We use the a tag and href attribute to hyperlink between web pages.
Example:
If you click the above link, it will redirect you to the search engine browser.
Buttons
Creating buttons for web pages is an essential part of coding in HTML. You can create a button using the button tag. We use JavaScript to give buttons and toggles functionality.
Example:
Input for HTML
For certain web pages, we want the user to be able to input data. For example, if we were building a web page for an online clothing store, we would want the user to be able to input words into a search bar. This is where we need to use an input tag in our HTML file. The input tag is a void element and so does not have a closing tag.
Example:
As you can see above, we created an input bar for entering a user name. The placeholder attribute allows us to place a faint text within the box. We declare what type of data is accepted in the input field by the type attribute. If we change the type to “number” or “date” we get different input bar formats.
Text area
Text areas are larger input boxes that can span multiple lines. They are often used when writing paragraphs on job applications or college applications. The text area element is not a void element and has two tags. If you make the text area large enough, a side scroll bar is automatically displayed.
Example:
For this text area, 20 rows down and 30 characters across are visible without scrolling. This set by using the rows and cols attributes, somewhat similar to creating a basic table.
Dropdown list
Dropdown lists are useful for allowing users to select specific values. We use the select tags to create a dropdown list.
Example:
In the above example, we can see that each option tag has a value attribute. This value is sent to the JavaScript file as input when the user selects its corresponding value pair.