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

更新情報をお届けします!

無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます!
その他、更新情報・イベント情報を
お届けいたします。

シェア

ツイート

LINEで送る

Pocket

ブックマーク

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

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

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

フォームの各部品

フォームの各部品イメージ

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

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

フォームの例

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

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

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

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

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

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

 

今回はよく使われる

・テキストフィールド

・セレクトボックス

・ラジオボタン

・テキストエリア

・ボタン

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

最新情報をいち早くお届け!

無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます!
その他、更新情報・イベント情報を
お届けいたします。

 

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

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

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

テキストフィールド

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

 

See the Pen OKNMLO by ktk (@ramentabetaidesu) on CodePen.0

 

この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タグとはフォームの項目名と入力欄などの部品を関連づけるためのタグです。

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

 

See the Pen aeNdbb by ktk (@ramentabetaidesu) on CodePen.0

 

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

セレクトボックス

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

 

See the Pen MNyKWx by ktk (@ramentabetaidesu) on CodePen.0

 

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

ラジオボタン

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

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

 

See the Pen zgqrvO by ktk (@ramentabetaidesu) on CodePen.0

 

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

テキストエリア

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

 

See the Pen eqZJJw by ktk (@ramentabetaidesu) on CodePen.0

 

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

ボタン

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

 

See the Pen voGLXZ by ktk (@ramentabetaidesu) on CodePen.0

 

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

 

See the Pen wVGMzX by ktk (@ramentabetaidesu) on CodePen.0

 

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

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

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

更新情報をお届けします!

無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます!
その他、更新情報・イベント情報を
お届けいたします。

シェア

ツイート

LINEで送る

Pocket

ブックマーク

CATEGORY :
サイト制作
tree