【HTML&CSS】HTMLで入力欄を作る方法！

どうも皆さんこんにちは！kwです！

今回は、HTMLで入力欄を作成する方法を紹介します。

これができるようになると、お問い合わせフォームなどを作ることができ、使いこなすととても便利な技術なので是非覚えていってください！

1.入力欄の作り方

入力欄を作る方法はとても簡単です！

入力欄を作るには、inputというタグを使います。

こんな感じで使います↓

See the Pen Untitled by kw (@kw-webd) on CodePen.

どうです？ものすごく簡単ですよね！

また、inputタグは入力欄の作成だけでなく、さまざまなことに使えます。

2.inputタグの別の使い方

ということで、入力欄の作成の解説はもう終わりましたが、次にinputタグの別の使い方も見ておきましょう。

1.カラーピッカー

inputタグはカラーピッカーを作成するのにも使えます。

こんな感じです↓

See the Pen Untitled by kw (@kw-webd) on CodePen

これよく見ますよね〜！実はこんな簡単な一行で実現させることができます。

2.チェックボックス

See the Pen Untitled by kw (@kw-webd) on CodePen.

これもよく見ますね。

これをさらに複製すると、このようになります↓

See the Pen Untitled by kw (@kw-webd) on CodePen.

こんな感じで使うことができます。

3.パスワードの入力欄

一見普通の入力欄ですが、入力してみると先ほどのtype="text"との違いがわかると思います↓

See the Pen Untitled by kw (@kw-webd) on CodePen.

これもよく見ますね〜。

入力した内容が見えないのはセキュリティ面で安心ですね。

3.まとめ

どうでしたか？今回のさまざまなinputタグの使い方はごく一部の例で、もっとたくさんの使い方があります。

興味がある方は是非他の使い方も覚えてみてください！

今回も最後まで見てくれた方、ありがとうございました！

是非他の記事もご覧ください！