入力ボックスの読み取り専用情報のより良い代替手段
一番上の行（File＃、Patient＆Med.Aid）が読み取り専用になっているこのフォームがあります。この行の入力ボックスは読み取り専用であり、フィールドにカーソルを合わせるとカーソルが「禁止」アイコンに変わります。この情報を整理するために、2行目と一致する方法で、より適切な方法を見つけることができません。
以下について知りたいのですが。
- 入力ボックスに読み取り専用の情報を表示するのは十分直感的でユーザーフレンドリーですか？
- 読み取り専用の入力ボックスを使用せず、読みやすさを失わずに最初の行の情報を表示するより良い方法はありますか？
はい、必要に応じて代わりにラベルを使用できますが、CSSを追加してラベルをスタイルし、他の行を模倣したり、他の方法でスタイルを設定したりする必要があります。読み取り専用のままにしておくには、CSSを使用して、入力に焦点を当てるべきではないことを示す必要があります。
最も簡単なすべきことは、最も簡単なすべきことでもあります：
disabledpropertyを使用します。
これはまさにそのために設計されたものです。無効な要素はフォーカスを許可しませんが、読み取り専用の要素は許可するため、CSSは必要ありません。無効化された要素は、フォームの送信時に送信されませんが、読み取り専用要素は送信されるため、オーバーヘッドが少なくなります。
Disabledプロパティを使用すると、入力スタイルを維持できますが、同時に、要素が無効になっているため、フィールドが既に提供されている入力であり、編集できないことをユーザーに示します。
これを示すjsFiddleを作成しました。これがスクリーンショットです：
