【完全版】HTMLで入力フォームを作ってみよう

フォームとは、ウェブサイトからその管理人もしくは企業などに直接お問い合わせするための入力欄です。

HTMLのフォームを作るタグを駆使すれば、図のような入力欄を作ることができます。
それぞれの入力欄は異なるタグからできています。
そして全体をformタグで囲っています。

それでは、HTMLのタグを使ってどのようにこれらのフォームを作っていくのか、詳しく見ていきましょう。

フォームを作るタグ

HTMLでフォームを作るタグは、ウェブページでのお問い合わせフォームを作ることができます。

ただし、タグだけでは送信機能を完成させることができません。
HTMLはブラウザや検索エンジンにこの機能は何かを説明するためのものであったり、見た目の部分を作るだけなので、入力された内容を送信するためには別のプログラミング言語と組み合わせる必要があります。

フォームを作るためのタグには次の種類があります。

使い方次第で、いろいろな種類の入力欄を作ることができます。それでは、それぞれどのように使うのか見ていきましょう。

フォームの作り方

formタグの使い方

作りたい入力欄全体を<form></form>で囲みます。また、formタグには指定できるいくつかの属性があります。

主な属性は次の通りです。

例えば次のようにフォームタグを作成します。

<form action="example.php" method="POST" name="contact-form">
    ここに入力フォームの部品が入ります。
</form>

actionでexample.phpと指定していますが、入力されたデータを処理するにはHTMLやCSSだけではできないので、phpなどの他のプログラミング言語で処理する必要があります。
methodではデータの送信方法であるPOSTかGETを指定できます。
ただし、これらはちょっと難しい概念なので、最初のうちはあまり気にしないで大丈夫です。

inputタグの使い方

フォームタグの中に埋め込むことができるパーツの一つであるinputタグについて説明します。
これにも指定できるいくつかの属性があります。

inputタグにtype=textを指定

例えば次のようなコードを書いてみましょう。

<form action="example.php" method="POST" name="contact-form">
    名前<input type="text" placeholder="名前を入力してください">
</form>

placeholderには入力欄にあらかじめ記載されている文字を入力します。
すると実際にブラウザ上では次のように表示されます。

inputタグにtype=”email”を指定

type=”email”を属性として指定すると、「これはemail入力欄ですよ」とブラウザに知らせることができます。
type=”text”と見た目が変わることはありません。また、emailの部分をtelとすれば電話番号、urlとすればURLを入力するという意味になります。

<form action="example.php" method="POST" name="contact-form">
    
    <p>名前：<input type="text" placeholder="名前を入力してください"></p>
    
    <p>メールアドレス：<input type="email" placeholder="メールアドレスを入力してください"></p>
        
</form>

するとブラウザ上では次のように表示されます。

inputタグにtype=”radio”を指定する

ラジオボタンの作り方も実際に見てみましょう。ラジオボタンでは複数の選択肢から一つだけ選ぶような入力欄を作ることができます。
name属性の値をそろえることで、一つのグループとしてまとめることができます。また、valueでは送信される値を指定します。checkedを付けると、デフォルトでの選択の値を指定できます。

<form action="example.php" method="POST" name="contact-form">
    
    <p>名前：<input type="text" placeholder="名前を入力してください"></p>
    
    <p>メースアドレス：<input type="email" placeholder="メールアドレスを入力してください"></p>
    
    <p>性別：<input type="radio" name="gender" value="男">男
            <input type="radio" name="gender" value="女" checked>女
            <input type="radio" name="gender" value="その他">その他</p>
              
</form>

すると次の様にブラウザには表示されます。

inputタグにtype=”checkbox”を指定する

次に複数の選択肢を選べるチェックボックスを作ってみましょう。次の様にコードを追加してみてください。

<form action="example.php" method="POST" name="contact-form">
    
    <p>名前：<input type="text" placeholder="名前を入力してください"></p>
    
    <p>メースアドレス：<input type="email" placeholder="メールアドレスを入力してください"></p>
    
    <p>性別：<input type="radio" name="gender" value="男">男
            <input type="radio" name="gender" value="女" checked>女
            <input type="radio" name="gender" value="その他">その他</p>
    
    <p>好きな食べ物：<input type="checkbox" name="food" value="臭豆腐" checked>臭豆腐
                    <input type="checkbox" name="food" value="納豆">納豆
                    <input type="checkbox" name="food" value="カエル">カエル</p>
                    
</form>

するとブラウザ上には次のように表示されます。

inputタグにtype=”submit”を指定する

type=submitとすることで送信ボタンを作成できます。次の様にコードを追加してみましょう。
value属性に指定した値がボタンの文字として表示されます。

<form action="example.php" method="POST" name="contact-form">
    
    <p>名前：<input type="text" placeholder="名前を入力してください"></p>
    
    <p>メースアドレス：<input type="email" placeholder="メールアドレスを入力してください"></p>
    
    <p>性別：<input type="radio" name="gender" value="男">男
            <input type="radio" name="gender" value="女" checked>女
            <input type="radio" name="gender" value="その他">その他</p>
    
    <p>好きな食べ物：<input type="checkbox" name="food" value="臭豆腐" checked>臭豆腐
                    <input type="checkbox" name="food" value="納豆">納豆
                    <input type="checkbox" name="food" value="カエル">カエル</p>
    
    <p><input type="submit" value="送信する"></p>
    
</form>

するとブラウザ上では次のように表示されます。

selectタグ、optionタグでのフォームの作り方

selectタグとoptionタグをフォームに加えると、セレクトボックスを作ることができます。

指定できる属性は以下の通りです。

selectタグに指定できる属性

optionタグに指定できる属性

では、次のコードを書いてみてください。

<form action="example.php" method="POST" name="contact-form">
    好きなユーチューバー
  <select name="YouTuber">
      <option value="ヒカル">ヒカル</option>
      <option value="ラファエル">ラファエル</option>
      <option value="てんちむ">てんちむ</option>
      <option value="ぷろたん">ぷろたん</option>
  </select>
</form>

すると次のように選択項目がドロップダウンしてくるようなセレクトボックスを作ることができます。

textareaタグで複数行テキスト入力欄を作る

<textarea>タグを用いれば、一行だけの<input type=”text”>と違い、複数行のテキスト入力欄を作ることができます。次のようなコードを書いてみましょう。

<form action="example.php" method="POST" name="contact-form">
    <textarea name="message" placeholder="メッセージを入力してください"></textarea>
</form>

するとブラウザには次のように表示されます。

labelタグでより使いやすく

先ほどのラジオボタンやチェックボックスはクリックできる範囲が小さいことに気が付きましたか？
それでは、使い勝手が悪いので、文字も含めてクリックできるようにするためにlabelタグが用いられます。

例えば、labelを設定しないと次のように四角い部分だけしかクリックすることができません。

<form action="example.php" method="POST" name="contact-form">
    好きな食べ物：
    <input type="checkbox" name="food" value="臭豆腐" checked>臭豆腐
    <input type="checkbox" name="food" value="納豆">納豆
    <input type="checkbox" name="food" value="カエル">カエル
</form>

次に、labelを設定してみましょう。labelを使うには、まずinputタグの中にidを設定して、labelタグの中にfor属性を指定して関連付けをさせます。

<form action="example.php" method="POST" name="contact-form">
    好きな食べ物：
    <input type="checkbox" name="food" value="臭豆腐" checked id="shu">
    <label for="shu">臭豆腐</label> 
    
    <input type="checkbox" name="food" value="納豆" id="natto">
    <label for="natto">納豆</label>

    <input type="checkbox" name="food" value="カエル" id="frog">
    <label for="frog">カエル</label>
</form>

すると、文字をクリックしても選択することが可能になります。

formタグのまとめ

以上がフォームタグの(ほぼ)すべてです。

入力フォームを作る際の参考になれば幸いです。

その他タグに関しては、こちらの記事を参考にしてみてください。