Как добавить к метке и ввести в одну строку (HTML) - PullRequest
Новая
       0

Как добавить к метке и ввести в одну строку (HTML)

2 голосов
/ 10 марта 2020

Я пытаюсь сделать метку Two и ввести в одну строку, может кто-нибудь помочь мне построить эти формы, как это. Я хочу сделать это как этот образ. Мне нужно сделать ввод ниже метки и их в одну строку Изображение 

.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

Ответы [ 2 ]

1 голос
/ 10 марта 2020

Вам нужно использовать CSS, чтобы сделать стиль формы таким. Я создал пример кода в скрипте JS на основе ваших требований.

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>
0 голосов
/ 10 марта 2020

Пытаетесь ли вы сделать так, чтобы метка появлялась рядом с полем ввода, или чтобы поля ввода отображались рядом, как показано на вашей картинке?

Если вы используете bootstrap, вы можете найти это решение полезно: Форма встроенная внутри горизонтальной формы в твиттере bootstrap?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...