0

解決したいこと

スクショのようなフォームを作りたいと思っているのですが、なかなか思ったように外観が調整できずに困っています。

スクリーンショット 2021-10-13 12.53.07.png

発生している問題・エラー

ググってフォームの作成の仕方を手当たり次第調べているのですが、こういった入力欄が罫線でかこってあるフォームの作成の仕方しか見当たりません。

スクリーンショット 2021-10-13 12.58.25.png

自分で試したこと

ググって出てきた、罫線でかこってあるフォームにCSSで

form {
    bordercollapse: collapse;
    backgroundcolor: gray;
}

などデザインを調節して作りたいフォームに近づけようとしているのですが、うまくいきません。
どなたかこういったフォームの作り方がわかる方、ぜひご教授をお願いいたします。

2
  • 1
    そもそも何をどう近づけたいのか具体的に記述してもらってもいいですか?まずは罫線をなくして背景色を変えたい?また当たっているスタイルの調査であればF12キーを押してもらって適用されているstyleを調査することもできます。
    – keitaro_so
    2021年10月13日 5:14
  • フォームの入力欄は何も装飾せずとも枠線で囲われています。理想形はおそらく入力欄の中に入力すべき項目名が表示されている (入力を始めると消える?) みたいな表示なんじゃないかと。 / 今回のような場合には、参考にしたページのURLも質問に含めておくとよいと思います。
    – cubick
    2021年10月13日 5:45

1 件の回答 1

1

おそらく入力欄の中に入力すべき項目名が表示されている

この前提で回答しますが

枠の中にラベル名をいれたいだけなら input タグの属性に placeholder をつけるだけでできます
この場合は入力をはじめると消えます

<input placeholder="名前">

入力中もラベルを残したいとかになると
フローティングラベルという技術なので
キーワードでググればサンプルが出てくると思います

やり方を覚えたいとかであれば説明してるブログの
CSSの書き方を覚える必要があると思いますが
単に結果だけほしいのであればライブラリを使ってしまうのが早いと思います

有名どころだと bootstrap とかで
https://getbootstrap.jp/docs/5.0/getting-started/introduction/
ここにあるCDNリンクと
https://getbootstrap.jp/docs/5.0/forms/floating-labels/
この数行かくだけで実現できます

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
  <label for="floatingInput">名前</label>
</div>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。