Question

I’m making a registration page in HTML. I’m using placeholder for inputs, but I am aware that some major browsers (IE <9, Firefox <3.7, Chrome/Safari <4.0) don’t support this HTML5 feature.

My favourite way to fallback for placeholder is this code, which doesn’t require any Modernizr or other JavaScript:

<audio>Username: </audio>
<!-- Fallback; won't be displayed by HTML5 browsers -->
<input type="text" placeholder="Username">
<!-- The placeholder will just be ignored by non-HTML5 browsers-->

The problem is that this registration form is into a table, and fallbacking doesn’t work – it shows the fallback text, too:

<table>
<tr>
    <audio>
        <td>
            Username:
        </td>
    </audio>
    <td>
        <input type="text" name="Username" placeholder="Username">
    </td>
</tr>
</table>

So, how should I do the fallback? I am aware of Modernizr and other JS libraries, but I’d prefer to avoid them due to the low upload speed of my server and as a general guideline.
Also, I didn’t consider using <td><audio>Fallback</audio></td> due to issues with the graphical issues (adds horizontal white space, also styling the td may give problems).

Answer 1

You don’t need any fallback if you have an explicit label for any input field, which is recommended for accessibility and usability.

It would be rather strange to rely on the assumption that a browser supports the audio element if and only if it supports the placeholder attribute. For example, IE 9 supports audio but not placeholder.

A more reasonable approach (to removing the label when placeholder is supported, which is IMHO a non-problem) is to add a piece of JavaScript that checks whether placeholder is recognized as an attribute and remove the label if it is. The risk with this is that a browser may recognize the attribute without actually supporting it. The safest way seems to be to create an input element in JavaScript and check whether the object has the placeholder property:

<table>
<tr id="row">
        <td id="label">
            <label for="username">Username:</label>
        </td>
    <td>
        <input type="text" name="Username" placeholder="Username" id="username">
    </td>
</tr>
</table>
<script>
if(!('placeholder' in document.createElement('input'))) {
  document.getElementById('row').removeChild(document.getElementById('label'));
}
</script>