I considered a skeuomorph using yellow paper with lines but it seemed tacky and didn't fit the overall design of the page. The textarea fills an entire "panel" on the page just like other panels of read-only text, so it can't be set off like it normally would be in a traditional HTML form.

  • 1
    How about hint text like FB's "What's on your mind?", but rendered in some great handwriting-type font? – SNag Aug 27 '13 at 18:32
  • A placeholder like that would work nicely, in fact I'm already using one when the text area is empty. But often times the area will be pre-populated with text, so a placeholder isn't practical when that happens. – hartz89 Aug 27 '13 at 18:55

You could put a distinct border on the field, or on the panel that contains the field (use both border width and colour) then place a key somewhere that shows both the editable and uneditable field stylings. Along with this you could tag it as editable, maybe in the label for the field.

Remember that styles associated with uneditable, such as greying things out, also imply that a feature might be editable under certain conditions, so you may have 'editable', 'uneditable' and 'never editable' as states.

Also, if you strictly follow a style guide for 'editable' across your entire app (active, inactive, focused etc.) you will give a user a consistent set of implicit guidelines for what is editable and what isn't. The login / register form for example can follow this style guide.

Both the above ideas will provide consistent visual clues.

A step further, especially in the case of having many editable and uneditable panels on the same page would be to number the fields that can be edited.

You should also consider tab order for the fields and auto-focusing on relevant fields

| improve this answer | |

In addition to what @ColinSharp mentioned above, you could at an icon to the corner of the field, maybe a pencil, to help indicate that the area is editable.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.