皆さんこんにちは！
minablog管理人のみなです。
今回は大好評いただいている「小学生でもわかるHTML/CSSタグ講座」として、inputタグをご紹介します。
inputタグを理解できるようになれば、ウェブサイトのレイアウトがぐっと本格的になるほか、使いやすくなります。
ぜひ正しく理解して、使いこなせるようになってください！
今までの小学生でもわかるHTML/CSS講座のまとめはこちらからご覧くださwww.mkmkblog.site
inputタグとは？
文字入力窓や入力フォームを作るためにつかうタグです。
《inputタグの特徴》
①テキスト入力欄や実行ボタン等に使われる。
②<body>内に書かれる
③書くフィールドにデータが入力され<form>のmethod属性により、指定した転送方法
でデータを送ることができる。
※これはJQueryの知識が必要です。
④フォーム部分と項目名（ラベル）を関連づける<label>タグとよく一緒に使われる。
③でも紹介していますが、inputタグを使って作成した入力フォームに集まったデータは集計することができます。
ただし、データを転送して集計という流れはHTMLとCSSではできず、JQueryという異なる言語で設定する必要があるので、今回は割愛します。
HTML/CSS講座が終わったらJQueryのご紹介もしたいと思いますので、その際にまたご紹介します。
inputタグ一覧
<label><input type="text">〇〇</label>
このタグはテキスト入力欄を作るときのコードです。
例では〇〇の部分に「あいうえお」と記述したので、フォームの右隣に表示されていますが、空白にした場合はフォームの右側は空白のままとなります。
入力欄にガイド文字を入れたいときは<input type="text" placeholder="〇〇">と記述すればガイド文字が入ります。
このガイド文字は実際に文字を記入すると消えてしまいます。
見え方はこちら
青い線で囲まれている入力フォームにガイド文字を入れてみたのですが、文字が真っ黒ではなくグレーになっているのがわかるでしょうか。
これは自動でグレーとなるため、CSSで指定する必要はありません。
このフォームは１行しか記入することができませんが２行以上記述してほしい場合は、
<textarea></textarea>を使えばOKです。
<label>〇〇<input type="text"></label>
上記の<label><input type="text"></label>の省略形です。
<label><input type="password"></label>
パスワードの入力ボックスで、パスを入力すると自動で”アスタリスク＊”もしくは”点・”になります。
一つ注意点としては、入力したパスワードは自動で暗号化されるわけではありません。
もし大切なパスワードを記入させる場合は暗号化する必要がありますが、暗号化はかなり複雑ですし違う言語を使用しなければなりません。
見え方はこちら
試しに”あいうえお”と記入してみましたが、ご覧のとおり点・になって表示されています。
<label><input type="checkbox"></label>
チェックボックスを作るコードです。
このコードを複数書くことでチェックボックスフォームが作れます。
チェックボックスは複数選択可能です。
コードはこちら
見え方はこちら
このようにcheckboxコードを複数書くことによって５つのチェックボックスが作れました。
このコードはいくつ書いてもいいので、例えば１００コード書いたとすると１００のチェックボックスが作られます。
<label><input type="radio"></lavel>
こちらはラジオボタンが作られるコードです。
checkboxコードと同様に複数のコードを書くことによって作ることができます。
ただし、checkboxとは違って複数選択をすることができませんのでご注意ください。
コードはこちら
見え方はこちら
コードにname属性をつけることでラジオボックスのグループを判別させ、複数のラジオボックスがある場合のグループ分けをすることが可能です。
珍しいinputタグ
ここからは珍しいinputタグを一気にご紹介します。
珍しいというか、ウェブサイトを閲覧する側が最新ブラウザである必要があるので、個人的にはあまり使いません。
ただ、このコードも知っておくとスタイリッシュなサイトをつくるときに役立つと思いますよ！
・色の選択
<p><input type="color"></p>
・日付の入力
<p><input type="date"></p>
・数字のみの入力
<p><input type="number"></p>
・長さで表せる
<p><input type="range">身長</p>
見え方はこちら
こんな感じですね。
数字のみ入力の部分は矢印を押すと数字がカウントされていきます。
まとめ
今回の「小学生でもわかるHTML/CSSタグ講座」inputタグ編はいかがでしたか？
inputタグを使えば入力フォームやチェックボックス、ラジオボタンを簡単に作ることが出来て便利です。
しかもフォームが作れるようになるとすごいプログラミング上級者な気分にもなってきます。個人的には。
なので、ぜひ練習して使いこなせるようになってください。
次回もどうぞよろしくお願いします。