1. Copy and paste the following between your HEAD tags:-

ms1.innerHTML="<span style='color:#000000'>Miles</span>";
ks1.innerHTML="<span style='color:#000000'>Klms</span>";
fs1.innerHTML="<span style='color:#000000'>Frls</span>";
ys1.innerHTML="<span style='color:#000000'>Yds</span>";
fts1.innerHTML="<span style='color:#000000'>Ft</span>";
is1.innerHTML="<span style='color:#000000'>Ins</span>";

iterms.innerHTML="<span style='color:#000000'>Results in terms of ::>>::>>";
A1.innerHTML="<span style='color:#000000'>Miles</span>";
A2.innerHTML="<span style='color:#000000'>Klms</span>";
A3.innerHTML="<span style='color:#000000'>Frls</span>";
A4.innerHTML="<span style='color:#000000'>Yds</span>";
A5.innerHTML="<span style='color:#000000'>Ft</span>";
A6.innerHTML="<span style='color:#000000'>Ins</span>";
AddSubtract.selectall.style.color="#000000";
AddSubtract.deselectall.style.color="#000000";
AddSubtract.getresults.value="    Add    ";
AddSubtract.clearall.style.color="#000000";
AddSubtract.inches1.focus()}
}

function ToFrom1(){
if (AddSubtract.addSub[1].checked=true)
{AddSubtract.addSub[0].checked=false;
AS0.innerHTML="<span style='color:#000000'>Add</span>";
AS1.innerHTML="<span style='color:#0000ff'>Subtract</span>";
legend.innerHTML="<span style='color:#0000ff'>Add or Subtract Lengths</span>";
ToFro.innerHTML="<span style='color:#0000ff'>From ::>>::>>::>></span>";
ms.innerHTML="<span style='color:#0000ff'>Miles</span>";
ks.innerHTML="<span style='color:#0000ff'>Klms</span>";
fs.innerHTML="<span style='color:#0000ff'>Frls</span>";
ys.innerHTML="<span style='color:#0000ff'>Yds</span>";
fts.innerHTML="<span style='color:#0000ff'>Ft</span>";
is.innerHTML="<span style='color:#0000ff'>Ins</span>";

ms1.innerHTML="<span style='color:#0000ff'>Miles</span>";
ks1.innerHTML="<span style='color:#0000ff'>Klms</span>";
fs1.innerHTML="<span style='color:#0000ff'>Frls</span>";
ys1.innerHTML="<span style='color:#0000ff'>Yds</span>";
fts1.innerHTML="<span style='color:#0000ff'>Ft</span>";
is1.innerHTML="<span style='color:#0000ff'>Ins</span>";

iterms.innerHTML="<span style='color:#0000ff'>Results in terms of ::>>::>>";
A1.innerHTML="<span style='color:#0000ff'>Miles</span>";
A2.innerHTML="<span style='color:#0000ff'>Klms</span>";
A3.innerHTML="<span style='color:#0000ff'>Frls</span>";
A4.innerHTML="<span style='color:#0000ff'>Yds</span>";
A5.innerHTML="<span style='color:#0000ff'>Ft</span>";
A6.innerHTML="<span style='color:#0000ff'>Ins</span>";
AddSubtract.selectall.style.color="#0000ff";
AddSubtract.deselectall.style.color="#0000ff";
AddSubtract.getresults.value="Subtract";
AddSubtract.clearall.style.color="#0000ff";
AddSubtract.feet1.focus();}
}

lengthMes=parseInt(miles*63360)+parseInt(kilometers*39600)+parseInt(furlongs*7920)+parseInt(yards*36)+parseInt(feet*12)+parseInt(inches);

miles1=AddSubtract.miles1.value;
if (miles1==""){miles1=0}
kilometers1=AddSubtract.kilometers1.value;
if (kilometers1==""){kilometers1=0}
furlongs1=AddSubtract.furlongs1.value;
if (furlongs1==""){furlongs1=0}
yards1=AddSubtract.yards1.value;
if (yards1==""){yards1=0}
feet1=AddSubtract.feet1.value;
if (feet1==""){feet1=0}
inches1=AddSubtract.inches1.value;
if (inches1==""){inches1=0}

lengthMes1=parseInt(miles1*63360)+parseInt(kilometers1*39600)+parseInt(furlongs1*7920)+parseInt(yards1*36)+parseInt(feet1*12)+parseInt(inches1);

if (miles==0 && kilometers==0 && furlongs==0 && yards==0 && feet==0 && inches==0 && miles1==0 && furlongs1==0 && yards1==0 && feet1==0 && inches1==0)
{alert("We need some numbers to get things going!");
AddSubtract.inches1.focus();return false}

if (AddSubtract.addSub[0].checked==true)
{AddSubtract.addSub[1].checked=false;
Total=parseInt(lengthMes+lengthMes1)}
else
{AddSubtract.addSub[1].checked=true;
AddSubtract.addSub[0].checked=false;
Total=parseInt(lengthMes-lengthMes1)}

miles3=Total/63360;
kilometers3=Total/39600;
furlongs3=Total/7920;
yards3=Total/36;
feet3=Total/12;
inches3=Total;

yyy=0;
for (x=0; x<AddSubtract.inTerms.length; x++)
{if (AddSubtract.inTerms[x].checked==true)
{yyy=yyy+1;lastChecked=x}
}
if (yyy>0)
{results.innerHTML="<span style='color:#0000ff'>RESULTS ::>>::>> </span>"}
else
{results.innerHTML=""}

if (AddSubtract.inTerms[0].checked==true)
{rest=Total%63360;
qmiles=(Total-rest) / 63360;
if (lastChecked==0)
{qmiles=qmiles+(rest/63360);if (qmiles==1)
{nom=" Mile "}else{nom=" Miles "}}else{qmiles=Comma(qmiles);if (qmiles==1)
{nom=" Mile, "}else{nom=" Miles, "}}
Total=rest;
results.innerHTML=results.innerHTML+qmiles+nom}

if (AddSubtract.inTerms[1].checked==true)
{rest=Total%39600;
qkilometers=(Total-rest) / 39600;
if (lastChecked==1)
{qkilometers=qkilometers+(rest/39600);if (qkilometers==1){nom=" Kilometer "}else{nom=" Kilometers "}}else{qkilometers=Comma(qkilometers);if (qkilometers==1){nom=" Kilometer, "}else{nom=" Kilometers, "}}
Total=rest;
results.innerHTML=results.innerHTML+qkilometers+ nom}

if (AddSubtract.inTerms[2].checked==true)
{rest=Total%7920;
qfurlongs=(Total-rest) / 7920;
if (lastChecked==2)
{qfurlongs=qfurlongs+(rest/7920);if (qfurlongs==1){nom=" Furlong "}else{nom=" Furlongs "}}else{qfurlongs=Comma(qfurlongs);if (qfurlongs==1)
{nom=" Furlong, "}else{nom=" Furlongs, "}}
Total=rest;
results.innerHTML=results.innerHTML+qfurlongs+ nom}

if (AddSubtract.inTerms[3].checked==true)
{rest=Total%36;
qyards=(Total-rest) / 36;
if (lastChecked==3)
{qyards=qyards+(rest/36);if (qyards==1){nom=" Yard "}else{nom=" Yards "}}else{qyards=Comma(qyards);if (qyards==1){nom=" Yard, "}else{nom=" Yards, "}}
Total=rest;
results.innerHTML=results.innerHTML+qyards+nom}

if (AddSubtract.inTerms[4].checked==true)
{rest=Total%12;
qfeet=(Total-rest) / 12;
if (lastChecked==4)
{qfeet=qfeet+(rest/12);if (qfeet==1){nom=" Foot "}else{nom=" Feet "}}else{qfeet=Comma(qfeet);if (qfeet==1){nom=" Foot, "}else{nom=" Feet, "}}
Total=rest;
results.innerHTML=results.innerHTML+qfeet+nom}

if (AddSubtract.inTerms[5].checked==true)
{Total=Comma(Total);
if (Total==1)
{nom=" Inch"}else{nom=" Inches"}
results.innerHTML=results.innerHTML+Total+nom}

results6.innerHTML="EQUAL TO >>::>>::";
results0.innerHTML=miles3+"<span style='color:#ff0000'> Miles</span>";
results1.innerHTML="or "+kilometers3+"<span style='color:#ff0000'> Kilometers</span>";
results2.innerHTML="or "+furlongs3+"<span style='color:#ff0000'> Furlongs</span>";
results3.innerHTML="or "+yards3+"<span style='color:#ff0000'> Yards</span>";
results4.innerHTML="or "+feet3+"<span style='color:#ff0000'> Feet</span>";
results5.innerHTML="or "+inches3+"<span style='color:#ff0000'> Inches</span>";
}

function SelectAll(){
for (x=0; x<AddSubtract.inTerms.length; x++)
{AddSubtract.inTerms[x].checked=true}
}

function DeselectAll(){
for (x=0; x<AddSubtract.inTerms.length; x++)
{AddSubtract.inTerms[x].checked=false}
}

function ClearAll(){
AddSubtract.miles.value="";
AddSubtract.kilometers.value="";
AddSubtract.furlongs.value="";
AddSubtract.yards.value="";
AddSubtract.feet.value="";
AddSubtract.inches.value="";
AddSubtract.miles1.value="";
AddSubtract.kilometers1.value="";
AddSubtract.furlongs1.value="";
AddSubtract.yards1.value="";
AddSubtract.feet1.value="";
AddSubtract.inches1.value="";
for (x=0; x<AddSubtract.inTerms.length; x++)
{AddSubtract.inTerms[x].checked=false}
}

function round2(nbr,digits){
nbr=nbr.toString()
if (nbr.indexOf(".")==-1)
{int_part=nbr
decimal_part=""}
else
{int_part=nbr.substring(0,nbr.indexOf("."))
decimal_part=nbr.substring(1+nbr.indexOf("."),2+nbr.indexOf(".")+digits)}
while(decimal_part.length<digits+1)
decimal_part+="0"
if (Number(decimal_part.charAt(decimal_part.length-1)<5))
decimal_part=decimal_part.substring(0,digits)
else
{decimal_part=(Number(decimal_part)+10).toString()
if (decimal_part.length>digits+1){
int_part=(Number(int_part)+1).toString()
decimal_part=decimal_part.substring(1,digits+1)}
decimal_part=decimal_part.substring(0,digits)}
if (int_part=="")
int_part=0;
if (Number(digits)>0)
return int_part+"."+decimal_part
else
return int_part
}
</script>

*********************************
2. Copy and paste the following code between your BODY tags where you want the input displayed:
<div style="position:absolute; left:250; top:200">
<center><table width=90% border=0 bordercolor=#ffff00 cellspacing="0" cellpadding="10"><tr><td>

<center><h3>Add/Subtract Miles, Kilometers, Furlongs, Yards, Feet, Inches</h3></center>
<p align="center"><span style="color:#ff0000">12 inches</span> equal <span style="color:#ff0000">1 foot</span>;
<br><span style="color:#ff0000">3 feet</span> equal <span style="color:#ff0000">1 yard</span>;
<br><span style="color:#ff0000">220 yards</span> equal <span style="color:#ff0000">1 furlong</span>;
<br><span style="color:#ff0000">5 furlongs</span> equal <span style="color:#ff0000">1 kilometer</span>;
<br><span style="color:#ff0000">1.6 kilometers</span> equal <span style="color:#ff0000">1 mile</span>;
</p>
<p>The decimal measuring system uses 100 to advance from centimeters to Meters and 1,000 to advance to Kilometers.
<p>The process of adding and subtracting lengths uses a multi-base system of 12, 3, 220, 5 and 1.6 to move from inches through miles.

<p>To do a calculation follow the following steps :-
<ul type="square">
<li>Select Add or Subtract to add or subtract components.
<li>Input the number of components to add or subtract.
<li>Decide the form in which you want your results.
<li>Then press 'Add/Subtract Component'.</ul>

<fieldset>
<legend id="legend" align="center" style="color:#000000;font-size:16">Add or Subtract Lengths</legend>
<table width=100% border=0 bordercolor=#000000 cellspacing="0" cellpadding="0"><tr><td colspan=12>
<form name="AddSubtract" method="post">
<tr><td colspan=12 style="color:#000000" id="ToFro">To ::>>::>>::>></td>

<tr><td colspan=2 id="ms">Miles<td colspan=2 id="ks" title="kilometers">Klms<td colspan=2 id="fs" title="furlongs">Frls<td colspan=2 id="ys">Yards<td colspan=2 id="fts">Feet<td colspan=2 id="is">Inches

<tr><td colspan=2><input type="text" name="miles" size="2" style="text-align:center" onKeyPress="if ((event.keyCode<48) || (event.keyCode>57)) event.returnValue=false" onFocus="this.className='currentField'" onBlur="this.className='changedField'">
<td colspan=2><input type="text" name="kilometers" size="2" style="text-align:center" onKeyPress="if ((event.keyCode<48) || (event.keyCode>57)) event.returnValue=false" onFocus="this.className='currentField'" onBlur="this.className='changedField'">
<td colspan=2><input type="text" name="furlongs" size="2" style="text-align:center" onKeyPress="if ((event.keyCode<48) || (event.keyCode>57)) event.returnValue=false" onFocus="this.className='currentField'" onBlur="this.className='changedField'">
<td colspan=2><input type="text" name="yards" size="2" style="text-align:center" onKeyPress="if ((event.keyCode<48) || (event.keyCode>57)) event.returnValue=false" onFocus="this.className='currentField'" onBlur="this.className='changedField'">
<td colspan=2><input type="text" name="feet" size="2" style="text-align:center" onKeyPress="if ((event.keyCode<48) || (event.keyCode>57)) event.returnValue=false" onFocus="this.className='currentField'" onBlur="this.className='changedField'">
<td colspan=2><input type="text" name="inches" size="2" style="text-align:center" onKeyPress="if ((event.keyCode<48) || (event.keyCode>57)) event.returnValue=false" onFocus="this.className='currentField'" onBlur="this.className='changedField'">

<tr><td colspan=12> 
<tr><td colspan=12>
<label for="add" id="AS0" style="color:#000000">     Add     </label>
<input type="radio" name="addSub" id="add" value="add" checked onClick="ToFrom()">
<input type="radio" name="addSub" id="subtract" value="subtract" onClick="ToFrom1()">
<label for="subtract" id="AS1" style="color:#0000ff">Subtract </label>

<tr><td colspan=2 id="ms1">Miles<td colspan=2 id="ks1" title="kilometers">Klms<td colspan=2 id="fs1" title="furlongs">Frls<td colspan=2 id="ys1">Yards<td colspan=2 id="fts1">Feet<td colspan=2 id="is1">Inches

<tr><td colspan=2><input type="text" name="miles1" size="2" style="text-align:center" onKeyPress="if ((event.keyCode<48) || (event.keyCode>57)) event.returnValue=false" onFocus="this.className='currentField'" onBlur="this.className='changedField'">
<td colspan=2><input type="text" name="kilometers1" size="2" style="text-align:center" onKeyPress="if ((event.keyCode<48) || (event.keyCode>57)) event.returnValue=false" onFocus="this.className='currentField'" onBlur="this.className='changedField'">
<td colspan=2><input type="text" name="furlongs1" size="2" style="text-align:center" onKeyPress="if ((event.keyCode<48) || (event.keyCode>57)) event.returnValue=false" onFocus="this.className='currentField'" onBlur="this.className='changedField'">
<td colspan=2><input type="text" name="yards1" size="2" style="text-align:center" onKeyPress="if ((event.keyCode<48) || (event.keyCode>57)) event.returnValue=false" onFocus="this.className='currentField'" onBlur="this.className='changedField'">
<td colspan=2><input type="text" name="feet1" size="2" style="text-align:center" onKeyPress="if ((event.keyCode<48) || (event.keyCode>57)) event.returnValue=false" onFocus="this.className='currentField'" onBlur="this.className='changedField'">
<td colspan=2><input type="text" name="inches1" size="2" style="text-align:center" onKeyPress="if ((event.keyCode<48) || (event.keyCode>57)) event.returnValue=false" onFocus="this.className='currentField'" onBlur="this.className='changedField'">

<tr><td colspan=12> 
<tr><td colspan=12 id="iterms" style="color:#000000">Results in terms of ::>>::>>
<tr><td colspan=2><label for="cbm" id="A1">Miles </label>
<input id="cbm" type="checkbox" name="inTerms" value="tmiles">
<td colspan=2><label for="cbk" title="kilometers" id="A2">Klms </label>
<input id="cbk" type="checkbox" name="inTerms" value="tkilometers">
<td colspan=2><label for="cbf" title="furlongs" id="A3">Frls </label>
<input id="cbf" type="checkbox" name="inTerms" value="tfurlongs">
<td colspan=2><label for="cby" id="A4">Yards </label>
<input id="cby" type="checkbox" name="inTerms" value="tyards">
<td colspan=2><label for="cbft" id="A5">Feet </label>
<input id="cbft" type="checkbox" name="inTerms" value="tfeet">
<td colspan=2><label for="cbi" id="A6">Inches </label>
<input id="cbi" type="checkbox" name="inTerms" value="tinches">

<td colspan=3>
<input type="button" name="clearall" style="color:#000000" value="Clear All" onClick="ClearAll()">
<tr><td> 
<tr><td colspan=12 style="color:#ff0000" id="results">
<tr><td colspan=12 style="color:#ff0000" id="results6">
<tr><td colspan=6 style="color:#0000ff" id="results0">
<td colspan=6 style="color:#0000ff" id="results1">
<tr><td colspan=6 style="color:#0000ff" id="results2">
<td colspan=6 style="color:#0000ff" id="results3">
<tr><td colspan=6 style="color:#0000ff" id="results4">
<td colspan=6 style="color:#0000ff" id="results5">
</form>
</td></tr></table>
</fieldset>
</div>
                     *********************************
Please Note
You can display where ever you like. You change the "left" and "top" values in the opening "div" tag above to whatever values you need. 
a) "top" is the vertical distance of the top left corner of the display starting at zero. The higher the number the lower down the page.
b) "left" is the horizontal distance of the top left corner of the display starting at zero. The higher the number the further across the page.
c) You can change also the color of the display and the background.

If you have any problems or questions please email us at info@datedial.com.

Linking Information:-
TITLE : Add/Subtract Miles, Kilometers, Furlongs, Yards, Feet, Inches
URL : http://www.datedial.com/datAdd_Subtract_Lengths.asp
DESCRIPTION : Add/subtract miles, kilometers, furlongs, yards, feet, inches.