HTMLのフォームが思うように配置できない

前提・実現したいこと

現在

となっているものを
・IDと入力フォームの間をあけて下の名前と同じように並べたい
・ログアウトボタンの位置を右上にしたい
という2つの問題を解決して

このようにしたいです。

該当のソースコード

HTML
1<!doctype html>
2<html xmlns:th="http://www.thymeleaf.org">
3<head>
4<title>OK</title>
5<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
6<meta charset="UTF-8" />
7<link rel="stylesheet"
8	href="webjars/bootstrap/4.4.1/css/bootstrap.min.css" />
9<link rel="stylesheet" href="css/common.css" />
10<script src="webjars/bootstrap/4.4.1/js/bootstrap.min.js"></script>
11</head>
12<body>
13	<div class="container  my-5">
14
15		<div class="col-md-10">
16			<div>
17				<form th:action="@{/search}"
18					method="post">
19
20					<div class="col-md-4 d-inline-block">
21						<div class="form-group form-inline">
22							<label>ID </label> <input type="text" class="form-control">
23						</div>
24						<div class="form-group form-inline">
25							<label>名前</label> <input type="text" class="form-control">
26						</div>
27					</div>
28					<div class="col-md-4 d-inline-block">
29						<div class="form-group form-inline">
30							<label>受付日</label> <input type="text" class="form-control">
31						</div>
32						<div class="form-group form-inline">
33							<label>報告日</label> <input type="text" class="form-control">
34						</div>
35					</div>
36					<div class="col-md-2  d-inline-block">
37						<div class="form-group">
38							<input type="submit" class="form-control btn-primary" value="検索">
39						</div>
40					</div>
41				</form>
42				<form th:action="@{/loguot}"
43					method="post">
44					<div class="col-md-2  d-inline-block">
45						<div class="form-group">
46							<input type="submit" class="form-control btn-primary" value="ログアウト">
47						</div>
48					</div>
49				</form>
50			</div>
51		</div>
52	</div>
53
54
55
56</body>
57</html>

発生している問題・エラーメッセージ

①IDの文字列のあとのスペースが入らない
できればスペースを直接文字列として入れる方法ではなく何文字であってもそろえるのようなやり方が知りたいです。

②formを2つ並べたら左が1つ目のform、右が2つ目のformのようになるかと思いましたがそのようにはなりませんでした…
どうすれば並べられるでしょうか？

行動規範の内容に同意します

回答2件

ベストアンサー

bootstrapのクラスを把握しているわけではないので、適宜bootstrapのクラスに置き換えてください、

①IDの文字列のあとのスペースが入らない

できればスペースを直接文字列として入れる方法ではなく何文字であってもそろえるのようなやり方が知りたいです。

label自体にwidthを指定すると良いと思います。↓のような感じで

html
1<div class="form-group form-inline">
2  <label style="width:40px;">ID </label> <input type="text" class="form-control">
3</div>
4<div class="form-group form-inline">
5  <label style="width:40px;">名前</label> <input type="text" class="form-control">
6</div>

②formを2つ並べたら左が1つ目のform、右が2つ目のformのようになるかと思いましたがそのようにはなりませんでした…

どうすれば並べられるでしょうか？

すみません、ちょっと質問の意図がわからなかったのですが、冒頭の「・ログアウトボタンの位置を右上にしたい」に対しては、
検索ボタンもログアウトボタンもformタグ内から出してしまって、
label・input・buttonをすべてdisplay:block;にしてその3つの要素を囲んだ要素(divなど)でflexをかけ横並びにするとよいのではないでしょうか。

submitボタンをformから出す方法は↓の参考サイトをどうぞ
form外のボタンでsubmitできない時の対処法

投稿2020/02/17 06:48

編集2020/02/17 06:51