Difference between revisions of "Fieldset, Label, and Legend Elements"

From Level Access Web Labs
Jump to navigation Jump to search
Line 31: Line 31:
 
</fieldset>
 
</fieldset>
  
 
+
</head>
 +
</html>
 
<br><br>
 
<br><br>
 
<h3> Fieldset and Legend tag with H2 inside legend</h3>
 
<h3> Fieldset and Legend tag with H2 inside legend</h3>

Revision as of 17:31, 17 May 2016

Shipping Address:


Fieldset and Legend tag with H2 inside legend

<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>



Fieldset with H2 and no legend

<fieldset id="feedbackIntro">

Was this content helpful?

<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>



Fieldset and Legend tag with H2 outside the legend

<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>



Regular Fieldset and Legend tag

<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>




Using ARIA Describedby instead of legend

Was this content helpful?

<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>



Using ARIA Describedby instead of legend and input type submit instead of button

Was this content helpful?

<input type="submit" value="Yes" aria-describedby="hid2"> <input type="submit" value="No" aria-describedby="hid2">



Using ARIA Labelledby instead of legend

Was this content helpful?

<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>



Using ARIA Label instead of legend

Was this content helpful?

<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>

<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>
<input name="n2" required id="i1a" type="radio" name="searchType" /> <label for="i1a"> Search Internet </label>
<input name="n2" required id="i1b" type="radio" name="searchType" /> <label for="i1b"> Search both </label>
</fieldset>

</form>

</html>


radios

What type of search would you like to perform?