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

Is it possible to detect when a user reaches the end of a div without using a scroll event?

Seeking a JavaScript solution that can identify when a user reaches the bottom of a div with overflow: auto. While there are numerous solutions on Stack Overflow utilizing the onscroll event, I am curious if this can be accomplished using newer technology ...

The background hue concealing the shadow of another box

I am facing an issue with my table styling where I want to apply a box-shadow effect when hovering over a row. However, despite setting the z-index accordingly, the background color of the td elements ends up covering the box-shadow, resulting in the hover ...

I am encountering a 'Cannot GET /index.html' error when running my Node.js and Express application, even though I do not have an index.html file

I'm puzzled by the error I'm encountering. Everything runs smoothly on my local machine, but when I try running it on Linux, this error pops up. I've already created ejs files and included all necessary components. Additionally, there is no ...

Integrate the user input data into a modal window using Bootstrap

Looking for a solution to a problem, I'm trying to implement a system on my website that sends messages to registered users. After creating a form with necessary information, clicking the send button should display a preview of the message before send ...

Implementing the Disabled Attribute on a Dynamically Generated Button Using React

My QWERTY keyboard is dynamically rendered through a component as Bootstrap buttons using bootstrap-react. Each button does not have an ID to avoid relying on IDs in React. When a letter button is clicked, it triggers an onClick event passed as props back ...

selenium.common.exceptions.ElementNotInteractableException: Error: the element cannot be interacted with

My current programming project involves using selenium webdriver with Twitter for fun, but I've run into a frustrating issue. The problem arises when I attempt to input text into the tweet box: https://i.stack.imgur.com/Zxwvg.png To activate the ele ...

Elements are not detected after applying display:none

Within the onLoad event, I implemented a function to hide multiple div elements by setting their CSS property display to "none" and assigning them the class name "invisible": function hideContent() { laElements = document.getElementById("content").chil ...

Struggling to get my layout perfectly centered

I've spent the last 35 minutes scouring this site, and I know the answer is probably right in front of me but I can't seem to figure out how to center my layout. It's a straightforward setup with a container div, left div for the menu, and ...

Sleek dialog sliding animation with Svelte

I'm struggling with a svelte component that I have and I'm trying to implement a slide down animation when it closes. The slide up animation is functioning correctly, but for some reason the slide down animation is not working. Does anyone have a ...

Apply a specific style conditionally using Angular's ng-repeat directive

Currently, I am utilizing ng-repeat to iterate through a list of divs and manually adding items to the JSON that is rendering these divs. My goal is to position the last div that I add in the JSON at the location where the mouse cursor is, while keeping th ...

What is the best way to extract a table from a website that has stored the table data separately from the HTML?

Attempting to extract table data from the following URL: In a previous scraping attempt, the Python packages utilized were: from bs4 import BeautifulSoup import requests import mysql.connector import pandas as pd from sqlalchemy import create_engine Howe ...

Ways to reduce the width of an input field: Utilizing Bootstrap v5 or employing CSS techniques

I am struggling to find a way to adjust the width of the input window. It seems like there is no specific code that controls the width of the input window. The code snippet below is extracted from the Bootstrap v5 documentation, specifically focusing on th ...

Securing Your Content - Preventing Users from Right-Clicking and Using F12 on Your Website

I am looking to disable the Right-Click function on my website or display an error message saying "Protected Content!" when someone tries to right-click. I want to prevent others from viewing my Source Code. Although I know how to disable Right-Click, I am ...

Counting the number of PHP inputs in a field

Hello, I am using a PHP script from Steve Dawson's website. To display the output on my HTML page, I am utilizing this AJAX script: <script> $.ajax({ type:'GET', url:'http://www.solariserat.se/count.php', data: ...

Arranging elements in HTML for Manipulating with JavaScript

I haven't started coding yet, but I'm contemplating the overall strategy. My front end is primarily composed of HTML tables, giving it an Excel-like appearance. I am considering generating default pages and then using JavaScript to dynamically m ...

Troubleshooting on Safari for iOS

As I work on my portfolio website using only HTML 5 without any JavaScript, I encountered an issue with the about page not functioning properly on iPhones. There seems to be a problem with scrolling as some elements are fixed and do not move along with t ...

Do you need the Tooltip Module for Angular-bootstrap popover to work properly?

"Could it be possible that my popover isn't working because it requires the tooltip module just like the Bootstrap jQuery plugin?" Is this the reason my popover isn't functioning as expected? What exactly is the tooltip module and do I need to i ...

Is it possible to generate various resolutions of an image simultaneously?

While trying to download wallpapers from a link on this website, I encountered an issue. Upon clicking the download button, a new page opened with the URL "https://images.wallpapersden.com/image/download/street-fighter-fortnite_bGtoaW6UmZqaraWkpJRmbmdlrW ...

What could be causing my website to extend beyond 100% width?

I've been working tirelessly on solving this issue for the past week, but unfortunately, I haven't had any luck finding a solution. The problem arose as I was designing a launch page for a program that my friend is developing. Despite setting the ...

What causes the button's frame color to change when I click on it?

I am facing an issue with a button I created. When I click the button, the frame color changes and I cannot figure out why. I have attached images showing the button before and after it is clicked. Before: https://i.sstatic.net/5jpB1.png After: https://i ...