Students Empire
Learn Something New
Home
About Us Contact Donate

Learn HTML



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>