HTMLでの入力フォームの作り方

htmlの勉強を始めたみなさん、入力フォームの作成でとまどっていませんか？入力フォームはhtmlの中でも比較的難易度の高い項目です。

今回はhtmlでの入力フォームの作成について、ポイントを解説していきます。

フォームの各部品

入力フォームには様々な要素を持った部品があります。

下記画像のよくある入力フォームの例を参考に部品を見ていきましょう。

①テキストフィールド：名前やメールアドレス、電話番号など、1行テキストを入力します。

②セレクトボックス：プルダウンでメニューが表示され選択します。

③ラジオボタン：1つだけ選択するときに使用します。

④チェックボックス：ラジオボタンと似てますが、ラジオボタンとは違って複数選択可能です。

⑤テキストエリア：お問い合わせ内容など、自由に文章を入力できます。

⑥ボタン：内容を送信したり、リセットしたりすることできます。

 

今回はよく使われる

・テキストフィールド

・セレクトボックス

・ラジオボタン

・テキストエリア

・ボタン

上記5つの書き方を紹介します。

 

基本的なフォームの作り方

フォームを作成するには、まずformタグでマークアップします。その中に必要な要素を入れていきましょう。

テキストフィールド

名前やメールアドレスなど、フォームには必ずある項目ではないでしょうか。テキストフィールドはinputタグを使用して書いていきます。

 

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”OKNMLO” default_tab=”html,result” user=”ramentabetaidesu”]See the Pen <a href=’https://codepen.io/ramentabetaidesu/pen/OKNMLO/’>OKNMLO</a> by ktk (<a href=’https://codepen.io/ramentabetaidesu’>@ramentabetaidesu</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

 

このtype属性ですが、textの他に、emailやpassword、numberなどがあります。このtype属性を指定することで、フォームの入力コントロールの機能が変わってきます。

例えば、

text：1行テキストの入力欄

email：メールアドレス入力欄で、@を含む妥当なメールアドレスでない場合、送信ボタンを押すとエラーがでるようになっています。

password：パスワード用の入力欄で、入力内容が別の文字で表示されます。

number：半角数字のみが入力できます。

 

続いて、name属性ですが、<input type=”text”>など同じ要素が複数あった場合、分かりやすくそれらの部品に名前をつけて管理するものです。cssやjavascriptでタグ指定する際の、classやidと似たようなものだと思って構いません。formでデータが送信されるとき、name属性でつけた名前と、入力された値が1組になって送信されます。

<label>で使いやすいフォームに

ここでlabelタグを使ってより使いやすいフォームにしていきましょう。labelタグとはフォームの項目名と入力欄などの部品を関連づけるためのタグです。

「お名前」のテキスト部分をクリックしてみてください。

 

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”aeNdbb” default_tab=”html,result” user=”ramentabetaidesu”]See the Pen <a href=’https://codepen.io/ramentabetaidesu/pen/aeNdbb/’>aeNdbb</a> by ktk (<a href=’https://codepen.io/ramentabetaidesu’>@ramentabetaidesu</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

 

「お名前」の項目をクリックすると、その項目に関連する部品もクリックした時と同じ動作が起こります。

セレクトボックス

ユーザーにプルダウンメニューの中から選択してもらいたいときに使います。2〜3個の選択肢しかない場合はラジオボタンの方が分かりやすく良いのですが、生年月日など項目が多い場合はセレクトボックスを使いましょう。selectタグの中に選択肢となるoptionタグを入れて作成します。

 

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”MNyKWx” default_tab=”html,result” user=”ramentabetaidesu”]See the Pen <a href=’https://codepen.io/ramentabetaidesu/pen/MNyKWx/’>MNyKWx</a> by ktk (<a href=’https://codepen.io/ramentabetaidesu’>@ramentabetaidesu</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

 

選択できましたか？大根を選んだあなたは大当たりです。ここで使ったvalue属性は、指定した属性値がデータとして送信されます。value属性の指定がない場合は、optionでくくったテキストがデータとして送信されます。

ラジオボタン

2〜3個ほどの選択肢の場合に使いましょう。セレクトボックスもですが、選択できるのは1つのみです。複数選択できるようにしたいときはチェックボックスを使いましょう。

ラジオボタンはinputタグを使用し、type属性はradioにします。

 

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”zgqrvO” default_tab=”html,result” user=”ramentabetaidesu”]See the Pen <a href=’https://codepen.io/ramentabetaidesu/pen/zgqrvO/’>zgqrvO</a> by ktk (<a href=’https://codepen.io/ramentabetaidesu’>@ramentabetaidesu</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

 

こちらも項目名をクリックすると選択できるようにlabelタグを使用しています。

テキストエリア

テキストフィールドと同じく、お問い合わせフォームなどを作成するときは必要でしょう。こちらはtextareaタグを使用します。

 

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”eqZJJw” default_tab=”html,result” user=”ramentabetaidesu”]See the Pen <a href=’https://codepen.io/ramentabetaidesu/pen/eqZJJw/’>eqZJJw</a> by ktk (<a href=’https://codepen.io/ramentabetaidesu’>@ramentabetaidesu</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

 

ここでplaceholder属性を指定しました。入力の例となる文章を表示させます。inputタグの文字や数字を入力するtype属性のものにも指定できます。

ボタン

最後に内容を送信するボタンを書いていきましょう。とても簡単です。

 

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”voGLXZ” default_tab=”html,result” user=”ramentabetaidesu”]See the Pen <a href=’https://codepen.io/ramentabetaidesu/pen/voGLXZ/’>voGLXZ</a> by ktk (<a href=’https://codepen.io/ramentabetaidesu’>@ramentabetaidesu</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

 

入力内容をリセットするボタンも設置すると親切ですね。

 

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”wVGMzX” default_tab=”html,result” user=”ramentabetaidesu”]See the Pen <a href=’https://codepen.io/ramentabetaidesu/pen/wVGMzX/’>wVGMzX</a> by ktk (<a href=’https://codepen.io/ramentabetaidesu’>@ramentabetaidesu</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

 

まずはhtmlでフォームの基盤を理解しましょう

フォームをどうやって表示させるか、ユーザーにどんな情報を入力して欲しいかによって、設定するタグや属性、またルールなどが数多くあるので難しく感じますね。

入力フォームは多くの場面で扱うことがあるので、まずは基礎をしっかり身につけましょう。それからcssでスタイルをあてていくことをおすすめします。