Nick Marshall – WGU Note Repository

Just another WordPress site

Web Development Foundations C779 – Unit 4 – User Input

Introduction

unlabelled image

Up to this point, you have learned to create web content that will display information for an end user. You have learned ways that this content may be arranged, such as in tables or lists, and you have learned the various tag elements that are used in the structure and styling of that content. This module will take that knowledge a step further and introduce you to the use of HTML web forms and input tags. Web forms allow end users to provide input to a web page, which renders various actions depending on which input type is used.

This module will provide detailed information about HTML web forms and web form buttons. Buttons provide the opportunity for an end user to execute different types of commands following the entry of various types of inputs. You will learn more about how to properly insert form buttons into HTML content.

This module will cover the following topics:

  • User input in web pages
  • Non-textual input types 
  • Form buttons
  • From forms to graphical user interfaces

By the end of this module you should be able to answer the following questions:

  • Why use forms in a webpage?
  • How can a developer secure a form to prevent malicious intent?
  • What are some of the different non-textual inputs that can be used with forms?

User Input in Web Pages

Learning Objectives

  • Create a basic HTML form that accepts user input.

The web pages you have seen so far in this course are meant only to display information. However, in HTML5 there is a way to allow not only output, but also input from the web page user. It is important to know that HTML does not process information; you must attach a processing environment to transform input into output. There are several scripting languages such as JavaScript, PHP, Perl, Python, Ajax, jQuery, and others. While this course will not cover the use of scripting languages, it will introduce the feature necessary to provide user input: HTML forms. HTML forms (web forms) allow information to be collected from users of a web page or application. The information entered into a form by a user is sent by the web browser to the web server where it is processed by server-side programs or scripts to perform such actions as querying or updating a database.

The basic structure of an HTML form is the <form> tag that encompasses <label> and <input> tags. For example, an HTML form to ask the user’s name and age is presented in the HTML file below:






<!DOCTYPE html>





<html>





    <body>





        <h1>Text input</h1>





        <form>





            <label for="uname">Enter your name:</label><br>





            <input type="text" id="uname" name="uname"><br>





            <label for="uage">Enter your age:</label><br>





            <input type="number" id="uage" name="uage">





        </form>





    </body>





</html>





Here is what will be produced from this snippet:





Textual input fields: "Enter your name:" and "Enter your age:"





The first important thing to observe is that each pair of <label> and <input> tags is linked by the <input> tag idvalue, and the <label> tag forvalue, which must be the same. So, the first pair of <label> and <input> tags stand for asking the user their name (uname), and the second pair stands for asking the user their age (uage).





Furthermore, the <input> tag specifies that the input will be made in text format, i.e., the user will type it into the input box. There are several types of <input> tags:





  • textual, like text, number, email, and password
  • non-textual, like radio, range, checkbox, color, file, and button.





From an input point of view, it should be noted that with range and checkbox, a user can select multiple options. This is not the case with radio. Each radio option is mutually exclusive, meaning you can only choose one option at a time.





There are other ways to create input options in HTML5, including:





  • <textarea> tag that allows the input of text in several lines
  • <select> tag that defines a drop-down list providing single or multiple options





Take a moment to review the reading and video to learn more about how input elements are the first step in learning how to create web forms.





Read section “Input Forms” (opens new tab) of Chapter 2 in Practical Web Development. 





This section explains about forms, the elements necessary for a functioning web form, and value attributes.





As you read, consider the following questions:





  • What do all forms have in common?
    • the user will enter or input some information
  • What attributes are necessary for a form?
    • Attribute Description type=”text” This is the default so there is no need to specify this attribute: this is for text. type=”hidden” This one does not show, but it is extremely useful to pass values. type=”radio” This creates a radio button: only one can be selected. type=”checkbox” This creates a checkbox: multiple checkboxes can be selected. type=”password” This is like text but the inputted characters are not shown. type=”button” This creates a button. You can also create buttons using the tag. type=”submit” This creates a submit button. This means the form will be send to the server. You can also create a submit button using theelement and its type=”submit” attribute. type=”file” This creates a file upload dialog with a Choose file button. When you use the multiple attribute and the browser supports it, you can select multiple files.





Watch “HTML Form Basics” (opens new tab) in the course HTML Essential Training from LinkedIn Learning.





This video teaches you about textual input type options.





As you watch, consider the following questions:





  • What indicates that the input element is a self-closing tag?
    • The form and other inputs?
  • What is the point of having different type values like text or email, if all input data is textual anyway?
    • so you can connect them later





Form Action Attribute





The action attribute specifies the name and location of the CGI script used to process the form. The contents of the form will be processed by the script and acted upon according to the instructions in the script.





<form action=”example.php”>





Form Method Attribute





The method attribute specifies the method by which the browser will send form data to a web server. The method attribute is assigned one of the following values:





  • “get” — Form data is appended to the URL of the webpage for use in a query string. This method sends information in cleartext and is not secure.
  • “post” — Form data is appended within the body of the HTTP request with the action attribute. Post is the preferred method for sending form data because it is more secure. It can also send more characters than get.





<form action=”example.php” method=”post”>





The Get Method 





All forms consist of form elements, such as an input element to enter your first name, last name, address, email, etc. Each input element (or select or textarea elements) include the name attribute assigned to some value. For example, input elements meant for a user to enter their first and last names might be:





<input type=”text” name=”firstname” id=”firstname”>





<input type=”text” name=”lastname” id=”lastname”>





When the get method is used within a form, it appends the name/value pairs to the end of an URL as a query string. For example, let’s say your domain is exampledomain.com and the php file is named example.php. The query string appended to the end of the URL would be:





http://www.exampledomain.com/example.php?firstname=John&lastname=Smith





The underlined/bold area above is the query string. It is appended at the end of the URL. The question mark (?) is used to append the query string.





The Post Method





The post method appends form data within the body of the HTTP request. Unlike the get method, it does not append data to the end of the URL, which makes it a more secure method. It can also send more data than the get method.





Read the following sections on attribute values and request methods from W3Schools.com.





This will explain about slightly advanced form attributes that follow along the lines of query strings and sending user and form data.  You can also practice submitting a form using the methods described.









As you read, consider the following questions:





  • What information is sent using the “get” method?
  • What information that the user inputs is sent?





Read the following sections on attribute values and request methods from W3Schools.com.





This will explain about slightly advanced form attributes that follow along the lines of query strings and sending user and form data.  You can also practice submitting a form using the methods described.









As you read, consider the following questions:





  • What information is sent using the “get” method?
  • What information that the user inputs is sent?





CAPTCHA





As web developers, we need consider some of the best methods for protecting our websites. One way to secure a website is by using a feature known as Completely Automated Public Turing test to tell Computers and Humans Apart, or CAPTCHA. Some hacks and attacks are made via a program or a bot, and CAPTCHA is a tool that requires human interaction to proceed (Essentials, 2017). CAPTCHA will generate a photo, a word, or a sentence that the user must click on or type in. The words will typically look funny, but computers cannot recognize words that are distorted and jumbled (Kalman, 2014).





Watch “CAPTCHA” (opens new tab) in the course UX for Webforms from LinkedIn Learning.





This video teaches you about CAPTCHA and its benefits.





As you watch, consider the following questions:





  • What is CAPTCHA?
  • How is CAPTCHA used?
  • Why is CAPTCHA used?










Non-Textual Input Types





Learning Objectives





  • Create a basic HTML form that accepts user input.





Thus far, you have learned that the <input> tag can be used to allow the end-user to enter textual elements like text and numbers. The end-user’s device (e.g. mobile, PC, tablet, etc.) and certain keyboard options may impact how the <input> tag behaves when receiving and displaying information. Now let’s explore how the <input> tag can be used for non-textual inputs.





The <input> tag is powerful enough to offer some other interesting options such as:





  • radio type, which offers a set of possible options that can be selected (clicked) by the user;
  • range type, that offers a slider to be selected (selector dragged) by the user;
  • checkbox type, that offers a two-choice (either checked or unchecked) option to be clicked by the user;
  • color type, that offers a full “choose color” dialog feature;
  • file type, that offers a full “choose file” dialog feature.





In the upcoming Learning Exploration, you have an HTML file that exemplifies these non-textual types of <input> options. Read more about the HTML <input> tag (opens new tab) to gain further insight beyond what is covered in the readings for this module.





Read “HTML Input Types” (opens new tab) from W3Schools.com 





This article teaches you about non-textual input types as well as try some examples yourself.





As you read, consider the following questions:





  • How do you define characters for <input>  tags with value text?
    • <input type="week">
  • Which type of input is best for a multiple-choice question for which only one choice can be chosen?
    • radio
  • Which type of input is best for a multiple-choice question for which more than one choice can be chosen?
    • checkbox










Form Buttons





Learning Objectives





  • Create a basic HTML form that accepts user input.
  • Analyze ways in which a web browser can become an application delivery platform.





As mentioned, HTML forms are meant to provide input from the user. However, the input is only considered when the web page is informed to deliver the information to a handler program. To do that, HTML provides some button options.





The first of those options is the submit button, which activates:





  • the collection of the current status of all <input> tags (values entered by the user);
  • the posting of this information to a program that will handle it.
    • Even though this should be handled by a JavaScript (JS) code (which is not covered in this module), the form will issue a command“post” that will hold the current status of all<input> tags of the form indicated by the names and types associated with the properties name and type, and their respective values.





Buttons are a means to send user input information to a handler program, such as JavaScript. This is performed through:





  • an attribute action at the <form> tag indicating the URL of the handler program;
  • one <input> tag inside the form block indicating the type submit.





Within an HTML form with a button, an action will be performed once an end user clicks the button. The <input> tag with the type button will reference the action to be performed on the attribute onclick.





Another common button type available by HTML forms is the reset button that is expressed as a type reset in an <input> tag. This button, when clicked, will reset the status of all HTML form <input> tags back to their initial state.





Now that you know about the use of buttons within HTML forms, it is important to note that HTML also provides the option to insert a <button> tag. This tag is different because it produces a button that does not belong to a form but behaves similarly, since it invokes a handler program. However, buttons implemented by the HTML <button> tag do not have input tags associated with them. Note this example:










<!DOCTYPE html>





<html>





    <body>





        <h1>Saying Hi... Popping Up</h1>





        <p>Click to say hello...</p>





        <button type="button" onclick="alert('Hello World!')">click here</button> 





    </body> 





</html>





Watch “More on Forms” (opens new tab) in the course HTML Essential Training from LinkedIn Learning.





This video teaches you about client-side validation, required attributes, and default values.





As you watch, consider the following questions:





  • What is form validation?
    • using fields for things like text and selection types
  • What is a required attribute?
    • making the user rput something in there
  • Why should a developer use default values in forms?





Watch “Additional Form Element Types” (opens new tab) in the course HTML Essential Training from LinkedIn Learning.





This video teaches you about different options for collecting data. 





As you watch, consider the following questions:





  • What is a text area element used for?
  • What is a select list?










From Forms to Graphical User Interfaces





Learning Objectives





  • Create a basic HTML form that accepts user input.
  • Analyze ways in which a web browser can become an application delivery platform.
  • Apply third-party applications to a web page.





Forms are a powerful tool to provide web pages with both input and output capabilities. But web pages are also able to play the role of a graphical user interface (GUI) for command line programs. However, it is important to remember that a user interface, graphical or not, needs to consider a responsive behavior while the program is being executed. Some programs must first gather input information, execute program processing, then output the results. This is known as batch behavior, or a gathering of input information. Input batching programs can be easily integrated into a web page that is acting as a GUI. Batching programs need to associate a form that gathers the input parameters, then submit that form to the program execution that will eventually create an output in the form of another HTML file.





There are also programs that require the user to interact continuously with the program, such as an interactive game. Non-batch programs like this are challenging to integrate into web pages, since they require the web page to be responsive. The user requests and the program outputs are simultaneous. Consequently, it is not enough for HTML to provide static control flow, but rather an event-response behavior. This can be done by an event manager, and it is often only done by scripting languages that must be embedded into the web page code. The most popular language for this approach is JavaScript, but other specific languages like PHP, or adapted ones like Python, can also be used.





Watch “Client-Side Scripting with JavaScript” (opens new tab) in the course Web Technology Fundamentals from LinkedIn Learning.





This video teaches you about JavaScript and how it interacts with web pages. 





As you watch, consider the following questions:





  • What is JavaScript?
  • What does it mean that JavaScript is performed on the client side?
    • loaded into the HTML










User Input – Summary





unlabelled image





HTML web forms may be used to add interactivity to web content. Using various input types, you can add features such as radio buttons, check boxes, and several options for textual inputs. You reviewed several examples of HTML input types and how they are used. The activity in this module allowed you to practice creating different types of inputs tags and see how each performs for the end user.





You learned about the tags used for adding web form buttons to your HTML content, and how the command postis executed. Buttons can be clicked and will render various states based on what has been entered by the end user in the input tags.





During this module you learned the following:





The <form> tag encompasses the <label> and <input> tags 





  • Developers use CAPTCHA to verify that humans are interacting with web forms 
  • There are multiple input types, such as the following:
    • radio
    • range
    • checkbox
  • Form buttons are used to send information to an event handler
























Nick
























			

	
	

		
Leave a Reply 
Your email address will not be published. Required fields are marked *