fieldset


To group some of the elements together, you can use the fieldset element. It has local attributes: name, form, disabled .


	      	<!DOCTYPE HTML>
			<html>
			<body>
				<form method="post" action="#">
					<fieldset>
						<p>
							<label for="name">Name: <input id="name" name="name" /></label>
						</p>
						<p>
							<label for="name">City: <input id="city" name="city" /></label>
						</p>
					</fieldset>
					<fieldset>
						<p>
							<label for="fave1">#1: <input id="fave1" name="fave1" /></label>
						</p>
						<p>
							<label for="fave2">#2: <input id="fave2" name="fave2" /></label>
						</p>
						<p>
							<label for="fave3">#3: <input id="fave3" name="fave3" /></label>
						</p>
					</fieldset>
					  <button>Submit Vote</button>
				</form>
			</body>
			</html>
	      


legend - Descriptive Label to a fieldset Element


You can add a legend element to each of your fieldset elements to provide more information.


	      	<!DOCTYPE HTML>
			<html>
			<body>
				<form method="post" action="#">
					<fieldset>
					<legend>Enter Your Details</legend>
					<p>
					<label for="name">Name: <input id="name" name="name" /></label>
					</p>
					<p>
					<label for="name">City: <input id="city" name="city" /></label>
					</p>
					</fieldset>
					<fieldset>
					<legend>Vote For Your Three Favorite Fruits</legend>
					<p>
					<label for="fave1">#1: <input id="fave1" name="fave1" /></label>
					</p>
					<p>
					<label for="fave2">#2: <input id="fave2" name="fave2" /></label>
					</p>
					<p>
					<label for="fave3">#3: <input id="fave3" name="fave3" /></label>
					</p>
					</fieldset>
					<fieldset>
					<legend accesskey="y">
					About <u>Y</u>ou (ALT + Y)
					</legend>
					<p><label for="userName">User name:</label>
					<input type="text" name="txtUserName" size="20" id="userName" />
					</p>
					</fieldset>
					<fieldset>
					<legend accesskey="u">
					About <u>U</u>s (ALT + U)
					</legend>
					<p>
					<label for="referrer">How did you hear about us?</label>:<br>
					<select name="selReferrer" id="referrer">
					<option selected="selected" value="">Select answer</option>
					<option value="website">Another website</option>
					<option value="printAd">Magazine ad</option>
					<option value="friend">From a friend</option>
					<option value="other">Other</option>
					</select>
					</p>
					</fieldset>
					<button>Submit Vote</button>
				</form>
			</body>
			</html>
	      


fieldset disable


You can disable multiple input elements in a single step by applying the disabled attribute to the fieldset element.


	      	<!DOCTYPE HTML>
			<html>
			<body>
			<form method="post" action="#">
			<fieldset>
			<legend>Enter Your Details</legend>
			<p>
			<label for="name">Name: <input id="name" name="name" /></label>
			</p>
			<p>
			<label for="name">City: <input id="city" name="city" /></label>
			</p>
			</fieldset>
			<fieldset disabled>
			<legend>Vote For Your Three Favorite Fruits</legend>
			<p>
			<label for="fave1">#1: <input id="fave1" name="fave1" /></label>
			</p>
			<p>
			<label for="fave2">#2: <input id="fave2" name="fave2" /></label>
			</p>
			<p>
			<label for="fave3">#3: <input id="fave3" name="fave3" /></label>
			</p>
			</fieldset>
			<button>Submit Vote</button>
			</form>
			</body>
			</html>