Capturing User Input

Objective

After completing this lesson, you will be able to capture user input for creating interactive web pages

Browser APIs

Browser APIs (Application Programming Interfaces) are a set of built-in interfaces provided by web browsers to enable web developers to create dynamic and interactive web applications. These APIs are part of the web platform and are available in all modern web browsers.

Here are some commonly used Browser APIs:

  • Document Object Model (DOM) API- Allows web developers to manipulate HTML and XML documents in the browser, and access and modify the content, structure, and styles of the document.

  • XMLHttpRequest (XHR) API - Enables the creation of HTTP requests in the browser, allowing web developers to fetch data from servers asynchronously without having to refresh the page.

  • Geolocation API - Provides location information about a user's device, allowing web developers to create location-based applications.

  • Canvas API - Allows web developers to dynamically draw and manipulate graphics and images in the browser.

  • Web Storage API - Enables web developers to store and retrieve data on the client side, which can be useful for creating offline web applications.

  • Web Audio API - Allows web developers to create and manipulate audio content in the browser.

  • Web Speech API - Enables web developers to incorporate speech recognition and synthesis into their web applications

There are many other Browser APIs available, each with its own set of features and capabilities. These APIs provide powerful tools for web developers to create rich, interactive web applications that can rival traditional desktop applications.

Here's an example of how a web developer might use the DOM API to modify the content of an HTML page.

Code Snippet
Copy code
Switch to dark mode
12345678910111213141516171819202122232425
<!DOCTYPE html>
<html>
<head>
  <title>DOM API Example</title>
</head>
<body>
  <h1 id="my-heading">Hello, world!</h1>
  <p>Click the button to change the heading text</p>
  <button id="my-button">Click me</button>

<script>
  // Get a reference to the heading element
  const myHeading = document.getElementById('my-heading');

  // Get a reference to the button element
  const myButton = document.getElementById('my-button');

  // Add an event listener to the button element
  myButton.addEventListener('click', function() {
  // Update the text of the heading element
  myHeading.textContent = 'Hello, DOM!';
  });
</script>
</body>
</html>

In this example, the code first gets a reference to the heading element using the getElementById method and stores it in a variable named myHeading. It also gets a reference to the button element and stores it in a variable named myButton. The code then adds an event listener to the button element using the addEventListener method. When the button is clicked, the function passed to the event listener is called. This function updates the text content of the caption element using the textContent property. So, when the user clicks the button, the text of the heading element is changed from "Hello, world!" to "Hello, DOM!". This is just one example of how web developers can use the DOM API to dynamically change the content of an HTML page and create interactive web applications.

You will learn more about this in the section related to JavaScript.

HTML Events

HTML events include various actions and processes that occur on a web page and can be detected and resolved by JavaScript code. Developers can use event handlers, functions that respond to specific events, to handle these events. Events can range from user input to network activity, to changes in content and layout. Event handlers can be attached to HTML elements via the element's attributes or via JavaScript code. Once the event is triggered, the corresponding handler function is executed, allowing developers to respond to the event and change the behavior of the web page as needed.

Events are a part of the Document Object Model (DOM) Level 3 and every HTML element contains a set of events that can trigger JavaScript Code.

Here are some examples of HTML events:

  • onload: This event is triggered when a web page has finished loading.
  • onclick: This event is triggered when an element is clicked.
  • onmouseover: This event is triggered when the mouse pointer moves over an element.

Refer to the following code snippet.

Code Snippet
Copy code
Switch to dark mode
1
<body onload="myFunction()">

Here are a few reasons why events are important in HTML:

  1. User Interactivity: By using events, developers can create web pages that respond to user actions, such as mouse clicks, keystrokes, and other input. This can help to create more engaging and interactive user experiences on the web.

  2. Real-Time Updates: Events can be used to trigger updates and changes to web page content or styles in real time, without requiring a full page refresh. This can help to create more dynamic and responsive web pages that feel faster and more seamless to use.

  3. User Feedback: Events can also be used to provide feedback to users, such as showing a loading spinner while a page or feature is processing, or displaying error messages when something goes wrong. This can help to improve the user experience by providing clear and helpful feedback.

  4. Analytics and Tracking: Events can be used to track user actions and behaviors on a web page, such as clicks on a particular button or link. This can help developers to understand how users interact with their web pages and make data-driven decisions about how to improve them.

Note

There are many other events in HTML that can be used to create dynamic and interactive web pages. You can find more Information about HTML elements and there events on the World Wide Web Consortium Website.

Buttons

Introduction

Buttons are commonly used in HTML to create interactive and responsive user interfaces. In HTML, buttons can be created using the <button> element or the <input> element with a type attribute set to "button".

Here's an example of how to create a button using the <button> element.

Code Snippet
Copy code
Switch to dark mode
1
<button>Click me!</button>

Here's an example of how to create a button using the <input> element.

Code Snippet
Copy code
Switch to dark mode
1
<input type="button" value="Click me!">

In this example, the text "Click me!" is displayed inside the button.

Both <button> and <input> elements can be styled using CSS to change the appearance and behavior of the button. For example, you can change the background color, font size, and border style of the button

Buttons in HTML5

HTML5 introduced several new types of buttons that can be used to create more dynamic and interactive user interfaces. Here are some of the new button types available in HTML5:

  1. <button type="submit">: This type of button is used to submit a form when clicked. It is typically used in conjunction with a form element to allow users to submit data.

  2. <button type="reset">: This type of button is used to reset a form to its default values when clicked. It is also used in conjunction with a form element.

  3. <button type="button">: This type of button is used to trigger an action or function when clicked. It can be used outside of a form element, and is often used in conjunction with JavaScript to create interactive user interfaces.

  4. <button type="menu">: This type of button is used to create a dropdown menu when clicked. It is often used in navigation menus or other interface elements that require a list of options.

  5. <button type="search">: This type of button is used to trigger a search function when clicked. It is often used in search bars or other interface elements that require a search function.

Using these new button types, developers can create more sophisticated and user-friendly interfaces that provide a better user experience. Additionally, these button types can be easily styled using CSS to match the design of a web page or application.

Forms and Input Fields

Input Fields

HTML input fields are required for collecting user information within a form. The <input> element is the most commonly used form component for this purpose, with its type attribute dictating the type of input field required.

Here are some common input field types in HTML:

  • text: A single-line text input field.
  • password: A single-line text input field that masks the characters entered by the user.
  • radio: A radio button input that allows the user to select one option from a group.
  • checkbox: A checkbox input that allows the user to select multiple options from a group.
  • submit: A button that, when clicked, submits the form data to the specified URL.
  • reset: A button that, when clicked, resets the form to its initial state.
  • hidden: A hidden input field that can store data to be submitted with the form, without being visible to the user.
  • file: A file input field that allows the user to select a file to upload.
  • image: An image input field that acts as a submit button, allowing the user to click on the image to submit the form.

The <input> element, can have various attributes to customize its behavior, appearance, and functionality.

Refer to the following code snippet.

Code Snippet
Copy code
Switch to dark mode
12
<label for="password">Password:</label>
<input type="password" id="password" name="password" minlength="8" required>

Here are some attributes used with input fields:

  • type: This attribute specifies the type of input field.
  • name: This attribute is used to identify the input field when submitting a form. It is essential to give a unique name to each input field in a form.
  • id: The id attribute is used to uniquely identify an element on the page, which can be useful for styling with CSS or manipulating with JavaScript.
  • value: The value attribute sets the initial value of the input field. When the form is submitted, the value of this attribute is sent along with the form data.
  • min, max, step: These attributes are used with input fields of type number, date, time, and so on, to specify minimum and maximum values and the step interval between valid values.
  • required: This attribute indicates that the input field must be filled out before submitting the form.

Forms

HTML forms play a crucial role in collecting user input and enabling user interaction. These forms can be developed using the <form> element and contain various types of input elements, such as text boxes, radio buttons, checkboxes, dropdown lists, and buttons.

Here's a brief overview of some commonly used form elements in HTML.

  • <form>: The main container for form elements. It has the action attribute to specify the URL that processes the form data and the method attribute to specify how the data will be sent (either "get" or "post").

  • <input>: A versatile form element that can be used for various input types like text, password, number, email, date, and so on, depending on the value of the type attribute.

  • <textarea>: A multi-line text input area, commonly used for collecting larger amounts of text, such as comments or descriptions.

  • <select>: A dropdown list that allows users to choose one option from a list. It contains <option> elements, each representing an available choice.

  • <button>: A clickable button that can be used to submit the form or perform other actions using JavaScript.

  • <label>: A text label associated with a form control. The for attribute in the <label> element is used to connect it to the corresponding form control using the control's id attribute.

Refer to the following code snippet.

Code Snippet
Copy code
Switch to dark mode
12345678910111213141516171819
<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required><br><br>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required><br><br>

  <label for="message">Message:</label>
  <textarea id="message" name="message" rows="1" cols="40"></textarea><br><br>

  <label for="category">Category:</label>
  <select id="category" name="category">
    <option value="general">General</option>
    <option value="support">Support</option>
    <option value="feedback">Feedback</option>
  </select><br><br>

  <input type="submit" value="Submit">
</form>

In this example, a form is created with the following fields:

  • Name (text input)
  • Email (email input)
  • Message (text area)
  • Category (select input)

The form will then look like this on the web page. 

When the user clicks the submit button, the form data will be sent to the URL specified in the action attribute, using the request method specified in the method attribute.

Action and Methods in the HTML Element Form

In HTML forms, the action and method attributes play an important role in handling user input and sending the form data to a server for processing.

action Attribute

The action attribute specifies the URL where the form data should be sent when the form is submitted. This URL typically points to a server-side script (for example, PHP, Python, Node.js) that processes the submitted data.

Refer to the following code snippet.

Code Snippet
Copy code
Switch to dark mode
123456789
<form action="/process_form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>

<input type="submit" value="Submit">
</form>

In this example, when the user clicks the "Submit" button, the form data (name and email) will be sent to the /process_form URL using the POST method.

method Attribute

The method attribute determines the HTTP request method used to send the form data to the server. There are two primary HTTP methods for form submission:

  • GET: Appends the form data to the URL in the query string (for example, https://example.com/process_form?name=John&email=john@example.com). This method is suitable for simple forms where the data is not sensitive, as the submitted data will be visible in the browser's address bar and can be bookmarked or shared. The GET method should not be used for forms that handle sensitive data, such as passwords or personal information.

  • POST: Sends the form data in the HTTP request body, which is not visible in the browser's address bar. This method is more secure and suitable for forms that handle sensitive data or large amounts of data.

Build Your First Web Page

Business Example

You're building a basic web page for your personal blog. Start by setting up the fundamental structure of an HTML page.

Steps

  1. Open a text editor or IDE and create a new HTML file.

    1. Open your preferred text editor or IDE and create a new file with a ".html" extension.

  2. Inside the HTML file, write the basic HTML structure that includes <!DOCTYPE html>, <html>, <head>, and <body> tags. Set a title for your web page.

    Refer to the following code snippet.

    Code Snippet
    Copy code
    Switch to dark mode
    12345678
    <!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
</body>
</html>

  3. On your blog, you want to introduce yourself. Add a section on the page with a heading and a paragraph about you. Inside the <body> tag, add a <div> element. Inside the <div> element, add a heading using <h1> tag and a paragraph <p> with some text. Use the ID property with an ID to identify the area later.

    Refer to the following code snippet.

    Code Snippet
    Copy code
    Switch to dark mode
    123456
    <body>
<div id="about-me">
<h1>About Me</h1>
<p>Hello! Welcome to my personal blog.</p>
</div>
</body>

  4. You want to allow users to subscribe to your blog updates. Create a text box for users to enter their email and a button to submit. Below the <div> element, add a text box (input type=text) and a button element. Use the ID property with an ID to identify the area later.

    Refer to the following code snippet.

    Code Snippet
    Copy code
    Switch to dark mode
    123
    <input type="text" id="email-input" placeholder="Enter your email">
<button id="subscribe-button">Subscribe</button>
</body>

  5. You want to list the blog posts you've written along with the dates published. Below the button, create a table with two columns - 'Blog Title' and 'Published On'. Add headers and two rows of data to the table.

    Refer to the following code snippet.

    Code Snippet
    Copy code
    Switch to dark mode
    123456789101112131415
    <table id="blog-posts">
<tr>
<th>Blog Title</th>
<th>Published On</th>
</tr>
<tr>
<td>My First Blog</td>
<td>June 15, 2023</td>
</tr>
<tr>
<td>My Second Blog</td>
<td>June 25, 2023</td>
</tr>
</table>
</body>

  6. You want to showcase your favorite blogs on the internet. Add a list of three blog links. Below the table, create an unordered list with three list items. Make each list item a hyperlink to the respective blog.

    Refer to the following code snippet.

    Code Snippet
    Copy code
    Switch to dark mode
    12345678910111213141516171819202122232425262728293031323334
    <body>
<div id="about-me">
<h1>About Me</h1>
<p>Hello! Welcome to my personal blog.</p>
</div>


<input type="text" id="email-input" placeholder="Enter your email">
<button id="subscribe-button">Subscribe</button>


<table id="blog-posts">
<tr>
<th>Blog Title</th>
<th>Published On</th>
</tr>
<tr>
<td>My First Blog</td>
<td>March 15, 2023</td>
</tr>
<tr>
<td>My Second Blog</td>
<td>June 25, 2023</td>
</tr>
</table>


<ul id="favorite-blogs">
<li><a href="https://blog1.example.com">Blog 1</a></li>
<li><a href="https://blog2.example.com">Blog 2</a></li>
<li><a href="https://blog3.example.com">Blog 3</a></li>
</ul>
</body>
</html>

Result

This is the output of the html code.

This HTML document will act as the foundation for the next exercises involving CSS and JavaScript. It's important to remember to add IDs to your HTML elements, as they will be used to select and manipulate these elements in the upcoming exercises.

Log in to track your progress & complete quizzes