SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)

    infield form labels

    Let me start off by saying you really shouldn’t put form labels—or even placeholder text—inside of form fields
    I consider place holder text as an example of what the field should contain, not really a label. But if you must use placeholder text as a 'faux label' this article does present a great way to handle it. PLUS IT REMINDS YOU TO ALWAYS HAVE A LABEL in your markup , even if you are using place holder text.

    I am partial to 'Labels slide outside of the fields' and 'tool tip' approach, especially because effects liek these could be achieved with CSS and/or minor markup rearrangements.

    Code:
    <!DOCTYPE HTML>
    <html>
    	<head>
    		<title></title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<meta name="viewport" content="width=device-width">
    		<style type="text/css">
    				input:focus + label {visibility: visible}
    				input + label {visibility:hidden }
    		</style>
    	</head>
    	<body>
    <form>
    	<div>
    		<input placeholder="label" name='x' id='x'> <label for'x'>Label</label><br>
    		<input placeholder="label" name='x' id='x'> <label for'x'>Label</label><br>
    	</div>
    </form>
    	</body>
    </html>
    Just a proof of concept; I am sure it could be done better.

  2. #2
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Cool, but the jQuery example makes the labels vanish from assistive technology, thus making them not accessible. I didnt look at it with Dragon, so it may not work with that.

    Also if the inputs are not big, users can click the label to give focus to the input, thus disabiliting this functionality.
    Ryan B | My Blog | Twitter


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •