Learn about...
HTML has special elements for building input forms to create user interfaces for web applications. Forms can be connected to JavaScript functions to inspect the submitted information and to change the web page dynamically.
Use the following examples to help you answer the Pre-lab Questions in Blackboard.
Remember, if your instructor is busy helping others, raise your hand to make sure the instructor sees that you need help, but then put your hand down and go back to work. As you wait for help, try your best to solve the problem on your own by reading the textbook.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Login Form</title> </head> <body> </body> </html>
body, add a label and input text field
<label for="email">Email</label> <input type="text" id="email" ><br>
<label for="passwd">Password</label> <input type="password" id="passwd"><br>
label and so that it can be accessed by JavaScript.label tag and connect it to a new password field with id = "passwd2".<input type="button" value="Register" onclick="check()">
onclick
is an HTML attribute the specifies what to do when the button is clicked.
Other HTML form elements have attributes that specify what to do when
the element is changed or if the mouse hovers over it.script tag. It is a common convention to put script tags inside the head if the code needs to be executed before the page is rendered. If the JavaScript needs to be executed after the page is render, it is a common practice to put JavaScript inside the body immediate before the closing body tag, i.e., </body>.
script tag anywhere in the head of your HTML document.
function check() {
var email = document.getElementById("email").value;
var message = "";
var messageColor = "red";
if (email.search(/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/) == -1) {
message = "Invalid email address";
}
else {
message = "Valid email and password";
messageColor = "green";
}
showMessage(message, messageColor)
}
function showMessage(message, messageColor) {
alert (message + " " + messageColor)
}
Key Concepts: The follow explanations and links will help you complete the next part of this activity.
document refers to the actual HTML document where the JavaScript code resides.
getElementById is a document method that returns an element object. This
is why it is so useful to give HTML elements an id name.
input element is the text string that is typed into the element.
Thus, document.getElementById("email").value refers to the text string that the user
typed into the email text field.var is the way to define variables in JavaScript. JavaScript is dynamically typed, which means the type of a variable is determined when you assign it a value.
Thus, var email will be a string once we assign it the text string of
the "email" element..search method can be applied to any string. This method can use a regular expression to search for a pattern in a string. This method returns -1 if a string does not match the regular expression. The very complex regular expression in the code above is used to determine
if a string is a valid email address. Improve the validation script so that it verifies each item below and sets the appropriate error message if the submitted values are not correct:
Show your instructor your working script.
Improve the registration form so that instead of using an alert message box, it displays the error message on the page inside of a color-decorated paragraph. The text should be red if an error message is displayed. The text should be green if the message is "Valid email and password."
Use the following code examples and references to help you:
var myText = document.createTextNode(message);
myParagraph = document.createElement("p");
myParagraph.appendChild(myText);
var myBody = document.getElementsByTagName("body")[0];
body tag
in this document, there could be two or more
elements returned by this method. Thus, this
method returns an array of elements. Array subscripts, i.e., [],
can be used to get the first [0], second [1], or nth [n-1] element.
myBody.appendChild(myParagraph);
myParagraph.id = "error_message";
myParagraph.setAttribute("style", "color:"+messageColor);
Task: You should append a paragraph to the body of the HTML document. The paragraph should display the correct error message with either red or green text.
Show your instructor your working script.
<!doctype html> <html> <body> <input type="text" id="x"> + <input type="text" id="y"> = <input type="text" id="ans"> <script src="add.js"></script> </body> </html>
function add() {
var x = document.getElementById("x");
var y = document.getElementById("y");
var ans = document.getElementById("ans");
ans.value = x.value + y.value;
}
var x = document.getElementById("x");
var y = document.getElementById("y");
x.addEventListener("change", add, false);
y.addEventListener("change", add, false);
Key Concepts:
add.
script tag.
Change add.html as follows:
<input type="checkbox" value="3" id="x"> + <input type="checkbox" value="4" id="y"> = <input type="text" value="0" id="ans">
Change add.js as follows:
function add(obj) {
var ans = document.getElementById("ans");
if (obj.checked)
ans.value = parseInt(ans.value) + parseInt(obj.value);
else
ans.value = parseInt(ans.value) - parseInt(obj.value);
}
var x = document.getElementById("x");
var y = document.getElementById("y");
x.addEventListener("change", function(){add(x)}, false);
y.addEventListener("change", function(){add(y)}, false);
Key Concepts:
function() { function call with parameters }
that can then make a function call with parameters.Using the previous two parts as a model, change the form to replace the two checkboxes with two option-select menus that allow the user to select the values 0 though 9. The input text field should display the sum of the two selected value.