【HTML】入力フォームを作成しよう

ユーザーが何らかの情報を入力するために用いる形式のことを入力フォーム(またはフォーム: form)といいます。

お問い合わせフォームや、ログインフォーム、記事の投稿フォームなど多くのWebサービスで利用されています。

フロントエンドとバックエンドについての画像

多くの場合、フォームに入力され送信された情報はバックエンドサーバーで処理されます。

今後の学習において、フロントエンドやバックエンドの概念を覚えておくことで、現在自分がどこの何を学習しているかのイメージがしやすくなります

お問い合わせフォームの場合であれば、次の手順になります。

  1. 【フロントエンド】ユーザーが入力フォームに入力する
  2. 【フロントエンド】「送信する」などの送信ボタンを押す
  3. 【フロントエンド】入力された内容をバックエンドアプリに送信する
  4. 【バックエンド】情報を受け取ったバックエンドアプリは決められた宛先にお問い合わせ内容を記載したメールを送信する
  5. 【バックエンド】場合によってはお問い合わせ内容をDB(データベース)に保存する
  6. 【バックエンド】送信結果をフロントエンドに返却する
  7. 【フロントエンド】ユーザーに送信結果(送信しました。など)を伝える
フロントエンド・・・ユーザーのブラウザ画面に表示されるHTMLやCSS等で構築されたページのこと
バックエンド・・・インターネット上のサーバーで稼働させている、データ処理(保存、取得など)やメール送信などのビジネスロジックをJava、Python、Ruby等で構築したアプリのこと(DBも含むことがある)

上記の通り、フォームのデータを実際に処理する場合はバックエンドの知識が必要になります
フロントエンドのみで完結するフォーム(例えばクイズなど)でもJavaScriptの知識が必須であるため、この学習では主にHTMLでの入力フォームの基本について学習します。

理解度チェック

  • フロントエンドとはどのようなものですか?説明してみてください!
  • バックエンドとはどのようなものですか?説明してみてください!

フォームをHTMLで作成してみよう

氏名を入力するフォームを作成してみましょう。


<form action="#" method="get">
    <label for="userName">氏名</label>
    <input type="text" name="userName" id="userName">
</form>
    

form要素について

form要素は単体では使用しません。子要素に入力のための要素を記述する必要があります。

form要素のaction属性

本来action属性には送信先のバックエンドのURLを記述します。

今回の学習ではバックエンドはないので、シャープ(#)を記述してこのページ自身を指すようにしています。

form要素のmethod属性

form要素には送信方式を指定するmethod属性があり、初期値はgetです。

よく使用する値に、getpostがあります。

getは、入力されたデータをURLにパラメータとして送信する方式です。そのため、機密情報(パスワードなど)をgetで送信すると漏洩(ろうえい)する危険性があります。主に、情報の取得や検索するためのフォームに使用されます

postは、パスワードなどの機密情報の他に、情報の保存や更新を目的とする場合に使用される方式ですgetと異なり、値はリクエスト(request)のbodyに格納されるため、外部から隠蔽することができます。

input要素について

formの子要素に入力のためのinput要素を記述します。

input要素のtype属性

氏名はテキストで入力してもらうため、input要素のtype属性にtextを指定しています。

textの他にも多くの種類があります。

input要素のname属性

name属性には、送信先に送る値の名前を設定します
このname属性を省略した場合、値は送信されないため必ず指定するようにしましょう

label要素について

label要素は、input要素が何を入力するためのものかをブラウザに表示する際に設定します
label要素がどのinput要素を指すのかを指定するために、for属性にinput要素のidを指定します

理解度チェック

  • フォームを作成してブラウザで表示してみましょう!
  • フィールドに何か入力してEnterキーを押してみましょう(method="get"で)!送信後のURLはどうなりましたか?

フォームに送信ボタンを表示する

フォームの送信は、入力フィールドでEnter(エンター)キーを押すことで自動的に送信が実行されます。

submitボタンを作成して送信する

フォームに「送信する」ボタンを追加するためには、input要素のtype属性にsubmit(提出)を指定し、「送信する」などのボタンに表示させる内容はvalue属性に指定します


<form action="#" method="get">
    <label for="userName">氏名</label>
    <input type="text" name="userName" id="userName">
    <input type="submit" value="送信する">
</form>
    

type属性にbuttonを指定してJavaScriptで送信する

上記の例では、入力フィールドでEnterキーを押すと自動的に送信(submit)されます。
しかし、この動作を無効にしてボタンを押した場合のみに限定したい場合があります

1.type="submit"ではなくtype="button"を指定する

Enterキーでの送信処理を無効にしたい場合はまず、送信ボタンの要素のtype属性にsubmitではなくbuttonを指定します。
これは、submitボタンがある場合においてフォーム内のEnterキーでの送信処理が有効になるためです。

2.JavaScriptでsubmit処理を呼び出す

type属性にbuttonを指定すると見た目はsubmitと変化のないボタンが表示されますが、submitと異なりbuttonは機能の無いただのボタンになります。機能が無いため、ボタンがクリックされた時にJavaScriptを実行するonclick属性にformsubmit処理を実行するように記述します。

ただし、例のように入力フィールドが一つしかない場合は、この対応でもEnterキーで送信されてしまうため、ダミーの入力フィールドを追加する等の工夫が必要になります。


<form action="#">
    <label for="userName">氏名</label>
    <input type="text" name="userName" id="userName">
    <input type="text" style="display: none;">  <!-- ダミーの入力フィールドです -->
    <input type="button" value="送信する" onclick="submit();">
</form>
    

この仕様については、HTML5使用の4.10.21.2 Implicit submissionに記載されています。

If the form has no submit button, then the implicit submission mechanism must do nothing if the form has more than one field that blocks implicit submission, and must submit the form element from the form element itself otherwise.

For the purpose of the previous paragraph, an element is a field that blocks implicit submission of a form element if it is an input element whose form owner is that form element and whose type attribute is in one of the following states: Text, Search, URL, Telephone, Email, Password, Date, Month, Week, Time, Local Date and Time, Number

4.10.21.2 Implicit submission

フォームにsubmit(送信)ボタンがない場合、フォームに暗黙的な送信をブロックするフィールドが複数(つまりフィールドが2つ以上)ある場合は暗黙的な送信メカニズムは何も行わず、それ以外の場合はフォーム要素自体からフォーム要素を送信する必要があります。

暗黙的な送信をブロックするフィールドとは、input要素のtype属性が次の種類に設定されているものです(Text, Search, URL, Telephone, Email, Password, Date, Month, Week, Time, Local Date and Time, Number

暗黙的な送信・・・Enterキーでの送信のこと

理解度チェック

  • submitボタンとはどんなボタンですか?

input要素の属性を使って入力にルールを設定する

input要素の属性には、ユーザーの入力にルールを設定できる属性が複数あります。
この属性を設定することで、入力を必須にしたり、特定の範囲内の数値を入力してもらうようなルールを設定することができます。

次の例では、input要素にmaxlengthrequiredの属性をそれぞれ設定しています。


<form action="#">
    <label for="prefecture">都道府県</label>
    <input type="text" 
                name="prefecture" 
                id="prefecture" 
                minlength="3"
                maxlength="4"
                required>
    <input type="submit" value="送信する">
</form>
    

required

入力を必須(Required)に指定します。未入力の場合、バリデーションの結果「無効」と判定されます。

例: required

minlength

入力する最低文字数を指定します。この文字数未満の場合、バリデーションの結果「無効」と判定されます。

例: minlength="4"

maxlength

入力可能な最大文字数を指定します。この文字数以上の入力はブラウザによって制限されます。

例: maxlength="32"

readonly

入力を読み取り専用(Readonly)に設定します。値の編集ができません。
ただし、値は送信されます

例: readonly

disabled

入力フィールドそのものを無効(Disabled)に設定します。画面に表示はされますが、編集不可となります。
readonly属性と異なり、値は送信されません

例: readonly

その他の属性について詳しく調べてみたい方は、<input>: 入力欄 (フォーム入力) 要素 – HTML: HyperText Markup Language | MDNをご覧ください。

理解度チェック

  • 入力が必須であるフィールドを作成してブラウザで挙動を確認してみましょう!

text以外のinput要素の型(type)の種類

型には多くの種類があり、ブラウザによって対応されている機能に差がある場合があります。

ここでは、頻繁に使用されるいくつかの型をご紹介します。

email

メールアドレスを入力するために用意されている型で、type属性にemailを設定します。

送信前のバリデーションでメールアドレスの文法チェックを行いますが、メールアドレスそのものの有効性を確認するものではありません


<form action="#">
    <label for="email">メールアドレス</label>
    <input type="email" name="email" id="email" required>
    <input type="submit" value="送信する">
</form> 
    

password

パスワードを入力するために用意されている型で、type属性にpasswordを設定します。

入力時に***のようにパスワードを隠蔽してくれますが、値そのものは平文(暗号化されていない文字)のため、getで送信することは避ける必要があります


<form action="#">
    <label for="password">パスワード</label>
    <input type="password" name="password" id="password" minlength="8" required>
    <input type="submit" value="送信する">
</form> 
    

checkbox

チェックボックス(type="checkbox")は、有効な選択肢にチェックを入れる選択式の型になります。

checked属性を記述することでチェックが入った状態を初期値に設定できます

通常、チェックが入った状態で送信すると、[name]=on(例: apple=on)というように選択された[name]に”on“という値が設定されます。値を変更するにはvalue属性を設定し、次の例ではapple=trueという形で送信されます。


<form action="#">
    <input type="checkbox" name="apple" id="apple" value="true" checked>
    <label for="apple">りんご</label>
    <input type="checkbox" name="orange" id="orange" value="true">
    <label for="orange">みかん</label>
    <input type="checkbox" name="banana" id="banana" value="true">
    <label for="banana">ばなな</label>
    <input type="submit" value="送信する">
</form> 
    

上記の例では、apple=true&orange=trueのように送信されます。

バックエンドアプリケーションで配列として受け取りたい場合は、nameを統一してvalueをそれぞれの値に変更します。
こうすることで、送信時の値はfruit=apple&fruit=orangeのようになりバックエンドで配列として処理することが可能です。(Javaの例: String[] fruit;で受け取る)


<form action="#">
    <input type="checkbox" name="fruit" id="apple" value="apple" checked>
    <label for="apple">りんご</label>
    <input type="checkbox" name="fruit" id="orange" value="orange">
    <label for="orange">みかん</label>
    <input type="checkbox" name="fruit" id="banana" value="banana">
    <label for="banana">ばなな</label>
    <input type="submit" value="送信する">
</form> 
    

radio

ラジオボタン(type="radio")は、チェックボックスとは異なり、複数の選択肢からどれか一つを選択する場合に使用する型です

選択肢のまとまりを指定するために、name属性に同一の値を設定し、選択時に送信される値をvalue属性に設定します。

次の例で、JavaScriptが選択された場合は、programming=JavaScriptが送信されます。


<form action="#">
    <input type="radio" name="programming" id="html" value="HTML" checked>
    <label for="html">HTML</label>
    <input type="radio" name="programming" id="js" value="JavaScript">
    <label for="js">JavaScript</label>
    <input type="radio" name="programming" id="java" value="Java">
    <label for="java">Java</label>
    <input type="submit" value="送信する">
</form> 
    

ここで紹介したフォーム以外にも複数の型があります。

詳しくは、<input>: 入力欄 (フォーム入力) 要素 – HTML: HyperText Markup Language | MDNをご覧ください。

理解度チェック

  • type="text"以外の入力フィールドを作成してブラウザで表示してみましょう!

前のレッスン
次のレッスン

Twitterでアウトプット

理解したことや分からないところはTwitterでつぶやいてみよう!

この学習ページで学んだことをTwitterでアウトプットしてください。

アウトプットするメリット

学習仲間が増える

同じ課題を持った仲間が増えるため、学習へのモチベーションが継続しやすくなります。

より深く理解する

頭では理解したと思っていても、文章化することで初めて気づくことがあります。