【HTML入門】チェックボックスなどの入力フォームをマスターしよう

みなさんこんにちは!htmlで入力フォームを作るとき、様々な部品を用意しなければいけませんよね?様々な部品を適切に作成できていますか?今日はそんな入力フォームで使う部品の有名なものを3つ紹介していきたいと思います!

入力フォームの種類

入力フォームには、ユーザーに入力を促すためのもので、たくさんの部品がありますが中でもよく使うのが、チェックボックス、ラジオボタン、セレクトボックスの3つではないでしょうか?

他にもありますが、今日はその3つについて詳しく説明していくのでその使い分けや属性について詳しくわかっていない方はこれを機に完全に理解してしまいましょう!

checkboxの使い方をマスターしよう

まずは、チェックボックスです。チェックボックスは皆さんおなじみのアンケートなどよく出てくるあれですね。

チェックボックスの特徴は複数のボックスにチェックを入れることができるということです。実際に作ってみましょう。

<!DOCTYPE html>
<html lang="jp" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body style="background-color: grey;">
      <input type="checkbox" name="namae" value="atai">
    </body>
</html>


このように、チェックボックスが表示されました。

<!DOCTYPE html>
<html lang="jp" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body style="background-color: grey;">
        <input type="checkbox" name="namae" value="atai">
        <input type="checkbox" name="namae" value="atai2">
        <input type="checkbox" name="namae" value="atai3">
    </body>
</html>

このように複数かいてやると、チェックボックスを複数選択できることも確認できますね。ここで大切なのは、checkboxというHTMLタグはなくcheckboxはinputタグの属性であるという点です。

次の章でinputタグの属性について詳しくみてきましょう。

type属性

先程、checkboxはinputタグの属性と言いました。つまり、コードを見て分かるようにinputタグのtype属性にcheckboxをつけることによってチェックボックスは作成されます。

後述しますが、ラジオボタンを作るためには、type属性に、radioをつけることで作成できます。

name属性

次に気になるのはname属性ですね。これは、checkboxに名前をつけることができます。名前をつけることで例えば、JavaScriptでそのチェックボックスに何か動きをつけたいときや、グループ化したいときなどに指定することができます。

value属性

次はvalue属性ですね。valueも名前の通りそのタグが渡す値を指定することができます。inputタグは大体formタグの中で用いるため、formで送信された値がどんなものなのか指定してやらなければなりません。

上記コード例では、atai1とatai2のvalueをもつチェックボックスにチェックが入っていますね。つまり、このままformを送信すればatai1とatai2といった値が取得できるわけです。

checked属性

こちらは、デフォルトでチェックした状態にするという属性です。

<!DOCTYPE html>
<html lang="jp" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body style="background-color: grey;">
        <input type="checkbox" name="namae" value="atai">
        <input type="checkbox" name="namae" value="atai2" checked>
        <input type="checkbox" name="namae" value="atai3">
    </body>
</html>

このようにかいてやると、

このように最初からチェックされていますね。

チェックボックスをデザインしてみよう

基本的にはチェックボックスはそのまま使うことが多いですが、中にはチェックボックスのデザインを変えたいという方もいると思います。なのでここでは、チェックボックスのデザインを変える方法を説明していきます。

まずはコードをみていきましょう。

<!DOCTYPE html>
<html lang="jp" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <style>
          body{
            background-color: grey;
          }
          input[type=checkbox] {
            display: none;
          }
          label{
            margin: 5px;
              border: 2px solid #f00;/
          }
          input[type="checkbox"]:checked + label {
            background: #fff;
          }
        </style>
    </head>
    <body>
      <input type="checkbox" name="namae" value="atai" id="check_1">
      <label for="check_1">check_1</label>
      <input type="checkbox" name="namae" value="atai2" id="check_2">
      <label for="check_2">check_2</label>
      <input type="checkbox" name="namae" value="atai3" id="check_3">
      <label for="check_3">check_3</label>
    </body>
</html>

少し長くなりましたが、何も難しいことはありません。

まず、新しいチェックボックスにするため既存のものは必要ないので10行目で「display: none;」をかけてやります。そして、各チェックボックスにラベルを付与してやり、idとforで各チェックボックスとlabelを紐づけます。

あとは、好きなスタイルを加えればよいのですが今回の例ではチェックボックスを赤枠で囲み押されたときに白色になるようなスタイルを加えました。

スタイルは自由ですが、チェックボックスをdisplay: none;しているのでlabelを付与して各チェックボックスと紐付けるということを忘れないようにしましょう。

radioボタンの使い方をマスターしよう!

次にラジオボタンについてみていきましょう。ラジオボタンとはチェックボックスとは違いいずれか一つにしかチェックできないボタンです。

チェックボックスの一つしかチェックできない版だと思ってもらって差し支えありません。先程少し書きましたが、ラジオボタンもinputタグのtype属性に記述してやることで実装できます。コードをみていきましょう。

<!DOCTYPE html>
<html lang="jp" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body style="background-color: grey;">
        <input type="radio" name="namae" value="atai">
        <input type="radio" name="namae" value="atai2">
        <input type="radio" name="namae" value="atai3">
    </body>
</html>

きちんと実装できていますね。また、一つしかチェックできないことも確認できます。inputタグの中の一つですので他属性については、チェックボックスと同じです。

selectboxの使い方をマスターしよう!

さて、最後はselectboxについてみていきましょう。セレクトボックスもみなさんがよく知っている押したら選択肢がいっぱいでてくれるあれですね。セレクトボックスはinputタグのtype属性で実装するのではなく、selectタグを使います。

selectタグはoptionタグとセットで使います。ulタグ、liタグをセット使いようなものです。selectタグでセレクトボックスを指定して、optionタグでその中身を書いていきます。

<!DOCTYPE html>
<html lang="jp" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body style="background-color: grey;">
        <select name="pre">
            <option value="tokyo">東京</option>
            <option value="osaka">大阪</option>
            <option value="fukuoka">福岡</option>
            <option value="hokkaido">北海道</option>
        </select>
    </body>
</html>

このようにして書いていきます。


きちんとできていますね。

name属性やvalue属性などの役割はinputタグと同じです。しかし、selectタグにしか存在しない属性もあるのでみていきましょう。

size属性

size属性とは、一度に表示する行数を指定し、デフォルトは1になっています。大体1で使うので、特にいじることの少ない属性ではありますが、

<!DOCTYPE html>
<html lang="jp" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body style="background-color: grey;">
        <select name="pre" size="4">
            <option value="tokyo">東京</option>
            <option value="osaka">大阪</option>
            <option value="fukuoka">福岡</option>
            <option value="hokkaido">北海道</option>
        </select>
    </body>
</html>

このよういかいてやると、

デフォルトで4行表示されていますね。

multiple属性

本来セレクトボックスは一つしか選択できません。しかしこのmultiple属性を使うと、複数選択が可能になります。

<!DOCTYPE html>
<html lang="jp" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body style="background-color: grey;">
        <select multiple name="pre">
            <option value="tokyo">東京</option>
            <option value="osaka">大阪</option>
            <option value="fukuoka">福岡</option>
            <option value="hokkaido">北海道</option>
        </select>
    </body>
</html>

このようにかけば画像のように、複数選択できていますね。

まとめ

いかがでしたか。今日は入力フォームで使う代表的な部品のcheckbox、radiobutton、selectboxについて紹介してきました。どれもよく使うものなので、必ず使えるようにマスターしておきましょう!それでは!!

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

かい

かい

日向徹かこよすぎか

[email protected]