HTML registration form is created with gender option and now CSS failed to format radio buttons in table cells. How to put them in a aesthetic format with the help of external stylesheet?

I have tried MDN's guideline to create form and format them using external CSS. MDN suggested with table and table-cell format in the CSS file!

form.form-example {
  display: table;
}

div.form-example {
  display: table-row;
}

label,
input,
select,
option {
  display: table-cell;
  margin-bottom: 10px;
}
<form id="registration" action="" , method="post" class="form-example">

  <div class="form-example">
    <h1>Registration Form</h1>
  </div>

  <div class="form-example">
    <label for="fname">First Name:</label>
    <input name="first_name" type="text" id="fname" placeholder="Python" required>
  </div>


  <div class="form-example">
    <label for="lname">Last Name:</label>
    <input name="last_name" type="text" id="lname" placeholder="Buddha" required>
  </div>


  <div class="form-example">
    <label for="bdate">Date of Birth:</label>
    <input name="dob" type="date" id="bdate">
  </div>

  <div class="form-example">
    <label for="country">Country:</label>
    <select name="country" id="country">
      <option>USA</option>
      <option>Canada</option>
      <option>Mexico</option>
    </select>
  </div>


  <div class="form-example">
    <label for="email">Email:</label>
    <input type="email" id="email" required>
  </div>


  <div class="form-example">
    <label for="password">Password:</label>
    <input type="password" id="password" required>
  </div>

  <div class="form-example">

    <label>Gender:</label>

    <label for="male">Male</label>
    <input type="radio" id="male" name="gender" value="male" required>

    <label for="female">Female</label>
    <input type="radio" id="female" name="gender" value="female">

    <label for="other">Other</label>
    <input type="radio" id="other" name="gender" value="other">

  </div>

  <div class="form-example">
    <button>Submit</button>
  </div>

</form>
</div>

2 Answers

1
Silencesys On Best Solutions

I would suggest to change your css styles a bit. Because this:

label,input,select,option{
  display: table-cell;
  margin-bottom: 10px;
}

Will make all inputs on the page to be displayed as a table cell and thus there will be the spacing between radio inputs that you don't like.

I'm sure that there are other options, but what worked for me was removing your label,input,select,option line and adding .table-cell class so you can use it freely on any element that should be displayed as a table-cell.

form.form-example{
  display: table;
}

div.form-example{
  display: table-row;
  height: 30px;
}

.table-cell {
    display: table-cell;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="author" content="Kuldeep Gadhavi">
  <title>Registration Form</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

<form id ="registration" action="", method="post" class="form-example">

  <div class="form-example">
    <h1>Registration Form</h1>
  </div>

  <div class="form-example">
    <label for="fname" class="table-cell">First Name:</label>
    <input name="first_name" type="text" id="fname" placeholder="Python" required class="table-cell">
  </div>


  <div class="form-example">
    <label for="lname" class="table-cell">Last Name:</label>
    <input name="last_name" type="text" id="lname" placeholder="Buddha" required class="table-cell">
  </div>


  <div class="form-example">
    <label for="bdate" class="table-cell">Date of Birth:</label>
    <input name="dob" clsss="table-cell" type="date" id="bdate">
  </div>

  <div class="form-example">
    <label for="country" class="table-cell">Country:</label>
    <select name="country" class="table-cell" id="country">
      <option>USA</option>
      <option>Canada</option>
      <option>Mexico</option>
    </select>
  </div>


  <div class="form-example">
    <label for="email" class="table-cell">Email:</label>
    <input type="email" id="email" required class="table-cell">
  </div>


  <div class="form-example">
    <label for="password" class="table-cell">Password:</label>
    <input type="password" id="password" class="table-cell" required>
  </div>

   <div class="form-example">

     <label class="table-cell">Gender:</label>

     <div class="table-cell">
        <label for="male">Male</label>
        <input type="radio" id="male" name="gender" value="male" required>

        <label for="female">Female</label>
        <input type="radio" id="female" name="gender" value="female">

        <label for="other">Other</label>
        <input type="radio" id="other" name="gender" value="other">
    </div>

    </div>

  <div class="form-example table-cell" >
    <button>Submit</button>
  </div>

  </form>
</div>

</body>
</html>

The group with radio buttons is inside a div with class .table-cell therefore only this div will be rendered as a table cell. The radio inputs inside will remain rendered as inline elements and thus there will be no white-space between them. Also don't forget to add .table-cell class to other elements that should be rendered as table cells (so the inputs and labels.. I have also slightly modified the height of the .form-example, because I have removed the margin on .table-cell class.

1
Aniket Kariya On
label,input,select,option{
    display: table-cell;
    margin-bottom: 10px;
}

This makes every label, input, select and options as cell.enter image description here

that's why your radio buttons aren't displayed correctly. you can see that the male, female and other labels are displayed as cell (border property)

removing label tag should fix the problem. enter image description here

 Male
 <input type="radio" id="male" name="gender" value="male" checked>

 Female
 <input type="radio" id="female" name="gender" value="female">

 Other
 <input type="radio" id="other" name="gender" value="other">

By the way, consider using grid or flex for such things.