How to add To label and input in one line (HTML)

user_12876213 0
Viewed 165

I'm trying to make a Two label and input in one line can anyone help me to build these forms like this. I want to make this like this image. i need to make input below the label and them in one lineImage

.first_line_left,.first_line_right,.first_line_right_far{
 float: left;width:50%;box-sizing: border-box;
}
label,input{
 width:10%,float:left;box-sizing:border-box;
}
input{
 padding: 8px 10px;box-sizing: border-box;
}
.first_line_left,.first_line_right,.first_line_right_far{
 width: 33.33%;float: left;padding: 10px;
 box-sizing: border-box;
}
<!DOCTYPE>
<html>
<head>
 <title>form</title>
</head>
<link rel="stylesheet" type="text/css" href="form.css">
<body>
 <h1>Personal Details</h1><hr>
<form action="" method="post">

<div class="First_line_left">
 <label for="title">Title</label>
 <select>
  <option value="0"></option>
  <option value="Mr">Mr</option>
  <option value="Miss">Miss</option>
  <option value="Mrs">Mrs</option>

 </select>
</div>
<div class="First_line_right">
 <label for="Delegate_First_name">Delegate First</label>
 
<input type="text" name="Delegate_First_name" placeholder="Delegate First name">
</div>
<div class="First_line_right_far">
<label for="Delegate_last_name">Delegate last Name</label>
<input type="text" name="Delegate_last_name" placeholder="Delegate last Name">
</div>


</div>

</div>
</form>
</body>
</html>

mgur.com/Muvyh.png

forms html
2 Answers

You need to use CSS to make the form style like that. I have created an example code in JS fiddle based on your requirements.

https://jsfiddle.net/rajeevRF/8vu73Lso/8/

.left_half,.right_half{width:50%;float:left;padding:10px;box-sizing: border-box;}
label,input,select{width:100%;float:left;box-sizing: border-box;}
input{padding:8px 10px;box-sizing: border-box;}
.first_left,.first_center,.first_right{width:33.33%;float:left;padding:10px;box-sizing: border-box;}
<html>
<form action="" method="post">
<div class="left_half">
<label>Name</label>
<input type="text" name="name" placeholder="Enter your name">
</div>
<div class="right_half">
<label>Phone</label>
<input type="text" name="phone" placeholder="Enter your phone">
</div>
<div class="first_left">
<label>Email</label>
<input type="text" name="email" placeholder="Enter your email">
</div>
<div class="first_center">
<label>Comments</label>
<input type="text" name="comment" placeholder="Enter your comment">
</div>
<div class="first_right">
<label>Subject</label>
<input type="text" name="subject" placeholder="Enter your subject">
</div>
</form>
</html>

user_51363540
user_130364980
Related