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

2024年3月1日

かい

みなさんこんにちは！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>