Skilled は Vue.js のオフィシャルパートナーです

HTMLYuki

HTMLフォーム(form)作成完全マニュアル！【初心者必見】

ウェブサイトを見ていると一度は以下の画像のようなデザインを見たことがあるかと思います。

フォーム例

情報を入力出来る項目は『フォーム』と言われています。

フォームに情報を入力し、登録ボタンを押すと入力した情報がサーバーに送られます。

フォームにはテキストをただ入力するだけでなく、複数の選択肢から選択する『セレクトボックス』、選択肢から複数選ぶことが出来る『チェックボックス』、複数の選択肢の中から一つだけ選択する『ラジオボックス』など様々あります。

それぞれのフォームのHTMLの入力方法からサーバーにどのように送るられるかまでのフォーム作成について徹底的に解説していきます。

この記事をご覧頂ければフォーム作成の知識については抑えられますので、ぜひご覧ください。

Input(インプット)フォーム

inputフォームは以下の画像のような１行で収まるようなテキストを入力したい時に利用するフォームです。

フォーム例

HTMLでの書き方は以下の通りです。

<input type="text" name="family-name">

書き方は非常にシンプルで<input>タグで囲み、
type属性とname属性を指定するだけです。
よってtype属性にフォームのタイプが変わるので、注意が必要です。
また、name属性はサーバーに送る際に必要になるので、複数入力する際は固有の名前を設定してください。
またinputタグは閉じタグが必要ないということも覚えましょう。

inputフォームが使われる例

  • 名前を入力したい時
  • 電話番号を入力したい時
  • メールアドレスを入力したい時
  • 住所を入力する時

チェックボックス

チェックボックスは複数の選択肢の中から複数選択したい時に利用します。

チェックボックス インプット

コードの書き方は、以下の通りです。

<label><input type="checkbox" value="1" name="check">check 1</label>

<label><input type="checkbox" value="2" name="check">check 2</label>

<label><input type="checkbox" value="3" name="check">check 3</label>

inputタグを使うのはテキストフォームと一緒ですが、type属性にはcheckboxを指定します。

value属性にはサーバー側に送信する値を記入します。

上記では1,2,3と設定していますが、サーバーにはcheckしたこのvalueの数字が送信されました。

checkboxのテキストを表示させるにはinputタグをlabelタグで囲みinputタグの後に表示したい文字を入力します。

【チェックボックスが使われる例】

  • 趣味の選択などで選択肢の中から複数を選ばせたい時

ラジオボタン

ラジオボタンはチェックボックスと似ていますが、選択肢のうち一つのみに利用されるフォームです。

ラジオボタン
コードの書き方もチェックボックスと非常に似ており、type属性をradioに変えるだけです。

<label><input type="radio" value="1">radio 1</label>

<label><input type="radio" value="2">check 2</label>

<label><input type="radio" value="3">radio 3</label>

【ラジオボックスが使われる例】

  • 性別の選択などで選択肢のうち一つを選ばせたい時

セレクトボックス

セレクトボックスはラジオボックスのように複数の選択肢の中から一つを選択するフォームです。

セレクト

コードでの書き方は以下の通りです。

<select name="selectbox">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
</select>

セレクトボックスは他のフォームと違い、<input>タグは使用せず<select>タグを使用します。

さらに、値を入れるタグは<option>タグを使用します。

ラジオボックスとセレクトボックスの使い分けは選択肢の量で使い分けるのが良いでしょう。

セレクトボックスは選択肢がクリックされるまで表示されないので、表示をすっきりさせることが可能です。

【セレクトボックスが使われる例】

  • 都道府県の選択など、選択肢が非常に多い場合

テキストエリア

最後にテキストエリアです。

テキストエリアはテキストフォームに似ていますが、改行が必要になるような長い文章を入力する際に有効です。

テキストエリア

コードの書き方は以下の通りです。

<textarea name="long-text" rows="5">詳細を入力してください</textarea>

<textarea>もinputタグを使用せずに固有のタグを使用します。

name属性などはテキストフォームと意味は一緒です。

rows属性とは『行数』のことを指します。

rows=”5″と設定することで5行分の長さのフォームを作ることが可能です。

また、textareaは必ず閉じタグが必要になります。

間に文字を入力することで、初期値を入れることが可能です。

placeholder(プレースホルダー)の設定

placeholderとはそのフォームにどんな内容を記入すればいいか分かりやすくするものです。

初めはフォームに表示されているが、フォームを入力する際に入力し始めると消える文字を見たことがあるかと思います。

placeholderの付け方は非常に簡単でplaceholder属性にテキストを入力するだけで表示されます。

<input type="text" placeholder="名を入力してください">

他のselectタグやtextareaタグも同様にplaceholderタグを入れると表示させることが可能です。

フォームのデータを送信する流れ

データを送信するためには

  • 何を
  • どこに
  • どうやって

この３つを示さなければなりません。
この3つの内今まではフォームを作成し『何を』という部分を作成しました。

ここからは『どこに』『どうやって』の部分に触れていきます。

formタグを設置し、フォームの定義をする

まずサーバーへ送信するためには<form>タグを設置する必要があります。

<input type="text" name="address">

といったフォーム要素の書き方を勉強しましたが、実際に送信する時に<form></form>タグで囲って上げる必要があります。

そしてこのformタグに

  • どこに
  • どうやって

送るのかという設定を書きこんでいきます。

『どこに』送るかを指定する（action属性）

フォームで作られたデータをどこに送るのかを指定するのが『action属性』です。

action属性を指定することで、

『フォームで作成した値をここに送信してください』

と言った命令をプログラムに命令することが出来ます。

記述方法は以下の通りでパスを設定し送信することが可能です。

<form action="http://foo.com">
    <input type="text" name="address">
</form>

こう記載することで、inputに書かれたテキストは『http://skilled.yashio-corp.com/form 』という場所に送信することになります。

『どうやって』送るかを指定する（method属性）

次にどうやって送るかを指定する必要があります。
どうやって送るのかという点についてはまず『HTTPメソッド』について覚えておく必要があります。

HTTPメソッドというのは簡単に言えば『送る方法』のことです。

代表的なHTTPメソッドには

  • GET（データを取得する）
  • POST（データを作成する）
  • PUT（データを更新する）
  • DELETE（データを削除する）

フォームでは、データを作成するために使用するものなので、基本的には『POST』もしくは『PUT』メソッドを利用します。
書き方は以下の通りです。

<form action="http://foo.com" method="post">
    <input type="text" name="address">
</form>

method属性にHTTPメソッドを指定することで『どうやって』の部分を指定することが出来ます。

ボタンを押して送信する

最後にボタンを送信する方法です。
送信する方法はいくつかありますが、最もセオリーなのがボタンを押して送信する方法です。
<form>タグの中に以下のようなコードを入力することで、送信ボタンを作成することができます。

<input type="submit" value="送信">

注意点としては

  1. inputタグを使用する
  2. typeにsubmitを指定する
  3. ボタンのテキストはvalue属性に指定する

の3つがあります。

inputタグのtype属性にsubmitというタイプを指定すると、inputタグはフォームではなくボタンとして表示されます。

このボタンを押すと、action属性で設定した場所へ、method属性で指定した方法でformの中の値が送信されることになります。

送信した後の流れ

送信ボタンを押した後にどういった流れを取るのかみていきます。

例として『お問い合わせページ』から問い合わせた時の流れは以下のようになります。

テキストエリア

サーバー側ではまず基本的にバリデーションというセキュリティチェックが行われます。

バリデーションチェックで問題がなければ次にデータベースに保存する処理が保存する処理が行われます。

保存処理が完了すると、『完了ページを移動せよ』という命令をブラウザに出します。

ブラウザに命令が伝わると、ページが移動しサーバーとやり取りが完了します。

バリデーションチェックとは？

バリデーションとは簡単に言えば、入力された値が正しく記入されているかを確認するものです。

例えば、電話番号のような数字だけを入力してほしいフォームを作成したとすると、本当に数字のみで入力されているのかをチェックするのがバリデーションの役割です。

  1. 入力チェック
  2. 書式チェック
  3. 妥当性の確認

など、意図していない値をデータベースに保存する前にチェックします。

仮に意図していない値をデータベースに保存してしまうと、システムの致命的なバグに繋がるなどバリデーションは重要な役割を持ちます。

HTMLでも出来るバリデーションチェック

required属性とは必須のバリデーションをinputタグに付与させるもので、何も入力されていないとこのようにアラートを出すことが出来ます。

required以外にも、

  • pattern…入力パターンの指定（textなど自由に入力できる系のみ）
  • maxlength…最長の長さの指定（自由に入力できる系のみ）
  • minlength…最短の長さの指定（自由に入力できる系のみ）
  • max…最大値（数値や日付系のみ）
  • min…最小値（数値や日付系のみ）
  • step…値の刻み（数値や日付系のみ）

などがあります。

どれも以下のようにinput タグ内に入れることで使用することができます。

<!--required-->
<input type="text" required>
<!--pattern maxlength minlength-->
<input type="text" pattern="[A-Za-z0-9]+" maxlength="10" minlength="5">
<!--max, min, step-->
<input type="date" max="2023-12-31" min="2023-01-01" step="1">

細かく入力の制限をかけるためには、JavaScriptを利用する必要がありますが簡易的なバリデーションはHTMLだけでも実装可能なので、利用してみてください。

フロントエンドを学習するならSkilled(スキルド)

スキルドではフロントエンド専門の実践特化型のプログラミング学習サービスです。

コーディングからフロントエンジニアまでの学習をカバーしており、コーディングしながら実践的に学習することで知識ではなく『スキル』が身につけられるサービスとなっております。

現在無料体験キャンペーンを行っていますので、気になる方はぜひ無料体験を利用してみてください。