Customized placement of form fields on an HTML grid determined by the user

My goal is to organize input elements on a grid based on user preferences. After researching, I stumbled upon CSS grids, which seem promising.

I am considering creating a CSS grid with r rows and c columns, then using JavaScript to assign input elements to specific cells based on a user-defined layout (using an object with input element IDs as keys and column-span pairs as values).

I'm unsure if this is the most effective solution or if there are better alternatives that don't rely on CSS grids. It seems like modifying CSS properties for each input element could be cumbersome. So my questions are: Is this approach suitable? Are there simpler or more efficient methods?

I work with plain JavaScript and Vue.js, in case that influences any suggestions (apologies for any vague wording, I am self-taught as a hobbyist developer).

javascripthtmlcssformsvue.js

Answer №1

Utilizing grid-template-areas allows you to assign elements to specific positions within the grid, regardless of their order in the DOM.

form {
  display: grid;
  gap: 0.5rem;
  grid-template-areas: "w x" "y z";
}

#a { grid-area: z; }
#b { grid-area: w; }
#c { grid-area: y; }
#d { grid-area: x; }
<form>
  <input id="a" type="text" placeholder="A">
  <input id="b" type="text" placeholder="B">
  <input id="c" type="text" placeholder="C">
  <input id="d" type="text" placeholder="D">
</form>

Answer №2

Adding attributes to HTML elements allows for customization.

If the form field order is determined by user preferences, a JSON object can provide the necessary information for setting attributes on HTML tags.

<span data-column="0" data-row="0" />
<input type='text' data-column="1" data-row="0" />
or 
<input type='text' data-order="1:0" />
<input type='text' data-order="0:0" />

When dynamically generating the form using a loop, utilize getAttribute/setAttribute with 

document.getElementById().setAttribute('attrName','attrValue')

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

Creating a character jump animation on an HTML5 canvas

While following a tutorial on creating character animations, I encountered an issue. The tutorial, located at , made it easy to make the character move left (the right movement was already implemented). However, I am struggling with how to animate the char ...

javascripthtmlanimationcanvas

Transferring information from a form with multiple fieldsets to php

I am facing an issue with my form that is built using multiple fieldsets. The problem is related to passing values from each fieldset to welcome.php upon submitting the form. However, when I click submit, nothing happens and the values are not displayed. A ...

phpjqueryhtmlforms

Angular 2: Obtaining the caret position in a contenteditable 'div'

Take a look at this code snippet: <div #test (click)="onClick(test)" contenteditable="true"> This text can be edited by the user. </div> @ViewChild('test') el:ElementRef; constructor(private elementRef: ElementRef) {} ...

htmlangulartypescript

Is there a Problem with Paging in Meteor with Jquery?

I implemented Pagination using Jquery, but I encountered an issue along with the following error message: Uncaught TypeError: Object [object Object] has no method 'customPaginate' I am unsure how to resolve this problem. Could you please take ...

javascriptjquerypaginationmeteor

Tips for executing a function in the HC-Sticky plugin?

Currently, I am utilizing the HC-Sticky JavaScript plugin and endeavoring to utilize the documented reinit method. However, I am facing difficulty in understanding how to execute it. In this CodePen demo, a basic setup is displayed along with an attempt t ...

javascriptjqueryhtmlcsshcsticky

The content contained within the .each loop within the click event is only executed a single time

While working on coding a menu opening animation, I encountered an issue today. Upon clicking the menu button, the menu opens and the elements inside receive an added class (resulting in a fade-in effect). Clicking the menu button again should close the ...

javascriptjquerycss

Using a key as an argument in the `map` function invocation

I keep getting a warning message stating that each child in the array does not have a unique key. const ITEMS = [ { "name": "apple", displayName: "Apple" "name": "orange", displayName: "Orange" }, { "name": "banana", di ...

javascriptreactjs

Insert Angular HTML tag into TypeScript

I am currently working on creating my own text editor, but I'm facing an issue. When I apply the bold style, all of the text becomes bold. How can I make it so that only the text I select becomes bold without affecting the rest of the text? Additional ...

javascripthtmlcssangulartypescript

The PHP script is not being activated by AJAX

I am completely baffled by the situation at hand. Sometimes, I open a different browser to test my changes and it works as expected. But then, when I try again, it fails. It's driving me crazy. On syllableapp.com, I set up a MySQL database that I can ...

phpjavascriptjqueryajax

Real-time data updates using AJAX in Ruby on Rails

Currently, I am working with Rails and jquery to implement dynamic content using ajax. However, one issue I am facing is extracting the current user ID from the URL For instance, if the URL is www.mywebsite.com/users/20 In my javascript file, I require ...

javascriptjqueryruby-on-railsajaxjson

How to conceal table cells on Safari 5?

My code works on Firefox and IE, but not on Safari. Here's an example: <table> <thead> <tr> <th style="display: none;">hi</th> </tr> </thead> <tr class="someClass"> <td style= ...

htmlcsssafari

Unable to modify the color of UML state elements within JointJS

I need some help with jointjs as I am in the process of adjusting the color of a UML state diagram graph using this command: graph.getElements()[4].attributes.attrs[".uml-state-body"]["fill"] = "#ff0000"; However, despite trying this, the color of the st ...

javascripthtmlcssjointjs

Using React as a dependency for @vue/apollo-composable allows for seamless integration of Apollo

My VueJs application is built using the Composition API. I am trying to implement Apollo for making queries to my GraphQL backend, but I keep encountering an error stating Could not resolve "react". The dependencies in my project include: "@apollo/client" ...

vue.jsgraphqlviteapolloapollo-client

What is the best way to achieve a seamless CSS transition for my sticky navigation bar?

Looking to create a sticky bar with a smooth CSS transition instead of the current rough effect. Any tips or hints would be greatly appreciated! For reference, I found the exact animation I'm aiming for on this website: https://css-tricks.com/ Here i ...

jquerycss

Body Parser causing unexpected output

Currently encountering an issue when attempting to log the body of a POST request in my console. Despite seeing the payload in my Chrome console with the correct data, I am receiving the following error: express_1 | TypeError: Cannot read property ' ...

javascriptexpresspostbody-parser

Trouble with flex wrap in my design template using Material UI

How can I create a responsive template using flexbox wrapping method? <Box sx={{ padding: 0, margin: 0, listStyle: "none", display: "flex", flexFlow: ...

cssflexboxmaterial-ui

Modifying the default actions of Material UI components: A step-by-step guide

In my project, I am using materialUI to showcase an Expansion Panel. Here is the code snippet: import React from 'react' import ExpansionPanel from '@material-ui/core/ExpansionPanel'; import ExpansionPanelSummary from '@material-u ...

cssreactjsmaterial-ui

Unable to use saved images with jQuery Slider

I'm currently facing an issue with adding a jQuery slider to my website. It seems that the slider is not displaying images that are saved on my computer, only images from external websites. Below is the code snippet where I have included an image fil ...

jqueryhtmlcss

How to utilize the reduce method with an array of objects in JavaScript

Every week, a number of objects are delivered to me. Each object contains information such as date, hours, and other fields. I need to arrange these objects in an array based on the total hours for each day. Here is an example of the objects: var anArray ...

javascriptjqueryhtmlsalesforcereduce

Tips for sending an Object within a multipart/form-data request in Angular without the need for converting it to a string

To successfully pass the object in a "multipart/form-data" request for downstream application (Java Spring) to receive it as a List of custom class objects, I am working on handling metadata objects that contain only key and value pairs. Within the Angula ...

javascriptangulartypescriptspring-bootmultipartform-data