Reputation:

How to design html form properly

I just started web development few days back so having problem in designing form. I am making an form using html and css but it is not designed as i need. I tried it by putting label and input in 1 div and then float label to left side and input to right side but its not work properly.

I want this

I designed this

Snippet

body,
html {
  margin: 0;
  padding: 0;
}

.form {
  width: 50%;
}

.group {
  width: 100%;
  margin: 20px;
}

.group label {
  float: left;
}

.inputrow input {
  float: right;
}

.inputrow input:not(.col-3) {
  width: 80%;
}

.col-3 {
  width: 20%;
}

.clear {
  clear: both;
}

<p>New Contact</p>
<hr style="height:1px;border:none;color:#333;background-color:#333;" />

<div class="form">
  <div class="group">
    <lable>Primary Contact</lable>
    <div class="inputrow">
      <select class="col-3">
        <option>Mr.</option>
        <option>Mrs.</option>
        <option>Ms.</option>
        <option>Miss.</option>
        <option>Dr.</option>
      </select>
      <input class="col-3" type="text" placeholder="First Name" name="FirstName" />
      <input class="col-3" type="text" placeholder="Last Name" name="LastName" />
    </div>
  </div>
  <div class="clear"></div>
  <div class="group">
    <label>Company Name</label>
    <div class="inputrow">
      <input class="col-1" type="text" placeholder="Company Name" name="CompanyName" />
    </div>
  </div>
  <div class="clear"></div>
  <div class="group">
    <label>Contact Email</label>
    <div class="inputrow">
      <input type="text" placeholder="Contact Email" name="Email" />
    </div>
  </div>
  <div class="clear"></div>
  <div class="group">
    <label>Contact Phone</label>
    <div class="inputrow">
      <input type="text" placeholder="Contact Phone" name="Phone" />
    </div>
  </div>
  <div class="clear"></div>
  <div class="group">
    <label>Website</label>
    <div class="inputrow">
      <input type="text" placeholder="Website" name="Website" />
    </div>
  </div>
  <div class="clear"></div>
  <div class="group">
    <label>Contact Type</label>
    <div class="inputrow">
      <input type="radio" name="contacttype" value="Customer">Customer
      <input type="radio" name="contacttype" value="Vendor">Vendor
    </div>
  </div>
</div>

Upvotes: 0

Answers (3)

NayDwe

Reputation: 649

You need to select Select box and radio. You should need to put some html.

body,html{
margin:0;
padding:0;
}
.form{
width:50%;
}
.group{
width:100%;
margin:20px;
}
.group label{
float:left;
}
.inputrow input,.inputrow select,.inputrow select{
float:right;
}
.inputrow input:not(.col-3){
width:80%;
 }
.col-3{
width:20%;
 }
.clear{
clear:both;
}
.inputrow input[type=radio]{
 width:auto;
 float:left;
}
.inputrow div{
  width:40%;
  float:right;
}

<body>
<p>New Contact</p>
    <hr style="height:1px;border:none;color:#333;background-color:#333;" />

<div class="form">
<div class="group">
<lable>Primary Contact</lable>
<div class="inputrow">
    <select class="col-3">
        <option>Mr.</option>
        <option>Mrs.</option>
        <option>Ms.</option>
        <option>Miss.</option>
        <option>Dr.</option>
    </select>
    <input class="col-3" type="text" placeholder="First Name" name="FirstName"/>
    <input class="col-3" type="text" placeholder="Last Name" name="LastName"/>
</div>
</div>
<div class="clear"></div>
<div class="group">
<label>Company Name</label>
<div class="inputrow">
    <input class="col-1" type="text" placeholder="Company Name" name="CompanyName"/>     
</div>
</div>
<div class="clear"></div>
<div class="group">
<label>Contact Email</label>
<div class="inputrow">
    <input type="text" placeholder="Contact Email" name="Email"/>
</div>
</div>
<div class="clear"></div>
<div class="group">
<label>Contact Phone</label>
<div class="inputrow">
    <input type="text" placeholder="Contact Phone" name="Phone"/>
</div>
</div>
<div class="clear"></div>
<div class="group">
<label>Website</label>
<div class="inputrow">
    <input type="text" placeholder="Website" name="Website"/> 
</div>
</div>
<div class="clear"></div>
<div class="group">
<label>Contact Type</label>
<div class="inputrow">
    <div>
    <input type="radio" name="contacttype" value="Vendor">Vendor
    </div>
     <div>
    <input type="radio" name="contacttype" value="Customer">Customer
    </div>
</div>
</div>
</div>       
</body>

Upvotes: 1

Sir Catzilla

Reputation: 321

The layout you want can be achieved by using the grid system. Example can be found here. where you devide each row up into its parts removing the need to float elements.

As for the actual styling I would suggest looking at the developer tools on the website your example is on and see what styling is applied to each element. Which on Chrome can be accessed by pressing F12 on the keyboard.

Upvotes: 0

Pierre Burton

Reputation: 2084

The example you're trying to achieve is clearly all left aligned.

You could go for a solution like this (simpler and cleaner) :

body,
html {
  margin: 0;
  padding: 0;
}

.form {
  width: 100%;
}

.group {
  width: 100%;
  padding: 20px;
  clear: both;
}

label,
input,
select {
  float: left;
}

label {
  width: 150px;
}

.m-right {
  margin-right: 20px;
}

<p>New Contact</p>
<hr style="height:1px;border:none;color:#333;background-color:#333;" />

<div class="form">
  <div class="group">
    <label>Primary Contact</label>
    <select class="m-right">
      <option>Mr.</option>
      <option>Mrs.</option>
      <option>Ms.</option>
      <option>Miss.</option>
      <option>Dr.</option>
    </select>
    <input class="m-right" type="text" placeholder="First Name" name="FirstName" />
    <input type="text" placeholder="Last Name" name="LastName" />
  </div>
  <div class="group">
    <label>Company Name</label>
    <input type="text" placeholder="Company Name" name="CompanyName" />
  </div>
  <div class="group">
    <label>Contact Email</label>
    <input type="text" placeholder="Contact Email" name="Email" />
  </div>
  <div class="group">
    <label>Contact Phone</label>
    <input type="text" placeholder="Contact Phone" name="Phone" />
  </div>
  <div class="group">
    <label>Website</label>
    <input type="text" placeholder="Website" name="Website" />
  </div>
  <div class="group">
    <label>Contact Type</label>
    <label><input type="radio" name="contacttype" value="Customer">Customer</label>
    <label><input type="radio" name="contacttype" value="Vendor">Vendor</label>
  </div>
</div>

Upvotes: 1

How to design html form properly

Answers (3)

Related Questions