Changing a form into a static display format

Currently, I am working on designing a profile page layout.

During the editing process of their profiles, I aim to showcase a form similar to the one provided in the Bootstrap library: https://getbootstrap.com/docs/4.4/components/forms/#form-row. Once users finish editing, my goal is to transform the form into a read-only format by replacing input fields with entered text.

In my search for solutions, I came across a relevant example on bootsnipp: (under the "Education & Career" tab). Analyzing the code, I observed that this structure was built using the form-group class and substituting the input field with a paragraph field.

Could there be a more efficient and cleaner approach to achieving this result? I doubt this is the most effective way to implement such a design.

htmlcssbootstrap-4

Answer №1

If I were to tackle this, here's how I would approach it:

Firstly, I would incorporate a fieldset with the disabled attribute to disable all form elements.

Next, I would style the default form-control elements to appear as text fields using CSS.

Check out the example below for a better understanding:

fieldset[disabled] .form-control {
  color:red;
  border: none;
  background-color:inherit;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="p-3">
  <form>
    <fieldset disabled>
      <input class="form-control" type='text' value='John' />
      <input class="form-control" type='text' value='John' />
      <input class="form-control" type='text' value='John' />
      <input class="form-control" type='text' value='John' />
    </fieldset>
  </form>
</div>

Answer №2

To style elements in your form as plain text, utilize the .form-control-plaintext class to eliminate default form field styling while maintaining proper margin and padding.

For instance:

<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f89d95999194b89d80999588949dd69b9795">[email protected]</a>">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword">
    </div>
  </div>
</form>

Resource: https://getbootstrap.com/docs/4.4/components/forms/#readonly-plain-text

Answer №3

Instead of replacing the fields, you can simply adjust their style to appear as plain text. This involves hiding the border and outline, setting them to read-only mode, and matching the background with the surrounding area.

For instance:

    <input value="Regular input" />
    <br>
    <input class="text-style" value="I resemble a text field" readonly />

    .text-style {
      border: none;
      outline: none;
    }

https://jsfiddle.net/z879pbcn/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular fails to function properly post rendering the body using ajax

I recently created a HTML page using AJAX, and here is the code snippet: <div class="contents" id="subContents" ng-app=""> @RenderBody() @RenderSection("scripts", required: false) </div> <script src="http://ajax.googleapis.com/ajax/ ...

javascripthtmlangularjs

Applying a border using CSS based on a condition, and removing it upon clicking

I have a requirement where I need to add a border around objects when clicked, and remove the border when clicked again. Despite using an if condition with .css, I couldn't make it work as expected. When I tried to print the border width using alert f ...

jquerycssif-statement

**Issue Resolved:** Looking to have the form results appear only when a valid input is submitted; otherwise, the

As a newcomer to PHP, SQL, and HTML, I've been learning for around 3 months now. Can someone assist me in achieving the following: I would like my form to display the results table only if a valid search has been submitted, showing only the database r ...

phphtml

Fieldset containing a table with a horizontal scrollbar

One issue I encountered in my application was dealing with a fieldset that contained table data with potentially many columns. To prevent the browser window from acquiring a horizontal scroll bar due to the wide table, I attempted to wrap the table in a c ...

htmlcssfirefox

Arrange a row of six images side by side using responsive Bootstrap styling

Struggling to align 6 images in one row using bootstrap, but only getting 4 images with a large space between them. CSS isn't my strong suit. Here's the HTML Code: <html> <head> <link href="https://maxcdn.bootstrapcdn.com/bootstr ...

htmlcssbootstrap-4

Developing a progress bar with jQuery and Cascading Style Sheets (

Below is the code I'm currently using: <progress id="amount" value="0" max="100"></progress> Here is the JavaScript snippet I have implemented: <script> for (var i = 0; i < 240; i++) { setTimeout(function () { // this repre ...

javascriptjqueryhtmlcss

Launching a Dialog in Angular upon selection of an option

Within my application, I have a mat-form-field that includes a mat-option. My goal is for a dialog to open whenever I select an element from the mat-option. However, at the moment, nothing happens when I make a selection. What steps should I take to resolv ...

javascripthtmlangulartypescript

Location of chat icon in Dialogflow messenger

After successfully embedding the Dialogflow messenger in my website, I noticed that in mobile view, the chat icon is blocking the bottom navigation bar. You can refer to the screenshot here. Is there a way to reposition the chat icon higher on the page? I ...

javascripthtmlcssdialogflow-es

html table displaying incorrect data while using dynamic data in vue 3

example status 1 Hello there! I'm trying to create a table (check out example status 1 for guidance). Here's the code snippet I am using: <table> <tr> <th>Product</th> <th>Price</th> <th>Av ...

htmlvue.jshtml-tablevuejs3

Guide on placing images in a grid using CSS

Exploring a new way to arrange images in grid style with a box underneath. Seeking advice on achieving this specific layout shown in an image. Current progress in positioning can be seen in this screenshot. Desired adjustments include aligning the far ri ...

htmlcss

Fixing a Bootstrap 4 carousel glitch for displaying multiple items on extra-large screens

(Certainly not a copycat). I have successfully implemented a Bootstrap 4 carousel that showcases multiple items. It must adhere to the following specific requirements based on different screen sizes: 0 - md screens (right before transitioning to md): ca ...

jquerybootstrap-4media-queriescarouselbootstrap-carousel

Creating a unique Bootstrap background design

I have recently started using bootstrap and I am facing an issue. I want to change the background of a container when hovering over it, but I am having trouble getting it right. HTML <div class="container bg-black h-25 w-25 box"></div&g ...

cssbootstrap-5

Unique style CSS (Flex)Grid with spacing and uniform aspect ratio

Hello everyone, typically I'm quite skilled when it comes to CSS but this particular challenge has pushed me to my limits. I have a desire to create a grid where all elements maintain the same aspect ratio (with images that already share this aspect ...

cssflexboxcss-gridaspect-ratio

Exploring the hover effects on Kendo charts and series

I have encountered an issue with my kendo chart. The series hover works fine when the mouse hovers over the serie, but I am facing a problem where the value in the line does not appear as expected. I am unsure of why this is happening. $("#chart1").data(" ...

javascriptcsshtmlkendo-uikendo-chart

Optimize the layout with Grid CSS to allow the last two items to dynamically occupy

I've been working on a layout that looks like this: X X X X X X X X A B Currently, I have used grid-template-columns: repeat(4, 1fr); to define the columns. However, what I actually want is for the last two items to take up the full width of the rem ...

csscss-grid

My divs are multiplying twice as fast with every iteration of the Javascript For Loop

Recently, I developed a script that generates a series of fields based on a number provided by the user (k). Initially, I had a script that would create the correct number of fields. However, I decided to arrange them like vectors on the screen, so I made ...

javascripthtmlcss

The website's scrolling speed is painfully slow

Currently, I am working on enhancing the performance of this site at . If you scroll through the site or navigate using the Up and Down Arrow Keys, you may notice a sluggish and slow Scroll Behaviour. I am utilizing HTML5 and simple img tags with 85% wid ...

performancehtmlcss

What is the best way to eliminate the extra space above a span when the parent element's font size is very large?

Dealing with a situation where the parent DOM-element has a large em-value which results in all inline child elements having a significant margin above them despite their smaller font-size: Here is the source (http://jsfiddle.net/rapik/w87m7/2/): <div ...

htmlcssfont-size

Retrieve the selected option from the dropdown menu in the specified form

What should I do if I have numerous products and want users to be able to add new dropdown boxes dynamically? When the submit button is clicked, only the value of "category[]" within the form should be retrieved. https://i.stack.imgur.com/v1fnd.png Below ...

javascriptphpjqueryhtmllaravel

A dynamic jQuery plugin that replicates the smooth page sliding animation found in iPhone apps

Currently, I am in search of a jQuery plugin that has the capability to navigate users to different pages on a website with a sleek sliding animation, similar to what we see in some widely used iPhone apps. Despite my best efforts to create this functional ...

iphonehtmlcssanimationjquery-plugins