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

フォームの作り方

スポンサーリンク

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

フォームタグの例
フォームの一例です

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

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

フォームを作るタグ

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

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

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

タグ 用途
<form> フォーム全体を囲む
<input type=”text”> 一行の文字入力欄
<input type=”radio”> ラジオボタン。複数の選択項目から一つだけ選ぶことができる
<input type=”checkbox”> チェックボックス。複数の選択項目を選ぶことができる
<input type=”submit”> 送信ボタン
<select> セレクトボックス
<option> セレクトボックスの選択項目を作成
<textarea> 複数行の文字入力欄
<label> フォームのラベル

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

スポンサーリンク

フォームの作り方

formタグの使い方

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

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

属性 用途
action データの送信先ページを指定
method データの送信方法の指定。POSTかGETを指定する
name フォームの名前を決める

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

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

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

inputタグの使い方

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

属性 用途
type=”text” 一行のテキスト入力欄になる
type=”search” 一行のテキスト入力欄。検索する用
type=”email” 一行のテキスト入力欄。メールアドレス用
type=”tel” 一行のテキスト入力欄。電話番号用
type=”url” 一行のテキスト入力欄。URL用
placeholder 入力欄にあらかじめ書かれている文字を指定
type=”radio” 複数の選択項目のうち一つだけを選べる
type=”checkbox” 複数の選択項目を選べる
type=”submit” 送信ボタンを作る
name ラジオボタンやチェックボックスの名前を指定
value ラジオボタンやチェックボックスにおいて、送信される選択肢の値
checked デフォルトで指定されている値を決める
src ボタンに使用したい画像のURL
alt ボタンに画像を埋め込んだ際に、画像の意味を説明するテキスト

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タグに指定できる属性

属性 用途
name セレクトボックスの名前
multiple シフトキー、コントロールキー(Macの場合はコマンドキー)で複数選択を可能にする

optionタグに指定できる属性

属性 用途
value 送信される選択肢の値
selected デフォルトで選択される項目を指定

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

<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タグのまとめ

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

ネット上でよく見かける入力欄にも、裏ではこんな風になっていたんですね

そう、実はフォームにはいろいろな役割があって、HTMLの指定の仕方もたくさんあったというわけさ。

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

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

https://doku-pro.com/?p=58
スポンサーリンク