Bài giảng Lập trình Web - Chapter 3: HTML forms & JavaScript events

HTML forms & JavaScript events

▪ HTML forms & attributes

➢ button, text box, text area

➢ selection list, radio button, check box, password, hidden, …

▪ JavaScript form events

➢ properties: name, type, value, …

➢ methods: blur(), focus(), click(), …

➢ event handlers: onBlur(), onFocus(), onChange(), onClick(), …

▪ advanced features & techniques

➢ timeouts

HTML forms

an HTML form is a collection of elements for handling input, output,

and events in a page

…

</form>

form elements include:

for input: button, selection list, radio button, check box, password, …

for input/output: text box, text area, …

we will revisit forms when we consider CGI programming

▪ a form groups together elements, whose contents are submitted as one

Button element

the simplest form element is a button

▪ analogous to a real-world button, can click to trigger events

attributes include: VALUE: specifies label that appears on the button

ONCLICK: specifies code to be executed when clicked

<html>

<!-- Dave Reed

form01.html

9/25/01 -->

<head>

<title> Fun with Buttons</title>

</head>

<body>

<input type="button" value="Click Me"

onClick="alert('Thanks, I needed that.');">

</form>

</body>

</html>

Buttons & JavaScript

the ONCLICK event-handler can specify any JavaScript code

▪ can be a sequence of statements inside quotes, can call functions, …

<html>

<!-- Dave Reed

form02.html

9/25/01 -->

<head>

<title> Fun with Buttons</title>

function randomInt(min, max) {

return Math.floor(Math.random() * (max - min + 1) + min);

}

</script>

</head>

<body>

<input type="button" value="Click for Lucky Number"

onClick="num = randomInt(1, 100);

alert('The lucky number for the day is ' + num);">

</form>

</body>

</html>

<html>

<!-- Dave Reed

form03.html

9/25/01 -->

Buttons &

functions

<head>

<title> Fun with Buttons</title>

function Greeting()

// Results: displays a time-sensitive greeting

{

for complex tasks,

should define

var now = new Date();

if (now.getHours() < 12) {

function(s) and have

the ONCLICK event

trigger a function call

alert("Good morning");

}

else if (now.getHours() < 18) {

alert("Good afternoon");

}

else {

alert("Good evening");

}

</script>

</head>

<body>

<input type="button" value="Click for Greeting"

onClick="Greeting();">

</form>

</body>

</html>

<html>

<!-- Dave Reed

form04.html

9/25/01 -->

Window

example

<head>

<title> Fun with Buttons </title>

function Help()

// Results: displays a help message in a separate window

{

var OutputWindow = window.open("", "OutWin");

OutputWindow.document.open();

OutputWindow.document.write("This might be a context-" +

"sensitive help message, depending on the " +

"application and state of the page.");

OutputWindow.document.close();

}

</script>

</head>

<body>

<input type="button" value="Click for Help"

onClick="Help();">

</form>

</body>

</html>

Text boxes

a text box allows for user input

▪ unlike prompt, user input persists on the page & can be edited

attributes include: NAME: name by which its contents can be referred

SIZE: width of the box (number of characters)

VALUE: initial contents of the box

<html>

<!-- Dave Reed

form06.html

9/25/01 -->

<head>

<title> Fun with Text Boxes </title>

</head>

<body>

Enter your name here:

<p>

<input type="button" name="clicker" value="Click Me"

onClick="alert('Thanks, ' + document.BoxForm.userName.value +

', I needed that.');">

</form>

</body>

</html>

Read/write text boxes

can access text box contents as document.FormName.BoxName.value

similarly, can change the contents with an assignment

Note: the contents are raw text, no HTML formatting

Also: contents are accessed as a string, must parseFloat if want a number

<html>

<!-- Dave Reed

form07.html

9/25/01 -->

<head>

<title> Fun with Text Boxes </title>

</head>

<body>

Enter a number here:

<p>

<input type="button" name="double" value="Double"

onClick="document.BoxForm.number.value=

parseFloat(document.BoxForm.number.value) * 2;">

</form>

</body>

</html>

<html>

<!-- Dave Reed

Text box

events

form08.html

9/25/01 -->

<head>

<title> Fun with Text Boxes </title>

function FahrToCelsius(tempInFahr)

// Assumes: tempInFahr is a number (degrees Fahrenheit)

// Returns: corresponding temperature in degrees Celsius

ONCHANGE

triggered

when the

{

return (5/9)*(tempInFahr - 32);

contents of

the box are

changed

}

</script>

</head>

<body>

ONFOCUS

triggered

when the

mouse clicks

in the box

Temperature in Fahrenheit:

<input type="text" name="Fahr" size=10 value="0"

onChange="document.BoxForm.Celsius.value =

FahrToCelsius(parseFloat(document.BoxForm.Fahr.value));">

<input type="text" name="Celsius" size=10 value=""

onFocus="blur();">

in Celsius

</form>

</body>

</html>

blur()

removes focus

Text box validation

what if the user enters a non-number in the Fahrenheit box?

solution: have the text box validate its own contents

▪ start with legal value

▪ at ONCHANGE, verify that new value is legal (otherwise, reset)

function verifyNum(textBox, resetValue)

// Assumes: textBox is a text box, resetValue is optional

// Results: alert if textBox does not contain a number, resets if provided

{

var boxValue = parseFloat(textBox.value);

if ( isNaN(boxValue) ) {

alert("You must enter a number value!");

if (resetValue != null) {

textBox.value = resetValue;

}

Text areas

a TEXT box is limited to one line of input/output

a TEXTAREA is similar to a text box in functionality, but can specify

any number of rows and columns

Initial Text

</TEXTAREA>

▪ Note: unlike a text box, a TEXTAREA has closing tag

initial contents of the TEXTAREA appear between the tags

▪ as with a text box, no HTML formatting of TEXTAREA contents

<html>

<!-- Dave Reed

form10.html

9/25/01 -->

Textarea

example

<head>

<title> Fun with Textareas </title>

function Table(low, high, power)

// Results: displays table of numbers between low & high, raised to power

{

var message = "i: i^" + power + "\n-------\n";

for (var i = low; i <= high; i++) {

message = message + i + ": " + Math.pow(i, power) + "\n";

}

document.AreaForm.Output.value = message;

}

</script>

</head>

<body>

Show the numbers from

<input type="text" name="lowRange" size=4 value=1> to

raised to the power of <input type="text" name="power" size=3 value=2>

<p><input type="button" value="Generate Table"

onClick="Table(parseFloat(document.AreaForm.lowRange.value),

parseFloat(document.AreaForm.highRange.value),

parseFloat(document.AreaForm.power.value));">

</div>

</form>

</body>

</html>

JavaScript & timeouts

the setTimeout function can be used to execute code at a later time

setTimeout(JavaScriptCodeToBeExecuted, MillisecondsUntilExecution)

Example: forward link to a moved page

<html>

<!-- Dave Reed

form14.html

9/25/01 -->

<head>

<title> Fun with Timeouts </title>

function Move()

// Results: sets the current page contents to be newhome.html

{

self.location.href = "https://google.com";

}

</script>

</head>

This page has moved to <a href="newhome.html">

https://google.com</a>.

</body>

</html>