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

Vue unable to load material icons

The icons npm package "material-icons" version "^0.3.1" has been successfully installed. "material-icons": "^0.3.1" The icons have been imported as shown below. <style lang="sass"> $material-icons-font-path: '~material-icons/iconfont/'; ...

cssvue.jssassvuejs2google-material-icons

What is causing my animation to jump when using the Web Animation API reverse() function?

I've come across various sources stating that when you call reverse() while an animation is playing, it should have the same effect as setting playbackRate to -1. However, in my case, using reverse() makes my animation behave erratically and jump arou ...

javascriptcssweb-animations

The most effective method for transferring a JavaScript object between a TypeScript frontend and a Node.js backend

I need some advice on how to effectively share a JavaScript object between my Angular2 with Typescript frontend and NodeJS backend in an application I'm working on. Currently, I am using a .d.ts file for the frontend and adding a module.exports in the ...

javascriptnode.jstypescript

Difficulty aligning two images in one div using HTML and CSS

Having trouble with HTML and CSS. I have a div containing 2 images - one for background and the other for an avatar image that I can't seem to center. I've tried using margin:0 auto; and display:block; but it's not working. Current HTML pag ...

htmlcssimagealignment

Accessing multi-dimensional array properties in PHP with JavaScript integration

In my PHP code, I have an array structured like this: <?php $data = array(); $data[0] = array('year' => 2001, 'month' => array( 'January' => array('val1' => 1000, 'v ...

javascriptphpjsonassociative

Retrieve a distinct HTML onclick event using VBA

I need some assistance because I have a major issue that I can’t solve or find help for online. Here is the code I am dealing with: <span class="test taLnk hvrIE6" onclick="ta.trackEventOnPage('Hotel_Review' ,'URL_HOTEL|text|2| ...

htmlexcelvbaweb-scrapinghref

What is the designated destination for JWT Tokens?

For my user login/signup process, I'm utilizing JWT and have a query regarding how the token is transmitted. At present, I am saving the token as a property in a JSON object on the server side, then passing it to the front-end. Upon receiving the obj ...

javascriptnode.jsreactjsexpressjwt

Components drifting apart following viewport adjustments

Can someone help me with this issue in responsiveness? When I change the viewport, my header and main elements seem to be moving far apart from each other. View the code on JSFiddle <header> <div class="slider"> <img src="picture1" al ...

htmlcssresponsiveelement

I am experiencing an issue with the initial for-loop in my code as it is not

Upon clicking the start button, the score button, as well as the try again or correct button, are not being updated. Can someone help me figure out what's wrong? I believe the issue lies within this section of the code: for (i=0; i<5; i++) { do ...

javascripthtmlcss

JavaScript substring() function in clone is experiencing an error

I am currently working on a JavaScript function that determines whether a specific substring is present in a larger main string. For instance, if the main string is "111010" and the substring is "011," the expected result should be false since the substr ...

javascriptstringsubstring

Combining Blazor with Bootstrap for seamless form validation

After gaining some experience with Razor, I decided to explore Blazor. However, I encountered a familiar challenge - integrating validation with Bootstrap. The issue lies in the mismatch between Blazor's validation result classes and those of Bootstra ...

cssvalidationbootstrap-4blazor

Footer overlapping occurs on a single page

My webpage is having an issue where the footer is overlapping. It seems to be fine on all other pages except for this one. I would prefer not to make any changes to the footer since it's working correctly on other pages. Is there a way to adjust the C ...

phphtmlcss

Leveraging $scope variables to dynamically generate new scope values within an Angular controller

I am currently faced with the challenge of using latitude and longitude data provided by the server, which is stored in $scope.Address. I am attempting to create a map object with these values as shown below. However, my current implementation is not fun ...

javascriptangularjs

Guide on automatically registering Vue component files for Laravel Spark

When working with Laravel Spark, the app.js file does not include the code for automatically registering Vue components from a specified directory like it does in regular Laravel projects. This can be an issue when trying to copy over existing code. So, ...

laravelvue.jsvue-componentlaravel-spark

The col-md-4 class in Bootstrap does not consistently maintain a width of 33%

Currently, I am utilizing bootstrap cards in my project. The number of cards within a card-deck varies dynamically. However, I have encountered an issue where each card should occupy a width of col-md-4 (33%). Everything works fine when there are more than ...

htmlcssbootstrap-4

Submitting a PHP form by uploading an image with AJAX

I'm looking to submit form data to a MySQL database using AJAX. While I'm not very familiar with AJAX, I managed to write a code that successfully submits text data to the database. However, I'm facing issues with uploading and storing image ...

phphtmlmysqlajax

Trouble with padding in Twitter bootstrap

I am puzzled as to why the navigation links at the bottom of my page ("prev" and "next") are wider than the post teasers in my #bloglist above. I am currently utilizing twitter bootstrap with their provided scaffolding. Any insights or recommendations wou ...

htmltwitter-bootstrappadding

AngularJs FileList Drag and Drop Feature

Being brand new to front-end development, I decided it would be a fun challenge to implement drag and drop functionality on an existing upload page. However, as I began integrating ng-flow (a directive that helps with drag and drop), I encountered difficul ...

javascripthtmlangularjsng-flow

What is the most efficient way to update a counter when a button is clicked in React and display the result on a different page?

Just delving into the world of React and Javascript, I decided to challenge myself by creating a Magic 8 Ball application. Currently, I have set up two main pages: The magic 8 ball game page A stats page to showcase information about the magic 8 ball qu ...

javascriptnode.jsreactjsclient-server

socket.io establishes several sockets for each connection

At times, when the server is experiencing some load, connecting to the page may result in multiple sockets being created. If there is significant lag, the connection may never be established while additional sockets are generated every second indefinitely. ...

javascriptnode.jssocket.io