日付入力フォームについて

Question

日付入力フォームを下記のコードを使って記述しました。

<div class="search">
　<form class="input-group">
　　<input type="text" name="search" class="form-control" placeholder="出発地">
　　<input type="text" name="search" class="form-control" placeholder="目的地">
　　<input type="date" name="date" class="form-control" placeholder="出発日">
　　<input type="date" name="date" class="form-control" placeholder="帰国日">
　　<input type="text" name="search" class="form-control" placeholder="旅行者人数">
　　<button type="button" class="btn btn-primary">
　　　<i class="fas fa-search"></i>
　　</button>
　</form>
</div> 

下記のように表示されている状態ですが、同じ四角枠内で、『年/月/日』の前に、『出発日』と表示させたいのですが、やり方がわかりません。初心者で、どうしたらいいのかイメージも湧かない状態です・・
何にか方法があればアドバイスください。よろしくお願いします。

Answer 1

bootstrapをご使用ですか？
それならば、input-group-textというボタンのような見出しが使用可能です。

html<div class="search">
　<form>
     <div class="input-group">
       <input type="text" name="search" class="form-control" placeholder="出発地">
       <input type="text" name="search" class="form-control" placeholder="目的地">
       <span class="input-group-text" id="basic-addon1">出発日</span>
       <input type="date" name="date" class="form-control" placeholder="出発日">
       <span class="input-group-text" id="basic-addon1">帰国日</span>
       <input type="date" name="date" class="form-control" placeholder="帰国日">
       <input type="text" name="search" class="form-control" placeholder="旅行者人数">
       <button type="button" class="btn btn-primary">
       <i class="fas fa-search"></i>
    </button>
   </div>
　</form>
</div>

ドキュメント（v5.0のものです。以前のバージョンでも同様のことは実現可能です）
https://getbootstrap.jp/docs/5.0/forms/input-group/

codepenでのデモ

Comments

[isykzk]

はい！bootstrapでした。
こちらで解決できそうです。ありがとうございます！；）

Answer 2

input type="date"では、placeholderの指定ができないので、その部分に、「出発地」と同じような方法で文字を表示させるのは不可能ではないでしょうか。
仮にできたとしても、placeholderですと、日付を入力したら「出発日」などの文字は見えなくなってしまうので、テキストボックスの上などに「出発日」という文字（label要素など）を表示する方が使いやすいフォームになるような気がします。