How should an input field appear when it is disabled? One idea is to show 'Disabled' as value within the input field. Is there a better idea to indicate an input text field is disabled?
The input box needs to be disabled until a check box is checked(checkbox for terms of service)
I'm actually a fan of how bootstrap does their disabled input field.
http://getbootstrap.com/css/#forms
They even have it set where the mouse arrow changes on hover for added clarification.
However, using it is another matter. Sometimes, not showing something until it's available may be a better solution. Perhaps you should explain better in detail on what you're trying to accomplish.
The most important clue to provide is a dimmed label for the input field (in addition to, obviously, dimming any default text in the field).
This only works for labels placed (properly) outside the field. A dimmed label or prompt in the field could simply mean “this is not really input.”
You can also try graying the background of the field, changing it to a white background when it becomes editable.
This works best for classic GUI dialog boxes where the window background is the same shade of gray (as in the example above). You want a disabled field to be noticeable but not attract attention relative to enabled controls, like your checkbox. However, a gray field on a white background (as often used in web apps) has strong contrast which tends to attract attention.
You can try “disabled” as a value, but that’s jargon –your users may not know what it means (“No, my email works fine”). You could try a more directive prompt, like “Accept terms of service first.” That's good self-documentation, but adds clutter that, ironically, attracts attention away from where the user should look first (the terms of service and checkbox). If the dimming of the label works for most users, maybe you could present such a prompt only for users that try to put focus on the field.
Showing an input field that is disabled for input means that it is now serving another purpose, usually an informational or learning purpose, at which point it should be optimized for that purpose. If it isn't then remove it as it adds unnecessarily to cognitive load and interface complexity.
