Arranging my HTML text fields for optimal organization

I am struggling to format my text fields the way I envision. Here's what I want: - Username field at the top - First and last name underneath each other - Password and confirm password next to each other below names

As a newcomer to HTML, I'm finding it challenging to structure it the way I desire. Not sure whether to use div, section, etc.

In addition, I would like everything to be centered instead of aligned to the left. I also want to include an image below all the text fields with an "add child" button underneath it.

Below is the code snippet:

<form>

    <label for="contact">
        <span>USERNAME *</span>
        <input type="text" id="contact" />
    </label>

</form>

<form>
    <div>
        <label for="company">
            <span>FIRST NAME *</span>
            <input type="text" id="company" />
        </label>

        <label for="contact">
            <span>LAST NAME *</span>
            <input type="text" id="contact" />
        </label>

        <label for="contact">
            <span>PASSWORD *</span>
            <input type="text" id="contact" />
        </label>

        <label for="contact">
            <span>CONFIRM PASSWORD *</span>
            <input type="text" id="contact" />
        </label>
    </div>
</form>

Answer №1

Consider using a table instead of div or section for easier design implementation. Here is a basic table structure to get you started:

<table border="0" align="center">
     <tr>
        <td>Username <input type="text" /></td>
     </tr>
     <tr>
        <td>First Name <input type="text" /> </td>
        <td>Last Name <input type="text" /> </td>   
    </tr>
  </table>

You can now add your desired fields within this table.

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

phperror message is included and echoed

I am facing an issue while trying to utilize the php include tag for my header and footer sections. Even though my index file and header.php file seem to be error-free, the included file is not showing up when I preview it in a browser. Is there an easy fi ...

Issue with submit button functionality in Wicket when the value is empty

This is a custom class called YesNoPanel that extends the Panel class: public class YesNoPanel extends Panel { /** * */ private String password = "Password"; public String getPassword() { return password; } public void setPassword(String passwo ...

What is the best way to design versatile div containers that combine the float property with fluid dimensions?

I am attempting to achieve a specific layout where the width of the content_container extends up to the right side of the screen and dynamically adjusts based on whether the expandable pane is collapsed or expanded. Applying width: 100% to .content_contain ...

Pressing a key once causing two actions when managing content in a separate window

Issue: I am facing a problem where I receive double keypresses from one key event when the event updates content in two separate windows. (Please keep in mind that I am not an expert in this field and appreciate your understanding.) I am attempting to use ...

How can a CSS class be inherited from a different file?

I have defined a class for styling a button: .client-header button { /*Properties*/ } And I also have a class to indicate when the menu is open: .client-menu-open { /*Properties*/ } My goal is to change the background of the button depending on ...

Explore a Wordpress HTML code

I own a WordPress website using the Photolux theme. My desire is to extract HTML elements such as titles and tags, but for some reason they are not visible. Just to clarify, I am not interested in reading the XML format. If anyone has any suggestions or ...

Tips for modifying a particular element within a class?

I am seeking guidance on how to modify a specific class attribute in CSS/JS/JQuery when hovering over a different element. Here is an example: <h1 class="result">Lorium</h1> <h1 class="result">Ipsum</h1> <h1 class="result">Do ...

The width of an HTML input and button elements do not match

Currently, I am facing an unusual issue where my input and button tags seem to have the same width assigned to them (width: 341.5px; calculated from $(window).width() / 4) in the code, but visually they appear to be of different widths. Here is a visual re ...

Choose all the inputs with the value attribute specified

How can I select all input textboxes in my form that have the required class and no value using jQuery? Currently, I am using: $('input[value=""]', '.required') The issue I am facing is that even when a user enters a value in the text ...

CSS - Update BackgroundColor Depending on Child Element Color

Is there an official CSS way to change the background color based on the child element in HEX? For example: render() { return ( ... <span> <h3 style={{ color: item.color }}>Item Color</h3> </span> ...

What steps can I take to ensure that the upper and left sections of a modal dialog remain accessible even when the size is reduced to the point of overflow?

One issue I'm facing is with a fixed-size modal dialog where part of the content gets cut off and becomes inaccessible when the window shrinks to cause an overflow. More specifically, when the window is narrowed horizontally, the left side is cut off ...

Guide on altering a Tailwind Class depending on the React State or Props

Currently, I am working on a Progress Bar Component and utilizing the following versions: "next": "13.4.4", "react": "18.2.0", "react-dom": "18.2.0", "classnames": "^2.3.2", I ...

Stylish grey container with crisp white lettering

Just getting started with HTML and I've been working on a project for my class. Here's what I've come up with: <font style="background-color: grey; color: white; display: block">Black and white copies $.10 per page letter/legal size&l ...

What is the best way to retrieve an <a> tag element using Selenium in Python?

I am fairly new to using Selenium and could use some guidance with the following issue. I am attempting to create a birthday bot for Facebook, but navigating through the platform's latest UI has been challenging with JavaScript disabled. I've bee ...

Is there a way to keep my <nav> positioned in the top right corner of my header?

I'm in the process of setting up a fresh homepage and I've implemented the code below: menu { width: 100%; height: 60px; background: rgb(0, 0, 0); z-index: 2; position: fixed; } #content { margin: 0 auto; width: 1024px; height: ...

Restricting the type of user input in HTML forms

Requirements: Input must be a whole number between 2 and 99, inclusive. Current Solution: <input required type="number" min="2" max="99" oninput="this.value = Math.abs(this.value)" maxLength="2" matInp ...

Tips for entering the lowest and highest values into the input field

I am looking to track the daily minimum and maximum prices of shares for various companies. Currently, I'm attempting to utilize this tag: <input type="number" name="number" placeholder="minprice"> <input type="number" name="number" place ...

Learn how to retrieve and transfer data from a MySQL database table to a hidden input field in an HTML form using PHP

I have a scenario where a user fills out the first form, submits it, and the details are saved in a database table. After that, I need to set a value from the data sent to the database into a hidden input field in the second form upon clicking a button. To ...

CSS for leaving white space at the end of one third of a container

Currently developing a website and facing an issue with the layout: I am trying to create 3 columns of equal height with each column taking up one-third of the width. However, there seems to be a small white gap on the right side of the last column. Here ...

Interactive iframe material using $_POST variables

Working with PHP has always posed a challenge for me. Typically, I navigate through by searching and trial and error, but this time I'm stuck. Currently, I'm developing a project that allows users to order services online. The ordering module is ...