Better alternative for readonly information in input box

Question

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.

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?

Answer 1

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:

See the jsFiddle demo in action

Answer 2

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.