How do you group related fields in HTML

The <fieldset> and <legend> tags are a great way to group relatedinformation in a form. These tags provide an easy means to group items visually,and are understood by screen readers and text-only devices, which can perceive that the tagged items are logically grouped together. This wouldn’t be the case if you simply wrapped the related items in a styled div users of a standard browser would understand the relationship, but those who couldn’t see the results of our CSS would
not.To group form fields, simply wrap the related fields with a tag and, immediately after your opening tag, add a tag that contains a title for the group:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>Untitled Page</title>
	<style type="text/css">
	h1 {
		font: 1.2em Arial, Helvetica, sans-serif;
	}
	
	input.txt {
		color: #00008B;
		background-color: #E3F2F7;
		border: 1px inset #00008B;
		width: 200px;
	}
	
	input.btn {
		color: #00008B;
		background-color: #ADD8E6;
		border: 1px outset #00008B;
	}
	
	form div {
		clear: left;
		margin: 0;
		padding: 0;
		padding-top: 5px;
	}
	
	form div label {
		float: left;
		width: 40%;
		font: bold 0.9em Arial, Helvetica, sans-serif;
	}
	
	fieldset {
		border: 1px dotted #61B5CF;
		margin-top: 1.4em;
		padding: 0.6em;
	}
	
	legend {
		font: bold 0.8em Arial, Helvetica, sans-serif;
		color: #00008B;
		background-color: #FFFFFF;
	}
	</style>
</head>

<body>
	<form method="post" action="#">
		<fieldset>
			<legend>Personal Information</legend>
			<div>
				<label for="fullname"> Name:</label>
				<input type="text" name="fullname" id="fullname" class="txt" /> </div>
			<div>
				<label for="email"> Email Address:</label>
				<input type="text" name="email" id="email" class="txt" /> </div>
			<div>
				<label for="password1"> Password:</label>
				<input type="password" name="password1" id="password1" class="txt" /> </div>
			<div>
				<label for="password2"> Confirm Password:</label>
				<input type="password" name="password2" id="password2" class="txt" /> </div>
		</fieldset>
		<fieldset>
			<legend>Address Details</legend>
			<div>
				<label for="address1"> Address line one:</label>
				<input type="text" name="address1" id="address1" class="txt" /> </div>
			<div>
				<label for="address2"> Address line two:</label>
				<input type="text" name="address2" id="address2" class="txt" /> </div>
			<div>
				<label for="city"> Town / City:</label>
				<input type="text" name="city" id="city" class="txt" /> </div>
			<div>
				<label for="zip"> Zip / Post code:</label>
				<input type="text" name="zip" id="zip" class="txt" /> </div>
		</fieldset>
		<div>
			<input type="submit" name="btnSubmit" id="btnSubmit" value="Sign Up!" class="btn" /> </div>
	</form>
</body>

</html>

Post a Comment

Please do not post any spam link in the comment box😊

Previous Post Next Post

Blog ads

CodeGuru