icio
November 24th, 2006, 09:39 PM
Damn, I think I forgot to submit my reply the last time.
Anyway, my advice to you was to use the "checked" attribute for an <input type="radio" /> tag. This will choose one of the radio buttons by default, so youi don't have to worry about there not being a radio button selected. You would use it in the following manner:
<input type="radio" name="gender" value="female" checked="checked" />
<input type="radio" name="gender" value="male" />
However, I did also come up with a scripting implementation of the effect you're after. It doesn't work in IE because of the way that IE tabs through the form inputs, which is lame, but it works nicely in the other browsers that I tested it in.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>For xmrcivicboix</title>
<style type="text/css">
body {
margin: 0;
padding: 20px;
}
* {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 10px;
vertical-align: baseline;
background-color: #333;
color: #FFF;
}
input[type=text] {
border: 1px solid #CCC;
padding: 5px;
}
.frame {
padding: 20px;
}
</style>
<script type="text/javascript">
function confirmChecks(name) {
var b = false, l = document.getElementsByName(name);
for (var i=0; i<l.length; i++) {
b = b || l[i].checked;
}
if (!b) {
alert("Please select one of the radio buttons.");
l[0].focus();
}
}
</script>
</head>
<body>
<input style="width: 500px" type="text" value="Start here then tab." /><br />
<div class="frame">
<input type="radio" value="1" name="radios" /> Radio button 1.<br />
<input type="radio" value="2" name="radios" onblur="confirmChecks(this.name);" /> Radio button 2.<br />
</div>
<input style="width: 500px" type="text" value="Tab to here without making any selection." /><br />
</body>
</html>
Hope that helps :thumb: