CODEWITHSUNDEEP
htmlforms
AN - Ceylon
AN - Ceylon

Reputation: 23

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

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

Upvotes: 2

Views: 623

Answers (2)

Rajeev
Rajeev

Reputation: 1498

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>

Upvotes: 2

Trevor Njeru
Trevor Njeru

Reputation: 326

Are you trying to make the label appear beside the input field, or make the input fields appear side by side as seen in your picture?

If you are using bootstrap, you may find this solution helpful: Form inline inside a form horizontal in twitter bootstrap?

Upvotes: 0

Related Questions