What steps can be taken to ensure that this form fields are flawless?

Can you style the form fields to match the red line in this image? https://i.sstatic.net/gbvDs.png

input,
select,
textarea {
  width: 20%;
  padding: 12px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  margin-left: 20px;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

.container {
  /* all the form elements are kept inside this container */
  padding: 20px;
  margin: 20px;
  overflow: auto;
  text-align: center;
}
<div class="container">
  <form method="post" enctype="multipart/form-data" id="form">
    <label for="id_image1">profile picture</label>
    <input type="file" name="image1" accept="image/*" required id="id_image1" />
    <label for="id_image2">cover picture</label>
    <input type="file" name="image2" accept="image/*" required id="id_image2" />

    <label for="id_tag">Name:</label> <input type="text" name="tag" maxlength="50" required id="id_tag" />
    <button type="submit" class="button">Upload</button>
  </form>
</div>

Answer №1

To achieve this layout, use CSS Grid along with some padding.

.wrap,
.field-container {
  display: inline-grid;
}

.field-container {
  grid-template-columns: 1fr auto;
  padding-bottom: 0.5rem;
}

.field-container label {
  padding-right: 2rem;
  text-align: right;
}
<div class="wrap">
  <div class="field-container>
    <label for="profilePic">Profile picture</label>
    <input type="text" id="profilePic">    
  </div>  
  <div class="field-container">
    <label for="coverPic">Cover picture</label>
    <input type="text" id="coverPic">    
  </div>    
  <div class="field-container">
    <label for="name">Name</label>
    <input type="text" id="name">    
  </div>      
</div>

Link to example on jsFiddle

Answer №2

I have made adjustments to your code. Please review it to see if it aligns with your desired outcome:

<div class="container">
   <form method="post" enctype="multipart/form-data" id="form">
      <div class="rows">
         <div class="column">
            <label for="id_image1">Profile Picture</label>
            <input type="file" name="image1" accept="image/*" required id="id_image1" />
         </div>
         <div class="column">
            <label for="id_image2">Cover Picture</label>
            <input type="file" name="image2" accept="image/*" required id="id_image2" />
         </div>
         <div class="column">
            <label for="id_tag">Name:</label> <input type="text" name="tag" maxlength="50" required id="id_tag" />
            <button type="submit" class="button">Upload</button>
         </div>
      </div>
   </form>
</div>
<style>
   input,
   select,
   textarea {
   width: 55%;
   padding: 12px;
   border: 1px solid #ccc;
   box-sizing: border-box;
   margin-left: 20px;    
   }
   label {
   width:30%;
   float:left;
   }
   #form{
   width:100%;
   }
   .container {    
   width:40%;
   margin:auto;
   }
   .rows{
   width:100%;
   display:block;
   }
   .column{
   width:100%;
   display:inline-block;      
   }
</style>

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

Creating a sticky navigation bar in a CSS Grid layout

Using a grid for the first time and attempting to make the nav-bar sticky, I initially used: position: sticky; top: 0; without any success. Subsequently, trying: position: fixed; resulted in undesired consequences. Desiring the nav-bar ...

Move the components over to the right

How can I vertically align the user and the search bar on the right side of the page? #search { float: right; margin-top: 9px; width: 250px; } .search { width: 230px; height: 30px; position: relative; line-height: 22px; } ...

Add a stylish border to your image within a container of fixed width

I am facing a challenge with a fixed width DIV element. Inside this element, there is a second DIV containing only an IMG element. My goal is to add a border to the image without exceeding the boundaries of either of the enclosing DIV tags. Solution #1: ...

What is the best way to adjust the height of a Div to be 100%?

I've been struggling to make the .footer and the div .content have a height of 100%. While I know how to get the footer to stick at the bottom, I can't seem to make the content div reach the bottom of the page. Increasing the min-height on the co ...

How to make a DIV element the same width as a TABLE element

Within my container DIV, there are three elements: two banner DIVs (representing a header and footer) and a wide TABLE. Despite the horizontal scrolling required for the large TABLE, I need the banner background colors to extend the full length of the DIV. ...

Instructions for developing an HTML element slider using mouse dragging

I've come across plenty of slider plugins that either only allow clicking to view the next image, or if they do support mouse drag or touch capabilities, they are limited to images. Does anyone know of a plugin or method to create a mouse drag slider ...

Challenging design with CSS shapes

Can this specific shape be created using just one HTML element? I am looking to use it for image cropping purposes, so having only one element would make the process easier ...

Incorporating a dynamic fill effect into an SVG pie chart

I am looking to animate a pie chart with a variable value that is unknown upon loading. Assuming I fetch the value promptly and convert it into a rounded percentage : var percentage = Math.round(sum * 100 / total); Next, I place this value here : <di ...

Attempting to create a dynamic grid layout utilizing CSS to ensure optimal responsiveness

I am working on creating a webpage layout similar to the one in the link below: The maximum width for the layout is set to 1600px. However, I am facing challenges in making it fully responsive. This is because all the boxes are given widths in percentages ...

Using jQuery to update the CSS background of a selected element among multiple elements sharing the same class

I am currently developing a basic jQuery script that will enable the background color of the clicked element to change. Below is the code I have so far: <dt> <input id="p_method_banktransfer" value="banktransfer" type="radio" name="payment[metho ...

What is the best way to align a value within CardActions in Material UI?

I'm currently facing an issue with my website design. Here's a snapshot of how it looks: https://i.sstatic.net/UuBJJ.png Additionally, here is the code snippet related to the problem: <CardActions> <Typography style={{ fon ...

Error Icon Displayed Incorrectly in Dynamically Generated List Items in Phonegap Android App

My attempt to dynamically create a list item with JSON response and set the data-icon to "check" is not working as expected. The result always shows "arrow-r" data-icon instead. This is how I generate the list item: function CallvarURL(url) { var res ...

Enhancing your Vue web application with Bootstrap: A guide to customization

Utilizing bootstrap-4 within my Vue web application has been challenging. I am unable to customize it as explained here. My index.html utilizes Bootstrap CDN, as shown below: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

Adjust the text placement on the toggle switch to turn it On or Off

I am looking to create a toggle switch with a small size. I found some code on Stack Overflow that I tried but it didn't work as expected. The code snippet I attempted to use is from another helpful post. My goal is to have the "on" text align to th ...

Show the time with AM/PM without displaying the year, month, or day

Currently, I am struggling to show the time as AM when my website loads using the format mm-dd-yyyy --:-- AM in a datetime-local input. The value attribute of datetime-local is causing some confusion for me. ...

Troubleshooting height adjustment for header and footer in CSS with dynamic content not functioning properly on Safari for macOS and Safari for iOS (jsBin)

I recently came across a solution by @RokoC.Buljan, which works perfectly on Chrome and Firefox. However, I encountered an issue with Safari where the content section does not scroll properly and the footer sticks to the bottom of the content, making it di ...

Only the initial external CSS ID is functional, while the second one is inactive

I am facing an issue with my table where I have applied an external CSS that uses alternating shaded rows. My aim is to have specific table cells with different background and font colors - one cell with a green background and red font, and another with a ...

Guide on displaying a list of images in a single line with rows and columns

I am in search of a solution to create the user interface depicted in the attached image using React. Additionally, this post includes a link to another post on the same site: How to add a single line image list that is horizontal scrollable (in react js). ...

I am experiencing an issue where the Flex table is not displaying more than 50 rows

I am experiencing an issue where I can't scroll back up with the scrollbar. The table is dynamically filled with data from a database, and when it gets too long, I am unable to scroll back up. Any suggestions on how to solve this problem? If you need ...

Tips for positioning a box on top of a map in a floating manner

I am trying to figure out how to position the div with class box on top of the map in this jsbin. Can someone help me achieve this? Below is the CSS code I have for styling the box and body. body { font-family: "Helvetica Neue", Helvetica, sans-serif; ...