Creating a sophisticated form design with multiple input fields using DIV elements in HTML

Question

Creating a sophisticated form design with multiple input fields using DIV elements in HTML

I am looking to create a multi-column form layout that allows each row to have a different number of fields. My initial approach was using tables and the colspan attribute within td tags for layout structure. However, I have learned that using tables for layout is not recommended and would like to update my code to use div elements instead.

Could someone provide me with a good example on how to achieve a similar layout while following best practices? My main challenge is ensuring that the columns have varying widths.

Thank you.

html css

Answer 1

Answer №1

I apologize for any validity issues with this code snippet, as well as the lack of a clear layout with proper margins.

Example

Check out this example on jsFiddle

HTML Markup

<div>
    <div class="w50">
        <span class="label">Name</span>
        <input type="text" value="Test" />
    </div>
    <div class="w50">
        <span class="label">Surname</span>
        <input type="text" value="Test" />
    </div>

    <div class="w100">
        <span class="label">Contact</span>
        <input type="text" value="Test" />
    </div>

    <div class="w50">
        <span class="label">Age</span>
        <input type="text" value="Test" />
    </div>
    <div class="w50">
        <span class="label">Email</span>
        <input type="text" value="Test" />
    </div>

    <div class="w70">
        <span class="label">Phone</span>
        <input type="text" value="Test" />
    </div>
    <div class="w30">
        <span class="label">Time</span>
        <input type="text" value="Test" />
    </div>

    <div class="w50">
        <span class="label">Age</span>
        <input type="text" value="Test" />
    </div>
    <div class="w50">
        <span class="label">Email</span>
        <input type="text" value="Test" />
    </div>
</div>

Cascading Style Sheet (CSS)

* {
    margin: 0;
    padding: 0;    
}
.label {
    width: 60px;
    display: inline-block;
}
.w30, .w50, .w70, .w100 {
    height: 20px;
    float: left;
    display: inline-block;
    width: 100%;
}
.w30{
    width: 30%;
}
.w50{
    width: 50%;
}
.w70{
    width: 70%;
}
.w100{
    width: 100%;
}

Answer 2

I apologize for any validity issues with this code snippet, as well as the lack of a clear layout with proper margins.

Example

Check out this example on jsFiddle

HTML Markup

<div>
    <div class="w50">
        <span class="label">Name</span>
        <input type="text" value="Test" />
    </div>
    <div class="w50">
        <span class="label">Surname</span>
        <input type="text" value="Test" />
    </div>

    <div class="w100">
        <span class="label">Contact</span>
        <input type="text" value="Test" />
    </div>

    <div class="w50">
        <span class="label">Age</span>
        <input type="text" value="Test" />
    </div>
    <div class="w50">
        <span class="label">Email</span>
        <input type="text" value="Test" />
    </div>

    <div class="w70">
        <span class="label">Phone</span>
        <input type="text" value="Test" />
    </div>
    <div class="w30">
        <span class="label">Time</span>
        <input type="text" value="Test" />
    </div>

    <div class="w50">
        <span class="label">Age</span>
        <input type="text" value="Test" />
    </div>
    <div class="w50">
        <span class="label">Email</span>
        <input type="text" value="Test" />
    </div>
</div>

Cascading Style Sheet (CSS)

* {
    margin: 0;
    padding: 0;    
}
.label {
    width: 60px;
    display: inline-block;
}
.w30, .w50, .w70, .w100 {
    height: 20px;
    float: left;
    display: inline-block;
    width: 100%;
}
.w30{
    width: 30%;
}
.w50{
    width: 50%;
}
.w70{
    width: 70%;
}
.w100{
    width: 100%;
}

Answer 3

Answer №2

To tackle this problem effectively, it's essential to devise a grid system. For instance, I've devised a 5% based grid setup in my example. You can observe an illustration of some identical components by clicking on the following link: this fiddle.

#container { font-size: 12px; width: 700px; }

.row { float: left; margin: 5px 0; width: 100%; }

.w10 { width: 10%; }
.w15 { width: 15%; }
.w20 { width: 20%; }
.w25 { width: 25%; }
.w30 { width: 30%; }
.w35 { width: 35%; }
.w40 { width: 40%; }
.w50 { width: 50%; }
.w60 { width: 60%; }
.w70 { width: 70%; }
.w80 { width: 80%; }
.w90 { width: 90%; }
.w100 { width: 100%; }

.item { box-sizing: border-box; float: left; }

input, select, option { margin: 0; }

Furthermore, I have sorted the items into rows to create an organized, grid-like appearance.

<div id="container">
    <div class="row">
        <div class="item w15">/* Entity Name</div>
        <div class="item w35">Maricopa County Community College District</div>
        <div class="item w50">*Domain: USPF, SLG, Special Districts, Community College</div>
    </div>
    <div class="row">
        <div class="item w15">/* Doctype</div>
        <div class="item w10">NLP?</div>
        <div class="item w20">Filename/Keywords</div>
        <div class="item w20">*Source Frequency</div>
        <div class="item w35">
            <input type="radio" name="freq" checked="checked" />
            <label>Daily</label>
            <input type="radio" name="freq" />
            <label>Weekly</label>
            <input type="radio" name="freq" />
            <label>Monthly</label>
        </div>
    </div>
    <div class="row">
        <div class="item w15">
            <input type="checkbox"/>
            <label>Audit</label>
        </div>
        <div class="item w10">
            <input type="checkbox"/>
        </div>
        <div class="item w20">
            <input type="text"/>
        </div>
        <div class="item w20">*Every</div>
        <div class="item w15">
            <input type="text" class="w20" value="1"/>
            <label>Days</label>
        </div>
        <div class="item w20">
            <select>
                <option value="utc-6">UTC -6</option>
            </select>
        </div>
    </div>
</div>

In essence, creating a specific structure with a row-based grid design is key to achieving your desired layout.

Answer 4

To tackle this problem effectively, it's essential to devise a grid system. For instance, I've devised a 5% based grid setup in my example. You can observe an illustration of some identical components by clicking on the following link: this fiddle.

#container { font-size: 12px; width: 700px; }

.row { float: left; margin: 5px 0; width: 100%; }

.w10 { width: 10%; }
.w15 { width: 15%; }
.w20 { width: 20%; }
.w25 { width: 25%; }
.w30 { width: 30%; }
.w35 { width: 35%; }
.w40 { width: 40%; }
.w50 { width: 50%; }
.w60 { width: 60%; }
.w70 { width: 70%; }
.w80 { width: 80%; }
.w90 { width: 90%; }
.w100 { width: 100%; }

.item { box-sizing: border-box; float: left; }

input, select, option { margin: 0; }

Furthermore, I have sorted the items into rows to create an organized, grid-like appearance.

<div id="container">
    <div class="row">
        <div class="item w15">/* Entity Name</div>
        <div class="item w35">Maricopa County Community College District</div>
        <div class="item w50">*Domain: USPF, SLG, Special Districts, Community College</div>
    </div>
    <div class="row">
        <div class="item w15">/* Doctype</div>
        <div class="item w10">NLP?</div>
        <div class="item w20">Filename/Keywords</div>
        <div class="item w20">*Source Frequency</div>
        <div class="item w35">
            <input type="radio" name="freq" checked="checked" />
            <label>Daily</label>
            <input type="radio" name="freq" />
            <label>Weekly</label>
            <input type="radio" name="freq" />
            <label>Monthly</label>
        </div>
    </div>
    <div class="row">
        <div class="item w15">
            <input type="checkbox"/>
            <label>Audit</label>
        </div>
        <div class="item w10">
            <input type="checkbox"/>
        </div>
        <div class="item w20">
            <input type="text"/>
        </div>
        <div class="item w20">*Every</div>
        <div class="item w15">
            <input type="text" class="w20" value="1"/>
            <label>Days</label>
        </div>
        <div class="item w20">
            <select>
                <option value="utc-6">UTC -6</option>
            </select>
        </div>
    </div>
</div>

In essence, creating a specific structure with a row-based grid design is key to achieving your desired layout.

Answer 5

Answer №3

Tables get a bad rap sometimes.

The main reason why tables are often not recommended for layout is that they load the content only when everything in the table has loaded on the page. On the other hand, divs display their content as soon as it's available.

In your case, your form seems quite intricate to me and showing partial content of this form while the page is still loading may not be ideal. It would be better to have all the fields of your form visible at once.

Moreover, if you're dealing with tabular data (which seems to be the case here), using tables is actually recommended.

Therefore, I would suggest considering using a table for your form. One additional benefit of tables is that you don't have to worry too much about aligning your content.

Answer 6

Tables get a bad rap sometimes.

The main reason why tables are often not recommended for layout is that they load the content only when everything in the table has loaded on the page. On the other hand, divs display their content as soon as it's available.

In your case, your form seems quite intricate to me and showing partial content of this form while the page is still loading may not be ideal. It would be better to have all the fields of your form visible at once.

Moreover, if you're dealing with tabular data (which seems to be the case here), using tables is actually recommended.

Therefore, I would suggest considering using a table for your form. One additional benefit of tables is that you don't have to worry too much about aligning your content.

Answer 7

Answer №4

If you're looking to showcase different widths using CSS, one approach is to create multiple classes representing the various widths you want to display. While this method may not result in strictly flexible columns, it can be thought of as flexible rows where you have to consider arranging content horizontally instead of vertically.

For each row of content, you would assign specific width classes like so:

<div class="row">
    <div class="left width-50"></div>
    <div class="right width-50"></div>
</div>
<div class="row">
    <div class="left width-70"></div>
    <div class="right width-30"></div>
</div>
<div class="row">
    <div class="left width-100"></div>
</div>
....
....

I hope this suggestion proves helpful for your needs.

Answer 8

If you're looking to showcase different widths using CSS, one approach is to create multiple classes representing the various widths you want to display. While this method may not result in strictly flexible columns, it can be thought of as flexible rows where you have to consider arranging content horizontally instead of vertically.

For each row of content, you would assign specific width classes like so:

<div class="row">
    <div class="left width-50"></div>
    <div class="right width-50"></div>
</div>
<div class="row">
    <div class="left width-70"></div>
    <div class="right width-30"></div>
</div>
<div class="row">
    <div class="left width-100"></div>
</div>
....
....

I hope this suggestion proves helpful for your needs.

Answer 9

Answer №5

Take a look at this:

HTML

<html>
<head>
    <link rel="stylesheet" href="contactForm.css"></link>
</head>
<body>

<div id="contactform">


    <div id="first">
        <div id="name">
            <div id="description">Name</div> 
            <input type="text" name="textName">
        </div> 
        <div id="surname">
            <div id="description"> Surname</div> 
            <input type="text" name="textSurname"> 
        </div>
    </div>

    <div id="second">
        <div id="contact"><div id="description">Contact</div> <input type="text" name="textContact"></div>
    </div>

    <div id="third">
        <div id="age">
            <div id="description">Age</div> 
            <input type="text" name="textAge">
        </div> 
        <div id="e-mail">
            <div id="description">E-mail</div> 
            <input type="email" name="textEmail">
        </div>
    </div>

    <div id="fourth">
        <div id="phone">
            <div id="description">Phone</div> 
            <input type="text" name="textPhone">
        </div> 
        <div id="time">
            <div id="description">Time</div> 
            <input type="date" name="textTime">
        </div>
    </div>

</div>

</body>

</html>

CSS

#contactform {width:500px; height:500px;}

#contactform div {float:left; padding-top:5px;}
#first, #second, #third, #fourth {width:100%;} 

#first #description {width:30%;}
#name, #surname {width:50%;}
#surname #description {margin-left:11px;}
#first input {width:65%;}

#second #description {width:15%;}
#contact {width:100%;}
#second input {width:85%;}

#third #description {width:30%;}
#age, #e-mail {width:50%;}
#e-mail #description {margin-left:11px;}
#third input {width:65%;}

#fourth #description {width:30%;}
#phone, #time {width:50%;}
#time #description {margin-left:11px;}
#fourth input {width:65%;}

Output

Hope this helps.

Answer 10

Take a look at this:

HTML

<html>
<head>
    <link rel="stylesheet" href="contactForm.css"></link>
</head>
<body>

<div id="contactform">


    <div id="first">
        <div id="name">
            <div id="description">Name</div> 
            <input type="text" name="textName">
        </div> 
        <div id="surname">
            <div id="description"> Surname</div> 
            <input type="text" name="textSurname"> 
        </div>
    </div>

    <div id="second">
        <div id="contact"><div id="description">Contact</div> <input type="text" name="textContact"></div>
    </div>

    <div id="third">
        <div id="age">
            <div id="description">Age</div> 
            <input type="text" name="textAge">
        </div> 
        <div id="e-mail">
            <div id="description">E-mail</div> 
            <input type="email" name="textEmail">
        </div>
    </div>

    <div id="fourth">
        <div id="phone">
            <div id="description">Phone</div> 
            <input type="text" name="textPhone">
        </div> 
        <div id="time">
            <div id="description">Time</div> 
            <input type="date" name="textTime">
        </div>
    </div>

</div>

</body>

</html>

CSS

#contactform {width:500px; height:500px;}

#contactform div {float:left; padding-top:5px;}
#first, #second, #third, #fourth {width:100%;} 

#first #description {width:30%;}
#name, #surname {width:50%;}
#surname #description {margin-left:11px;}
#first input {width:65%;}

#second #description {width:15%;}
#contact {width:100%;}
#second input {width:85%;}

#third #description {width:30%;}
#age, #e-mail {width:50%;}
#e-mail #description {margin-left:11px;}
#third input {width:65%;}

#fourth #description {width:30%;}
#phone, #time {width:50%;}
#time #description {margin-left:11px;}
#fourth input {width:65%;}

Output

Hope this helps.

Creating a sophisticated form design with multiple input fields using DIV elements in HTML

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Styling CSS: Adjusting font sizes for placeholders and text boxes

Script for automated functions

Embedding a CSS file into a PHP class

Changing Images with Jquery on Click Event

Steps for executing ASP code pulled from the database

Using CSS styles in emails can lead to an unexpected horizontal scrolling effect

Is there a way to ensure my chat view functions properly without relying on partial views?

When using Vue with CSS3, placing an absolute positioned element within a relative wrapper can cause issues with maintaining the

Is there a way to view images embedded in local .msg files in a web browser in HTML format?

Clearing data validation in HTML after an error has been resolved.Is there a way to clear

Transforming ASCII Source Files into JPEG Images

What is the best way to adjust the responsiveness of my AppDrag page for mobile optimization?

What is the best way to customize a div depending on the validation status of all reactive form fields within it?

What is the best way to showcase the following values using Vue.js?

How to choose a single checkbox in Ionic 2 and retrieve its value

Error: Unable to modify the div content - Uncaught TypeError: Unable to assign value to innerHTML of null

Transform a dropdown menu into an inverted footer

Dynamic Material UI TextField underline width using JSX in React

Transitioning the height of a Vue component when switching routes

Top method for showcasing only unique values from various div tags with identical class names