View source for Fieldset, Label, and Legend Elements

<html>
<head>
<style>
 input {
   float:right;
 }
 label {
  float:left;
 }
 div {
   clear:both;
 }
</style>
</head>
<div>
  <label>Label text on it's own</label>
</div>
<div>
<form>
  <fieldset style="width:40%;" id="f1">
    <legend >Shipping Address:</legend>
    <div>
      <label for="t1">Name:</label> <input id="t1" type="text" >
    </div>
    <div>
      <label for="t3">Address:</label> <input id="t3" type="text">
    </div>
    <div>
      <label for="t2">Email:</label><input id="t2" type="text">
    </div>
</fieldset>


<br><br>
<h3> Fieldset and Legend tag with H2 inside legend</h3>
<fieldset id="feedbackIntro">
<legend><H2> Was this content helpful? </H2></legend>
<button id="feedbackYes" class="feedbackHelpful" title="Yes" data-value="yes">Yes</button>
<button id="feedbackNo" class="feedbackHelpful" title="No" data-value="no");">No</button>
</fieldset>

<br><br>
<h3> Fieldset with H2 and no legend</h3>
<fieldset id="feedbackIntro">
<H2> Was this content helpful? </H2>
<button id="feedbackYes" class="feedbackHelpful" title="Yes" data-value="yes">Yes</button>
<button id="feedbackNo" class="feedbackHelpful" title="No" data-value="no");">No</button>
</fieldset>

<br><br>
<h3> Fieldset and Legend tag with H2 outside the legend</h3>
<fieldset id="feedbackIntro">
<H2><legend> Was this content helpful? </legend></H2>
<button id="feedbackYes" class="feedbackHelpful" title="Yes" data-value="yes">Yes</button>
<button id="feedbackNo" class="feedbackHelpful" title="No" data-value="no");">No</button>
</fieldset>

<br><br>
<h3> Regular Fieldset and Legend tag</h3>
<fieldset id="feedbackIntro">
<legend> Was this content helpful?</legend>
<button id="feedbackYes" class="feedbackHelpful" title="Yes" data-value="yes">Yes</button>
<button id="feedbackNo" class="feedbackHelpful" title="No" data-value="no");">No</button>
</fieldset>


<br><br>
<h3> Using ARIA Describedby instead of legend</h3>

<H4 id="hid">Was this content helpful?</H4>
<button id="feedbackYes" class="feedbackHelpful" title="Yes" data-value="yes" aria-describedby=hid>Yes</button>
<button id="feedbackNo" class="feedbackHelpful" title="No" data-value="no");" aria-describedby=hid>No</button>

<br><br>
<h3> Using ARIA Describedby instead of legend and input type submit instead of button</h3>

<H4 id="hid2">Was this content helpful?</H4>
<input type="submit" value="Yes" aria-describedby="hid2">
<input type="submit" value="No" aria-describedby="hid2">

<br><br>
<h3> Using ARIA Labelledby instead of legend</h3>

<H4 id="hid">Was this content helpful?</H4>
<button id="feedbackYes" class="feedbackHelpful" title="Yes" data-value="yes" aria-labelledby=hid>Yes</button>
<button id="feedbackNo" class="feedbackHelpful" title="No" data-value="no");" aria-labelledby=hid>No</button>

<br><br>
<div>
<h3> Using ARIA Label instead of legend</h3>

<H4 id="hid">Was this content helpful?</H4>
<button id="feedbackYes" class="feedbackHelpful" title="Yes" data-value="yes" aria-label="Was this content helpful?">Yes</button>
<button id="feedbackNo" class="feedbackHelpful" title="No" data-value="no");" aria-label="Was this content helpful?">No</button>
</div>

<div>
<fieldset>
			<legend>What type of search would you like to perform?</legend>
			<input name="n2" required id="i1" type="radio" name="searchType" />
			<label for="i1"> Search intranet </label><br>
			<input name="n2" required id="i1a" type="radio" name="searchType" />
			<label for="i1a"> Search Internet </label><br>
			<input name="n2" required id="i1b" type="radio" name="searchType" />
			<label for="i1b"> Search both </label><br>
</fieldset>
</div>
</form>
</div>
</html>


<html>




[[Category:Elements]]