3

I have this form where the topmost row (File #, Patient & Med.Aid) is readonly. Input boxes in this row are readonly and the cursor turns to "banned" icon on hovering those fields. I can't find a better way to organize this information without clutter and in a way that matches with the second row.

enter image description here

I would like to know the following.

  1. Is it intuitive enough and user friendly to present readonly information in input boxes?
  2. Is there a better way to show the information in the first row without using readonly input boxes and without losing readability?
Improve this question
5
  • 7
    If information is read only, why use an input box at all? Wouldn't it make more sense to use a simple text (label) for read only information?
    – André
    Jan 28 '14 at 13:08
  • I was wondering if it's gonna mess up the alignment with the second row. maybe I must use label or div with border and padding same the input boxes?
    – su8898
    Jan 28 '14 at 13:11
  • I'm with André - if the user is never to edit these field don't make them read only. Remember the form-follows-function principle. Labels will also have less constraints, so for instance, you can make the text slightly bigger. Your problem is that of visual design, not of readonly.
    – Izhaki
    Jan 28 '14 at 13:59
  • @icoder8898 It won't mess with the alignment if you give it the same padding and margins as the input boxes. But I agree with André, that would be best.
    – Mike
    Jan 28 '14 at 17:25
  • @André lzhaki Mike thanks guys for the feedback. I have decided to replace the input boxes with labels but with the same width as the input fields in the second row. Will also remove the white background to make it look more "readonly".
    – su8898
    Jan 29 '14 at 7:18
4

Yes, you could use labels instead if you wanted to, but that involves adding CSS to style the labels to mimic the other rows or to style them any other way. Leaving them readonly requires you to use CSS to show that you shouldn't focus the inputs.

The simplest thing to do is also the easiest thing to do:

Use the disabled property.

This is exactly what it was designed for. Disabled elements do not allow focus, whereas readonly elements do, so no CSS needed. Disabled elements do not get sent when the form is submitted, whereas readonly elements do, so less overhead there.

Using the disabled property allows you to maintain your input styling, while at the same time, since the elements are disabled, it shows users that the fields are inputs that have already been supplied and that they are not editable.

I've created a jsFiddle that demonstrates this. Here's a screen shot:

jsfiddle demo screen shot

See the jsFiddle demo in action

Improve this answer
6
  • The problem with this is that default styles for disabled tend to have grey text which is harder to read. There are also semantic issues -- disabled implies "not applicable"/"not available" which is different from read-only.
    – AmeliaBR
    Jan 28 '14 at 18:57
  • @AmeliaBR - I simply disagree. I think this is being overthought. This is the easiest and simplest solution to the question asked. If you really care about the grey text, you can easily augment it with CSS. That said, I don't think it's hard to read at all.
    – Code Maverick
    Jan 28 '14 at 19:20
  • @CodeMaverick thanks for the feedback. It doesn't necessarily have to be input boxes. I was even thinking if there is a better way to show these readonly information in the top row. I couldn't find a better way to arrange this information other than in the same layout as in the second row. I found that if we have 2 different layout and alignment for the 2 rows, it affects the readability. What do you think?
    – su8898
    Jan 29 '14 at 7:21
  • @CodeMaverick Just an FYI your example link is dead.
    – Dan
    Dec 17 '14 at 23:58
  • @Dan Updated link. I had changed usernames awhile back.
    – Code Maverick
    Dec 18 '14 at 2:46
-1

If you have to use an input field for this...

<input type="text" name="input-name" id="input-id" onfocus="blur()">

This will prevent visitors from clicking and typing in the input field. Then just apply a style to differentiate from other input fields such as:-

background: #C7C7C7;

I think this is probably the best way to users so it is clear that the input fields are not usable.

If you don't have to use an input field for this...

Just use <div> instead and style them similar to your input fields so they look like part of the table still.

Improve this answer
6
  • This would be a Stackoverflow answer, this is a UX site where we answer the question from the POV of the user (by citing surveys and sources), not post the code to do the question asked.
    – Mike
    Jan 28 '14 at 17:16
  • Just to add, your answer would be fine if you posted WHY they should do it this way. What benefit does it give the user compared to how it is now?
    – Mike
    Jan 28 '14 at 17:19
  • Hi Mike, I actually did post more than that (or attempted to) but have realised it isn't there any longer. Oops. I'll extend my answer again, thanks.
    – zigojacko
    Jan 28 '14 at 17:20
  • If you expand on your answer and say why it is better than André's solution (his comment on the question), then I will remove my downvote.
    – Mike
    Jan 28 '14 at 17:26
  • @GeoffJackson thanks a lot for the feedback. It doesn't have to be input boxes. It doesn't even have to follow the same layout and alignment as in the second row. Just that I was struggling to find a better way to display this information in a user friendly way that conforms to the general layout.
    – su8898
    Jan 29 '14 at 7:31

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.