スライドショー

【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

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

かい

かい

日向徹かこよすぎか

[email protected]

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説