Wrapping HTML input elements in a div for alignment

I need help aligning the inputs in my form to match the image provided . I attempted to center the div using <center>, but I am unsure how to properly align the elements based on the image reference.

<center>
    <div>
        <div>
            <center>
            Priority:
            <input  align="middle" type="radio" id="high" name="priority" value="High">
            High
            <input type="radio" id="medium" name="priority" value="Medium">
            Medium
            <input type="radio" id="low" name="priority" value="Low">
            Low
             </center>
        </div>
        <br />
        <div>
            <label for="subject">Subject: </label>
            <input type="text" id="subject" name="subject">  
        </div>
        <br />
        <div>
            <label for="appointment_date">Date: </label>
            <input type="date" id="appointment_date" name="appointment_date">

            <label for="start_time">Start Time</label>
            <input type="time" id="start_time" name="start_time" />

            <label for="end_time">End Time</label>
            <input type="time" id="end_time" name="end_time"/>
        </div>
        <br />
        <input type="button" onclick="addAppointment()" value="Add Appointment" />
        <br />
    </div>
    <hr>
</center>

Any assistance would be greatly appreciated. Thank you!

Answer №1

If you're hesitant about writing CSS from scratch, consider using Bootstrap as a solid alternative for building your web design. Check out the sample code below for reference.

  1. Center tag is now obsolete in HTML5 and no longer supported
  2. The next step would be to delve into crafting custom CSS styles that fit your needs.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
  <div class="container">
    <!-- first row -->
    <div class="row my-3">
      <div class="col-sm-3">Priority:</div>
      <div class="col-sm-3"><input align="middle" type="radio" id="high" name="priority" value="High"> High
      </div>
      <div class="col-sm-3"><input type="radio" id="medium" name="priority" value="Medium"> Medium
      </div>
      <div class="col-sm-3"><input type="radio" id="low" name="priority" value="Low"> Low
      </div>
    </div>
    <!-- second row -->
    <div class="row my-3">
      <div class="col-sm-3"><label for="subject">Subject: </label></div>
      <div class="col-sm-9"><input type="text" class="form-control" id="subject" name="subject"></div>
    </div>

  <!-- 3rd row -->

  <div class="row my-3">
    <div class="col-sm-4"> <label for="appointment_date">Date: </label>
      <input type="date" id="appointment_date" name="appointment_date"></div>
    <div class="col-sm-4"><label for="start_time">Start Time</label>
      <input type="time" id="start_time" name="start_time" /></div>
    <div class="col-sm-4"><label for="end_time">End Time</label>
      <input type="time" id="end_time" name="end_time" /></div>
  </div>
  <!-- 4th row -->

  <div class="row my-3">
    <div class="col-sm-12 text-center">
      <input type="button" onclick="addAppointment()" value="Add Appointment" />
    </div>
  </div>

  </div>
  <!-- container ends -->

Answer №2

If you want to achieve this, flex can be a great tool.

Check out the created code pen

#priorityBox{
  display:flex;
  flex:1;
  justify-content:space-around;
}

Answer №3

To create this layout, you can utilize flex-box properties:

.wrapper {
width: 100%;
display: flex;
justify-content: space-between;
padding: 6px 0;
max-width: 600px;
margin: auto;

}

input[type="text"] {
   width: 100%;
   margin-left: 15px;
   }
    <div>
<div class="wrapper">
Priority:
<span><input align="middle" type="radio" id="high" name="priority" value="High"> High</span>
<span><input type="radio" id="medium" name="priority" value="Medium"> Medium</span>
<span><input type="radio" id="low" name="priority" value="Low"> Low</span>
</div>
<div class="wrapper">
<label for="subject">Subject: </label>
<input type="text" id="subject" name="subject">
</div>
<div class="wrapper">
<label for="appointment_date">Date: </label>
<input type="date" id="appointment_date" name="appointment_date">

<label for="start_time">Start Time</label>
<input type="time" id="start_time" name="start_time" />

<label for="end_time">End Time</label>
<input type="time" id="end_time" name="end_time" />
</div>
<center> <input type="button" onclick="addAppointment()" value="Add Appointment" />

</center>
    </div>
    <hr>

Answer №4

This is the custom code I've created using Bootstrap:

<!DOCTYPE html>
<html lang="cs">

<head>
  <meta charset="utf-8">
  <meta name="author" content="Vojtěch Matras">
  <title></title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container-fluid">
    <div class="row">
      <div class="col-sm-2 col-2" >Priority</div>
      <div class="col-sm-10 col-10" > <input type="radio" name="Priority" value="high">high<br>
        <input type="radio" name="Priority" value="medium"> medium<br>
        <input type="radio" name="Priority" value="low"> low</div>
   </div>
    <div class="row">
          <div class="col-sm-2 col-2" >Subject</div>
          <div class="col-sm-10 col-10" style="display: block"><input type="text"></div>
    </div>
    <div class="row">
        <div class="col-sm-2 col-2" >Date:</div>
        <div class="col-sm-2 col-2" ><input type="date" id="appointment_date" name="appointment_date"></div>
        <div class="col-sm-2 col-2" >Start time:</div>
        <div class="col-sm-2 col-2" ><input type="time" id="start_time" name="start_time" /></div>
        <div class="col-sm-2 col-2" >End time:</div>
        <div class="col-sm-2 col-2" ><input type="time" id="end_time" name="end_time"/></div>
  </div>

  </div>

  <center><input type="button" value="Add Appointment"></center>

</html>

To view a live demo, visit this fiddle:https://jsfiddle.net/mgdzuod4/

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

What is the correct way to utilize Microdata fields?

I'm finding the process of creating a list of events on a page to be a bit perplexing. Does the URL in this example represent the current page or another page you are mentioning? <div itemscope itemtype="http://data-vocabulary.org/Person"> H ...

Incomplete width allocation for the floating div positioned to the left

I've encountered an issue with the placement of the side-text div in relation to the image. Currently, without specifying the width of the side-text div, it automatically moves to the bottom. To address this problem, I attempted using display:inline- ...

Having issues with CSS animation keyframes not functioning properly in NextJS

Currently, I have a straightforward component in NextJS that is displaying "HI" upon loading. This component fades in when rendered, but I am facing an issue while trying to pass a prop to make it fade out. The problem lies in the fact that even though the ...

Is there a way to simplify this "stopwatch" even more?

Looking for advice on simplifying my JS stopwatch timer that currently only activates once and keeps running indefinitely. As a newcomer to JS, this is the best solution I could come up with: let time = 0 let activated = 0 function changePic() { if(a ...

Updating the progress bar without the need to refresh the entire page is

Currently, I have two PHP pages: page.php and loader.php. Loader.php retrieves data from MySQL to populate a progress bar, while page.php contains a function that refreshes loader.php every second. This setup gets the job done, but it's not visually a ...

Tips for adding a CSS marker to the Videogular timeline at a designated time

My HTML player application allows users to search for a term and then displays the results along with the time when those words appear. By clicking on a specific sentence, the HTML player will start playing from that location. However, I would like to enha ...

Embed Javascript Code Within Text Field

Is there a way to incorporate this JavaScript into the "price" text value? Below is the code snippet: <script> function myFunction() { var x = document.getElementById('car-select')[document.getElementById('car-selec ...

Tips to prevent the webpage from scrolling to the top when clicking on an anchor with an ID

I have developed a CSS/HTML carousel that consists of 4 slides. The goal is to display the selected slide when clicking on the bottom button (a href). However, I am facing an issue where every time I click on a link, the selected slide appears as intended ...

Creating a grid layout similar to Tumblr using HTML and CSS

Struggling all day to figure out how to create a Tumblr-style grid for my website, I'm reaching out here for some assistance. Here is the page: I have a grid of images on my project page that initially looked fine, but as I try to add new elements, i ...

Issues with rendering HTML5 drag and drop styles are not visible on a Windows Server 2003 platform

I am currently developing a file upload tool utilizing Valum's Ajax-Uploader as the foundation. The concept is reminiscent of how attaching files works in Gmail. Users should be able to simply drag and drop a file from their desktop into the browser w ...

What are the best methods for preventing scss styles from leaking between pages?

I'm currently working on a project that includes the following files: /* styles/1.scss */ body { /* Some other styles not related to background-color */ } /* styles/2.scss */ body { background-color: blue; } // pages/one.js import "../styles/ ...

Even with a highly lenient Content Security Policy in place, I continue to encounter violation errors

I currently have this meta tag in my HTML document: <meta http-equiv="Content-Security-Policy" content="default-src *;script-src *"> My project uses ParcelJS as a bundler. Everything works smoothly when using the development serv ...

Having trouble getting the img file to show up in the img tag - the src URL is not updating

<div class="col-lg-3 col-md-4 pl-md-1"> <label class="ORGAd16-preview"> input type='file' name="modelvariant_file" id="imageUpload" accept=".png, .jpg, .jpeg" > <img id="ima ...

Issue with custom leaflet divIcon not maintaining fixed marker position during zoom levels

After creating a custom marker for leaflet maps, I noticed that it shifts position drastically when zooming in and out of the map. Despite trying to adjust anchor points and positions, the issue persists. I have provided the code below in hopes that someon ...

Unveiling the method to retrieve XML tag based on the attribute of its parent element

This snippet is a segment of XML code: <?xml version="1.0"?> <menu> <pizzas> <pizza number="0"> <title>Tomato &amp; Cheese</title> <small>550</small> <medium></medium> <large> ...

Navigate back to the previous page upon form submission to a PHP file, with a div dynamically populated with targeted content

I'm facing a logic dilemma: I have a webpage with a div called #content, where I've embedded another page containing a form for submitting data* (there are other pages loaded into #content as well, but they are not active at the same time, one o ...

challenges surrounding the use of getElementByTagName

Within my webpage, I have implemented two select elements, both containing multiple options. However, I am facing an issue where I can only access the options from the first select box using getElementByTagName("options"), and unable to retrieve the option ...

What is the best way to incorporate a style attribute into my EJS page content?

Having trouble with adding custom style. It seems to work, but there's an error displayed. Apologies for my poor english :( <div class="card card_applicant"> <div class="card_title" style="background-c ...

The "click" event is only effective for a single use

I am looking for a way to trigger the click event more than once in my project. I attempted using "live" but it didn't work as expected. There are 2 other similar scripts in this Django project. If you have any suggestions on improving this project, p ...

Tips for designing scrollable overlay content:

I am currently in the process of building a page inspired by the design of Hello Monday. Right now, I have added static content before implementing the parallax effect and auto-scroll. Here is my progress so far: Check out the Sandbox Link One challenge ...