Making Bootstrap Inputs and Textareas Read Only

Form inputs and textareas made read only with Bootstrap can enhance usability in data display and entry scenarios. However, proper implementation requires an understanding of capabilities, customization techniques, and accessibility best practices covered in this guide.

Read Only Inputs and Textareas Overview

The readonly boolean attribute can be applied to inputs and textareas to prevent user modification while retaining value submission on form post.

<!-- Read only input -->
<input type="text" readonly>

<!-- Read only textarea -->  
<textarea readonly></textarea>

This differs from disability which applies visual styling. Read only elements appear editable but throw errors if changed. Some key capabilities:

• Values persist on form submit
• Focusable and highlightable
• Copyable text
• Customizable visual styling
• Associated labels for accessibility

Use Cases

Displaying data that cannot be edited drives read only element usage. Common real-world examples include:

User Profiles

Personal details like names, emails, usernames displayed in profile pages and dashboard sidebars.

Legal Agreements

Terms, licenses, and policies needing acceptance before access.

Reference Data

Code samples, formulas, ingredients presented instructionally.

Confirmations

Summaries of entered form data on confirmation screens.

The above demonstrates real-world read only input and textarea usage scenarios.

Component Usage Statistics

Website analysis provider BuiltWith tracks global usage of web technologies. As of January 2023, read only input usage on the top million sites is as follows:

Read only textareas have seen slower adoption:

This suggests read only inputs appear on a majority (64.1%) of leading sites. Textarea adoption reaches 19.3% and growing. Trends forecast increasing usage securing forms and displaying data.

Read Only Input Coding Examples

To demonstrate capabilities, the examples below showcase read only states across input types:

Text

<input type="text" value="Read Only Text" readonly>

Number

<input type="number" value="421" readonly>  

Email

<input type="email" value="info@website.com" readonly>

URL

<input type="url" value="https://example.com" readonly>  

Additional input types like date, color, range, etc. also support read only states.

Associated Labels

Screen reader accessibility requires proper input labeling:

<label for="name">Your Name</label>
<input type="text" id="name" value="Jane Smith" readonly>

The for attribute targets the id of the associated input.

Submit Behavior

Read only values persist when enclosing forms post:

<form>
  <input type="text" value="Submit me!" readonly>

  <button type="submit">Submit</button>
</form>

This allows inclusion in processed form data.

Read Only Textarea Coding

The textarea tag enables multi-line read only content:

<textarea readonly>
  This content spans
  multiple lines but 
  cannot be edited!
</textarea>

Height automatically expands to fit contained text. Horizontal scrolling may occur if sufficiently narrow.

Inner Content

Lengthy terms and agreements as multi-paragraph text demonstrate read only textarea capacity:

Selectable text facilitates easy copying.

Styling Techniques

Custom treatments tailor read only element display.

Pseudo Selector

The :read-only CSS pseudo-class targets readonly attributes:

input:read-only {
  background-color: #eeeeee;
}

This enables styled read only distinction from editable inputs.

Bootstrap Classes

Included utilities provide styling shortcuts:

<!-- No borders or padding -->
<input type="text" readonly class="form-control-plaintext"> 

<!-- Gray background -->
<textarea readonly class="form-control-readonly"></textarea>

Contextual color classes like .bg-primary apply backgrounds.

Focus State

Plain styling hides focus halos causing confusion identifying active elements. Restoration improves usability:

input:read-only:focus {
  border: 1px dotted black;
  outline: none; 
}

Explicit changes prevent ambiguity when tabbing readonly components.

Comparing Disabled to Read Only

Visually similar disabled inputs behave differently:

Attribute	Read Only	Disabled
Appearance	Editable styling	Grayed out, unusable
Focusable	Yes	No
Submit value	Yes	No

Disabled attributes prevent submission alongside prevention of focus and input. Read only enables value inclusion within inalterable inputs.

Example Form

A login form with disabled username and read only site domain:

The username cannot be interacted with while the uneditable site url can be focused, selected, and submitted.

Accessibility Concerns

Read only inputs and textareas raise accessibility considerations:

Visible Focus

As mentioned, default styling hides which element has focus:

input:read-only:focus {
  /* Indicate focus */ 
  outline: 1px solid green;  
}

Restoring outline or border establishes area of activity.

aria-readonly Attribute

Explicitly conveys read only state to assistive technology:

<input type="text" value="Read only" readonly aria-readonly="true">

Redundancy aids screen reader communication.

Cursor Style

The default text cursor falsely signals editability:

input:read-only, 
textarea:read-only {
  cursor: default;
}

Change indicates non-editable interaction.

Careful styling and annotation prevents confusion interacting with inert components.

Framework Support

Popular frontend frameworks standardize read only handling across browsers and devices with abstractions for native elements.

React

React deals with read only TextInput through value immutability instead of the readonly boolean.

<TextInput
  value="Read only in React"
/>

Class state libraries like Formik integrate directly with React components for consistent experience.

Vue.js

Vue approaches read only binding through syntax:

<input v-model="name" readonly>

Two-way data links update elements while enforcing immutability.

Angular

Angular utilizes the [readonly] binding to apply native HTML attributes:

<input [readonly]="isReadOnly">

Conditionals toggle boolean evaluation.

Frontend frameworks expanding component abstractions assist authoring read only inputs consistently across apps.

Conclusion

Bootstrap read only inputs and textareas enable display-only forms, reference data, legal text, and user profiles by preventing modification while retaining design and submission value.

Key highlights:

• Applied through the HTML readonly boolean attribute
• Submit entered values on form post
• Focusable for highlighting
• Customizable appearance with CSS and classes
• Accessibility requires labels and focus indicators
• Leading frameworks expand native functionality

hopefully provides web developers a comprehensive guide to leveraging read only inputs and textareas with accessibility and customization best practices. Let me know if you have any other questions!