Write a script that uses relational and equality operators to compare two Strings input by the user through an XHTML form. Output in an XHTML textarea whether the first string is less than, equal to or greater than the second.

<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Compare</title>
<script type="text/javascript">
<!--
function compare1()
{
var str1 = document.getElementById("string1").value;
var str2 = document.getElementById("string2").value;
if(str1 != str2)
{
if(str1 > str2)
{
document.getElementById("ans").value= str1 + " Greater than " + str2;
}
else
{
document.getElementById("ans").value= str1 + " Less than " + str2;
}
}
else
{
document.getElementById("ans").value= str1 + " Equals " + str2;
}
}
// -->
</script>
</head>
<body>

<h1> Compare</h1>
<hr />

<p>Press F5 or Refresh to load script again. This is a program to Compare two input strings.</p>
<form name = "compare" action = "">
<table border = "1">
<caption>Compare</caption>
<tr><td>Enter any String</td>
<td><input name = "string1" type = "text" />
</td></tr>
<tr><td>Enter Second String</td>
<td><input name = "string2" type = "text" />
</td></tr>
<tr><td>Output Comparison</td>
<td><textarea name="ans">
</textarea>
</td></tr>
<tr><td><input type = "button" value = "Compare"
onclick = "compare1()" /></td></tr>
</table>
</form>
</body>
</html>