Building an HTML Form for Requests

Having some trouble creating an HTML form, particularly with resizing the Fieldset and legend elements. As a novice programmer, I am practicing building HTML forms. My goal is to have the form adjust its size based on the window without displacing the content. Unfortunately, my current code results in misaligned input fields and checkboxes when the window is resized. Any assistance would be greatly appreciated.

The HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="bestell.css">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<fieldset class="fieldset">
    <legend id="one">
        <img src="http://www.myhomematic.de/images/manufacturers/mediola-
logo-trans.png" class="image">
    </legend>
    <h1>Bestellantrag</h1>
    <p>(für Investitionsgüter über € 400)</p>
    <label for="antragssteller" class="">Antragssteller:</label>
    <input type="text" value="" class="imput">
    <!--<p>Name</p>-->
    <label for="abteilung" class="abteilung_space">Abteilung:</label>
    <input type="checkbox" class="begin1"> R&D
    <input type="checkbox" class="begin1"> Marketing<br>
    <input type="checkbox" class="begin21"> Operation
    <input type="checkbox" class="begin22"> Vertrieb<br>
    <input type="checkbox" class="begin3"> Admin
</fieldset><br><br>
<div>
    <label for="Anschaffungswert">Anschaffungswert:</label>
    <input type="text" value="" class="none">
    <label for="Zeitpunkt" class="even">Zeitpunkt:</label>
    <input type="text" value="" class="none"><br><br><br>
</div>
... (continued)

Please disregard the specific class names as they were chosen for styling purposes. Any tips on improving as a programmer would be highly valued.

The Styling

(CSS styles will go here)
...

https://i.stack.imgur.com/RLM54.jpg

UPDATE:

To help illustrate the issue, here is a link to a jsfiddle: https://jsfiddle.net/jsallans/ok2qf1jo/

Answer №1

If you want the form to adjust to the size of the window, consider using an HTML table with column percent sizing.

<div style='min-width: 800px'>
    <table style='width: 100%'>
      <tr>
        <td style='width: 25%;'><input type='checkbox' />&nbsp;Checkbox 1</td>
        <td style='width: 25%;'><input type='checkbox' />&nbsp;Checkbox 2</td>
        <td style='width: 25%;'><input type='checkbox' />&nbsp;Checkbox 3</td>
        <td style='width: 25%;'><input type='checkbox' />&nbsp;Checkbox 4</td>
      </tr>
    </table>
    <table style='width: 100%'>
      <tr>
        <td style='width: 100px; min-width: 100px;'>Label&nbsp;1: </td>
        <td style='width: 50%; border-bottom: solid 1px black;'></td>
        <td style='width: 100px; min-width: 100px; padding-left: 20px;'>Label&nbsp;2: </td>
        <td style='width: 50%; border-bottom: solid 1px black'></td>
      </tr>
    </table>
</div>

Additional notes:

  • min-width prevents elements from becoming too small and wrapping
  • The table has a width of 100% to occupy the entire page

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

Issue with Tailwind CSS: The 'overflow-y' property does not scroll all the way to the bottom when using 'top-[63px]'

I'm facing an issue with my Tailwind CSS code that is hindering me from scrolling to the bottom of an aside element. <body> <div> <nav class=" bg-white px-2 py-2.5 dark:bg-gray-800 sm:px-4 fixed w-full z-20 border-b borde ...

Tips for executing a jQuery nested template in a recursive manner

Imagine a world where JSON objects and jQuery templating collide in a thought-provoking inception-like scenario. How can we dive deeper into this rabbit hole? The catch is, I'm a bit lazy and hoping the code will do most of the heavy lifting... Q:> ...

Python Selenium Webdriver: Issues with retrieving text content from hidden elements

I am interested in extracting data from Netflix that includes the following details: 1. Show Name 2. Season 3. Episode Name for each season 4. URL for each episode 5. Duration of each show. Selenium version: 3.141.0 Python version: 3.6.6, utilizing Chr ...

use ajax to dynamically append a dropdown menu

Currently working on creating a form that includes a dropdown menu populated with elements from a database. The challenge I'm facing is ensuring that once an element is selected from the dropdown, another one appears dynamically. My goal is to use AJA ...

When implementing CSS object-fit: contain on an image, it may result in empty spaces surrounding the image

Within my image-wrapper container, I have an image with a variable resolution. The container itself has fixed dimensions for height and width. My goal is to center the image within the container both horizontally and vertically while adding a box-shadow e ...

The mobile navigation bar may not display correctly on certain iPhones and iPads

Currently using a custom theme on Prestashop 1.6 where minor changes have been made to the CSS file, focusing mostly on colors and fonts. Interestingly, the mobile menu functions flawlessly on Android devices that were tested. However, some Apple devices s ...

Arrange the table by adding and editing before and after appending

I have a table data that needs to be dynamically appended. But I want to allow users to add new data using text input and also edit the existing data before and after it's appended. The problem is that when I append new data, it overwrites the previo ...

What are the best ways to ensure a website is responsive in a vertical

When designing a responsive webpage, I encountered an issue with the body element not properly expanding the content vertically. Despite enlarging the web content horizontally, the body failed to adjust its height accordingly, resulting in unwanted black a ...

Tips for arranging div elements in a grid-like matrix layout

I am facing a challenge in arranging multiple rectangular divs into a grid structure with 10 columns and 10 rows. The CSS styles for the top, bottom, left, or right positions must be in percentages to accommodate zoom in and out functionality without overl ...

Positioning a sticky footer in a dual-column design

This updated post is a revised version of the one found at this link. I aim to provide a clearer explanation of my issue compared to the previous post. The problem revolves around the placement of the footer in two different scenarios. Scenario 1: The fi ...

In Bootstrap 5, the anchor tag is causing a shift in the background color of surrounding tags upon being clicked

Why does clicking on an anchor tag temporarily change the background of other tags that weren't clicked? What am I doing wrong? https://i.stack.imgur.com/ZKlUT.png Check out the code below: <nav class="navbar navbar-expand-lg navbar-light bg- ...

serving JSON and HTML responses using a PHP script

After searching through the questions here, I couldn't find a solution. As someone new to PHP and jQuery, I appreciate your patience as I explain my issue. My goal is to send an ajax request using jQuery to a script that runs a mysql query on data fr ...

Navigating an indefinite amount of state variables in React.js: A comprehensive guide

Receiving data from the server with an unknown number of items in the API leads me to utilize the map method in HTML for rendering. Below is the return section: if (loading) { return ( <div> <div> <Header /> ...

Retrieve the element that is currently being hovered over within the same nested selector

I am facing a challenge in selecting the currently hovered element with a nested selector. The ".frmElement" class is used as the selector. When I hover over the ".frmElement" element at a certain level, all the previous selector elements display the hover ...

Child Theme setup in progress! Beware of the error message: "Unable to access file: file_get_contents9(). The specified stream does not exist."

I am currently in the process of developing a child theme based on my existing theme (Tesseract 2). I have carefully followed the guidelines outlined here, but unfortunately, I keep encountering the following error: Warning: file_get_contents(/home/fletch ...

Setting the opacity of an image will also make the absolute div transparent

I currently have an image gallery set up with the following structure : <div class="gallery"> <div class="message"> Welcome to the gallery </div> <img src="http://placehold.it/300x300" /> </div> Here ...

Ensuring Consistent Headings While Scrolling

Imagine having headings structured like this: <h1 class="fixontop">heading 1</h1> content goes here. . . . long paragraph. <h1 class="fixontop">heading 2</h1> 2nd content goes here. . . . long paragraph. <h1 class="fixontop"> ...

The H1 tag is mysteriously displaying padding or margin on the bottom, despite not being set

Despite not setting any padding or margin for the H1 tag, it still appears to have some spacing at the bottom. After applying a margin and padding of 0 to both the h1 tag and the text below it, I am still facing an issue where the text doesn't align ...

Having difficulty modifying the styling of a paragraph within a div container

I have been working on a function that is supposed to adjust the font-size and text-align properties of a paragraph located within a div tag once a button is pressed. function customizeText() { document.getElementById('centretext').innerHTML = ...

Check the Django form that was submitted in the view to ensure its

When handling a POST request in my view, I am expecting data that has been submitted through a Django form. This is how the Django form is structured: class SubmitForm(forms.Form): title = forms.CharField(max_length=100) comment = forms.CharField ...