143 lines
4.3 KiB
HTML
143 lines
4.3 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Example 6.18</title>
|
||
|
|
<script>
|
||
|
|
function setYellow(x)
|
||
|
|
{
|
||
|
|
document.getElementById(x).style.background="yellow";
|
||
|
|
}
|
||
|
|
function setKhaki(x)
|
||
|
|
{
|
||
|
|
document.getElementById(x).style.background="khaki";
|
||
|
|
}
|
||
|
|
function setGreen(x)
|
||
|
|
{
|
||
|
|
document.getElementById(x).style.background="green";
|
||
|
|
}
|
||
|
|
function setOrange(x)
|
||
|
|
{
|
||
|
|
document.getElementById(x).style.background="orange";
|
||
|
|
}
|
||
|
|
function setRed(x)
|
||
|
|
{
|
||
|
|
document.getElementById(x).style.background="red";
|
||
|
|
}
|
||
|
|
function setPurple(x)
|
||
|
|
{
|
||
|
|
document.getElementById(x).style.background="purple";
|
||
|
|
}
|
||
|
|
function getFname(firstname)
|
||
|
|
{
|
||
|
|
var fName = document.getElementById(firstname).value;
|
||
|
|
document.getElementById('first_name').innerHTML = fName;
|
||
|
|
}
|
||
|
|
function getLname(lastname)
|
||
|
|
{
|
||
|
|
var lName = document.getElementById(lastname).value;
|
||
|
|
document.getElementById('last_name').innerHTML = lName;
|
||
|
|
}
|
||
|
|
|
||
|
|
function getNname(nickname)
|
||
|
|
{
|
||
|
|
var nName = document.getElementById(nickname).value;
|
||
|
|
document.getElementById('nick_name').innerHTML = nName;
|
||
|
|
}
|
||
|
|
function getCar(car)
|
||
|
|
{
|
||
|
|
var dreamCar = document.getElementById(car).value;
|
||
|
|
document.getElementById('dream_car').innerHTML = dreamCar;
|
||
|
|
}
|
||
|
|
function getMeal(meal)
|
||
|
|
{
|
||
|
|
var favMeal = document.getElementById(meal).value;
|
||
|
|
document.getElementById('favorite_meal').innerHTML = favMeal;
|
||
|
|
}
|
||
|
|
function getVacation(vacation)
|
||
|
|
{
|
||
|
|
var vacationSpot = document.getElementById(vacation).value;
|
||
|
|
document.getElementById('vacation_spot').innerHTML = vacationSpot;
|
||
|
|
}
|
||
|
|
function setBlue(x)
|
||
|
|
{
|
||
|
|
document.getElementById(x).style.background="yellow";
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<style type="text/css">
|
||
|
|
<!--
|
||
|
|
body {
|
||
|
|
margin: 5%;
|
||
|
|
}
|
||
|
|
p {
|
||
|
|
font-weight: bold;
|
||
|
|
color: #006A9D;
|
||
|
|
}
|
||
|
|
label {
|
||
|
|
font-weight: bold;
|
||
|
|
color: #006A9D;
|
||
|
|
}
|
||
|
|
h3 {
|
||
|
|
color: #006A9D;
|
||
|
|
}
|
||
|
|
|
||
|
|
-->
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<h3><br />
|
||
|
|
Fun With the Form</h3>
|
||
|
|
<p>Enter your information in the boxes. After you are satisfied with each entry, press the OK
|
||
|
|
button to see the information displayed below. Use the TAB key to move from box to box and don't
|
||
|
|
be surprised by where the TABs take you.</p>
|
||
|
|
<div style="width: 90%;">
|
||
|
|
<div style="width: 33%; float: left;">
|
||
|
|
<fieldset>
|
||
|
|
<label>First name:<br />
|
||
|
|
</label> <input type="text" name="firstname" id="firstname" size = "30" value = "" tabindex = "1" onfocus = "setYellow(this.id)" />
|
||
|
|
<input type ="button" onclick="getFname('firstname')" value = "ok" tabindex = "1" /></button><br />
|
||
|
|
<br /></fieldset></div>
|
||
|
|
<div style="width: 33%; float: left;">
|
||
|
|
<fieldset>
|
||
|
|
<label>Dream car:<br />
|
||
|
|
</label> <input type="text" name="car" id="car" size = "30" value = "" tabindex = "4" onfocus = "setKhaki(this.id)" />
|
||
|
|
<input type ="button" onclick="getCar('car')" value = "ok" tabindex = "4" /> </button><br /><br />
|
||
|
|
</fieldset></div>
|
||
|
|
<div style="width: 33%; float: left;">
|
||
|
|
<fieldset>
|
||
|
|
<label>Dream Vacation:<br />
|
||
|
|
</label> <input type="text" name="vacation" id="vacation" size = "30" value = "" tabindex = "6" onfocus = "setGreen(this.id)" />
|
||
|
|
<input type ="button" onclick="getVacation('vacation')" value = "ok" tabindex = "6" /></button><br /><br />
|
||
|
|
</fieldset></div>
|
||
|
|
<div style="width: 33%; float: left;">
|
||
|
|
<fieldset>
|
||
|
|
<label>Nickname:<br />
|
||
|
|
</label> <input type="text" name="nickname" id="nickname" size = "30" value = "" tabindex = "3" onfocus = "setOrange(this.id)" />
|
||
|
|
<input type ="button" onclick="getNname('nickname')" value = "ok" tabindex = "3" /></button><br /><br />
|
||
|
|
</fieldset></div>
|
||
|
|
<div style="width: 33%; float: left;">
|
||
|
|
<fieldset>
|
||
|
|
<label>Favorite meal:<br />
|
||
|
|
</label> <input type="text" name="meal" id="meal" size = "30" value = "" tabindex = "5" onfocus = "setRed(this.id)" />
|
||
|
|
<input type ="button" onclick="getMeal('meal')" value = "ok" tabindex = "5" /></button><br /><br />
|
||
|
|
</fieldset></div>
|
||
|
|
<div style="width: 33%; float: left;">
|
||
|
|
<fieldset>
|
||
|
|
<label>Last name:<br />
|
||
|
|
</label> <input type="text" name="lastname" id="lastname" size = "30" value = "" tabindex = "2" onfocus = "setPurple(this.id)" />
|
||
|
|
<input type ="button" onclick="getLname('lastname')" value = "ok" tabindex = "2" /></button><br /><br />
|
||
|
|
</fieldset></div>
|
||
|
|
|
||
|
|
<div style="clear:both;"></div>
|
||
|
|
<div>
|
||
|
|
<h3>Your information:</h3>
|
||
|
|
<p>First name: <span id = "first_name"> </span> <br />
|
||
|
|
Last name: <span id = "last_name"> </span> <br />
|
||
|
|
Nickname: <span id = "nick_name"> </span> <br />
|
||
|
|
Dream car: <span id = "dream_car"> </span> <br />
|
||
|
|
Favorite meal: <span id = "favorite_meal"> </span> <br />
|
||
|
|
Vacation desired: <span id = "vacation_spot"> </span> </p></div>
|
||
|
|
</form>
|
||
|
|
</body>
|
||
|
|
</html>
|