

### 解決したいこと

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

![スクリーンショット 2021-10-13 12.53.07.png](https://qiita-image-store.s3.ap-
northeast-1.amazonaws.com/0/1966886/95f07def-8a6f-cdd3-5ba0-e30d1c0c7619.png)

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

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

![スクリーンショット 2021-10-13 12.58.25.png](https://qiita-image-store.s3.ap-
northeast-1.amazonaws.com/0/1966886/3612cbdc-1298-6caf-7eed-815312e116fe.png)

### 自分で試したこと

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

[code]

    form {
        bordercollapse: collapse;
        backgroundcolor: gray;
    }
    
[/code]

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


CC BY-SA 4.0
2021-10-13T04:12:33.700
83060
2021-10-13T07:09:28.243
2021-10-13T05:43:48.533
3060
48015
question
html css
フォームの作成について


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

この前提で回答しますが

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

[code]

    <input placeholder="名前">
[/code]

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

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

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

[code]

    <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>
[/code]


CC BY-SA 4.0
2021-10-13T07:09:28.243
83067
2021-10-13T07:09:28.243
83060
answer