Showing both labels and input fields side by side with CSS developments

I'm having trouble getting the label and input elements to display on the same line for this form. I've tried using CSS properties like display, float, and clear, but the result is not what I intended.

Here is how the form should look: form

<header>
  <title> Registration form </title>
  <link rel="stylesheet" type="text/css" href="style.css">
</header>


<h2>Register here please ! </h2>

<form id="simpleform">
  <fieldset>
    <label for="name">Full Name </label>
    <input type="text" name="name" id="name">

    <label for="age">Age in Years </label>
    <input type="number" name="age" id="age">

    <label for="email">Email ID</label>
    <input type="email" name="email" id="email">

    <label for="email">Email ID</label>
    <input type="email" name="email" id="email">

    <label for="gender">Gender</label>
    <input type="radio" name="gender" value="male"> Male
    <input type="radio" name="gender" value="Female">Female<br>

    <label for="hobbies">Hobbies</label>
    <input type="checkbox" name="hobbies" value="Reading"> Reading Books
    <input type="checkbox" name="hobbies" value="movies"> Watching Movies
    <input type="checkbox" name="hobbies" value="Singing"> Singing

    <label for="country">Country</label>
    <select name="country">
      <option value="us">United States</option>
      <option value="India">India</option>
    </select>
    <br>

    <lable for="comments">Comments</lable>
    <textarea name="comments" id="comments" rows=5 cols="50"></textarea>

    <input type="submit">
    <input type="reset" value="Start Again">
  </fieldset>
</form>

Answer ā„–1

After revisiting my HTML and CSS code, I was able to achieve the desired outcome.

*{
    margin: 0;
    padding: 0;
}

body{
    font-family:verdana sans-serif;
    background-color: #99ffcc;
}


h2{
    margin-top: 100px;
    text-align: center;
    color: blue;
    
}

#simpleform{
    width: 500px;
    margin: auto;
    height: 400px;
    border: 1px solid red;
    background-color: #ccc;
    
    
}

label{
    text-align: right;
    clear: left;
    float: left;
    padding-right:13px;
    margin-top: 12px;
    width: 150px;
    
}


input,textarea {
   margin-top: 12px;
   width: auto;
    
}

input[type="email"]{
    margin-top:16px;}
    
input[type="radio"]{
    margin-top: 16px;
}

input[type="checkbox"]{
    margin-top: 16px;
}

input[type="number"]{
    margin-top:16px;
}
select{
    margin-top: 13px;
}

#buttons{
    margin-left:160px;
}

input[type="submit"]{
    margin-right:80px;
    background-color: white;
    padding: 10px;
    border-radius:10px;
    border: 1px solid black;
}

input[type="reset"]{
    margin-right:80px;
    background-color: white;
    padding: 10px;
    border-radius:10px;
    border: 1px solid black;}


input[type="submit"]:hover
{
  background-color: aquamarine;  
}

input[type="reset"]:hover
{
  background-color: aquamarine;  
}

input[type="text"],input[type="number"],input[type="email"]{
    width:200px;
    border: 1px solid black;
}
<html>
    <header><title> Registration form </title>
    <link rel="stylesheet" type="text/css" href="style.css"> 
    </header>
      
    <body>
    <h2>Register here please ! </h2>
        
        <form id="simpleform">
            
            
            <div>
            <label for="name">Full Name </label>
            <input type="text" name="name" id="name">
            </div>
                
            <div>
            <label for="age">Age in Years </label>
            <input type="number" name="age" id="age">
            </div>
            
            <div>
            <label for="email">Email ID</label>
            <input type="email" name="email" id="email">
            </div>
                
                
            <div>
            <label for="gender">Gender</label>
            <input type="radio" name="gender" value="male"> Male
            <input type="radio" name="gender" value="Female">Female<br>
            </div>
            
            <div>
            <label for="hobbies">Hobbies</label>
            <input type="checkbox" name="hobbies" value="Reading"> Reading Books
            <input type="checkbox" name="hobbies" value="movies"> Watching Movies
            <input type="checkbox" name="hobbies" value="Singing"> Singing
            </div>
            
            <div>
            <label for="country">Country</label>
            <select name="country">
            <option value="us">United States</option>
            <option value="India">India</option>
            </select><br>
            </div>
            
            <div>
            <label for="comments" id="lable-comment">Comments</label>
            <textarea name="comments" id="comments" rows=5 cols="50"></textarea>
            </div>
            
            <div id="buttons">
            <input type="submit">
            <input type="reset" value="Start Again"></div>
            
        </form>
    
    </body>
    



</html>

Answer ā„–2

There are numerous ways to create a 2-column layout, but one of the simplest and most straightforward methods is by using a table. Here's an example:

    <form id="simpleform">
        <fieldset>
        <table>
          <tr>
            <td><label for="name">Full Name</label></td>
            <td><input type="text" name="name" id="name"></td>
          </tr>
          <tr>
            <td><label for="age">Age in Years</label></td>
            <td><input type="number" name="age" id="age"></td>
          </tr>
          <tr>
            <td><label for="email">Email ID</label></td>
            <td><input type="email" name="email" id="email"></td>
          </tr>
          <tr>
            <td><label for="gender">Gender</label></td>
            <td>
              <input type="radio" name="gender" value="male"> Male
              <input type="radio" name="gender" value="Female">Female
            </td>
          </tr>
          <tr>
            <td><label for="hobbies">Hobbies</label></td>
            <td>
              <input type="checkbox" name="hobbies" value="Reading"> Reading Books
              <input type="checkbox" name="hobbies" value="movies"> Watching Movies
              <input type="checkbox" name="hobbies" value="Singing"> Singing
            </td>
          </tr>
          <tr>
            <td><label for="country">Country</label></td>
            <td>
              <select name="country">
                <option value="us">United States</option>
                <option value="India">India</option>
              </select>
            </td>
          </tr>
          <tr>
            <td><lable for="comments">Comments</lable></td>
            <td>
              <textarea name="comments" id="comments" rows=5 cols="50"></textarea>
            </td>
          </tr>
          <tr>
            <td></td>
            <td>
              <input type="submit">
              <input type="reset" value="Start Again">
            </td>
          </tr>
        </table>
        </fieldset>
    </form>

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

Canvg | Is there a way to customize canvas elements while converting from SVG?

Recently, I encountered an issue with styling SVG graphics dynamically generated from data. The SVG graphic appears like this: https://i.sstatic.net/xvIpE.png To address the problem, I turned to Canvg in hopes of converting the SVG into an image or PDF us ...

"Encountered an error while trying to access properties that

Struggling to create a practice menu with the functionality of making elements appear and disappear on click? If you are encountering issues with a class named "option" not working as expected, you are not alone. Clicking on nested objects like images or i ...

Display a selected portion of the background image

I'm currently facing an issue with one of the background images in my div element. The CSS I'm using is as follows: .myBox { background-image:url('....'); background-repeat:no-repeat; background-size:cover; } The background image d ...

Determining the dimensions of form elements in an inline layout using Bootstrap 3.1

Currently in the process of upgrading my application from version 3.0 to 3.1. The application is still in its initial phase, resembling more of a prototype with only a few pages created. Therefore, I didn't anticipate encountering many issues during t ...

Issue with D3: Events not triggering transitions

I am currently working on creating a bar chart using D3 in Angular4. // Enter Phase this.chart.selectAll('.bar') .data(this.barData) .enter() .append('rect') .attr('class', 'bar'); // Update Phase let bars ...

Move the DIV element to the bottom of the webpage

On my website, I have implemented a countdown timer and a responsive wallpaper. My goal now is to center the div at the bottom of the page and make sure it always stays there. I've tried some code snippets from StackOverflow, but they either gave me a ...

CSS: Including an item in a list causes the <div> to expand upwards on the page instead of stretching downwards

Iā€™m currently facing an issue with my list where, upon reaching a certain number of items (in this case 5), the list starts moving up the page instead of extending downwards as expected. I suspect that this problem is related to my use of CSS grid-templa ...

Achieving a transparent inner box-shadow effect on hover: a step-by-step guide

Is there a way to make the black ring transparent upon hover by changing box-shadow: 0 0 0 5px #000, 0 0 0 10px green to box-shadow: 0 0 0 5px transparent, 0 0 0 10px green? It doesn't seem to be working for me. Any suggestions on how to achieve this ...

increasing the size of the drop-down menu width

I have been struggling to adjust the width of my dropdown list box on my page. Despite my efforts, I cannot seem to make it bigger. Here is the code snippet causing me trouble: <div class="form-group row"> <div class="col-sm-1&quo ...

Imagine watching an image shrinking down and appearing in the center of the screen

I'm struggling with making the image smaller and centering it while keeping its original size. I'm using Bootstrap and need a solution for this issue. How can I make the image centered and shown in its original size? <div class="contain ...

Is there a way I can utilize a for-loop and if statement in JavaScript to present the information accurately within the table?

My current task involves fetching data via AJAX and then using a for-loop and if-statement to determine which goods belong in each shopping cart. Once identified, I need to display these goods in separate tables corresponding to each customer. Although the ...

Utilize the :not() selector in combination with the :first-child() selector

Currently, I am seeking a method to merge two css selectors together in order to target specific elements. The selectors I am attempting to combine are ':not' and ':first-of-type'. Here is the code snippet that represents my current sit ...

Technique for Retrieving Hyperlinks from HTML Resulting in Repetitive

I have been working on a web-crawler and encountered an issue while parsing the HTML content to extract links. The method I am using seems to be returning duplicate links, even though the HTML content is correct. Here is the code snippet: public static Ar ...

Store the output of JavaScript in a PHP variable

My objective is to convert any image to base 64 and then store the converted string in a PHP variable before inserting it into my database. JavaScript Code: function uploadFile() { if (this.files && this.files[0]) { var FR= new FileReader ...

Navigating with Vue Router on Internet Information Services (IIS)

I am encountering difficulties understanding why my routes are failing when I refresh my VueJS application hosted on IIS. Everything works fine during normal browsing, but once I press F5 or update view information through a button, a 403 error is thrown. ...

Using Django to render multiple images for a post

For the past few days, I have been attempting to provide the admin user with the ability to upload multiple images/slides for each individual post. One idea that came to mind was nesting a for loop inside the posts' for loop so that for every post, al ...

The height of the <div> element is not increasing along with the content inside. If I set the height to "auto

I encountered an issue with my webpage design. It has set dimensions with blue borders on the sides and bottom. The problem arises when I add Facebook comments to the page - as more comments are added, they extend beyond the bottom of the webpage, below ...

Experiencing an overflow of redirects in PHP contact form

I am encountering an issue on my website where there are too many redirects occurring when attempting to submit a form that is supposed to be sent via email. The connection between the form and email seems to be correct. Form Code: <section class=" ...

React Application not reflecting recent modifications made to class

My current project involves creating a transparent navigation bar that changes its background and text color as the user scrolls. Utilizing TailwindCSS for styling in my React application, I have successfully implemented the functionality. // src/componen ...

variances in CSS performance between local and remote hosting

My team and I are all using Internet Explorer 8 on Windows 7 Professional, with Visual Studio 2010 Premium. However, we have noticed that when running our application in localhost mode versus remote mode (on the server), there are differences in the CSS re ...