【HTML入門】 フォームと入力欄を作ろう
ログイン画面や問い合わせ画面、設定画面など、入力フォームはあらゆる場所に存在し、Webアプリを作成するにあたってなくてはならないものです。
ここではHTML側のフォーム作成方法を紹介します。
目次
フォームの基本構成
フォームは、主にform要素、input要素、label要素、送信ボタンの4つで構成されます。あとは普通のテキストや画像などです。
See the Pen html form sapmle by Totori (@souki202) on CodePen.
formタグ
formタグは、それがフォームであることを示すタグです。この中に入力欄や送信ボタンを入れます。
action、methodの2つの属性が重要です。
| 属性 | 役割 |
|---|---|
action | 送信先のURLを入れます。送信後は、actionに指定したページに移動します。 |
method | 送信メソッドのことです(詳細略)。通常はgetかpostです。サーバ側で受け取る種類を決めてから、フォームをそれに合わせます。 |
例えば、getメソッドで/search.phpを送信先とする場、
<form action="/search.php" method="get">
...
</form>
のようにします。
inputタグ
入力欄を作るためのものです。普通の文字入力やチェックボックスなどを作成するために使用します。
細かい仕様は次のセクションで紹介します。
labelタグ
その入力欄が何であるかを表示するためのものです。
また、関連付けるか子要素にすることで、そのラベルをクリックすると入力欄に入力できる状態になります。
See the Pen html form sapmle by Totori (@souki202) on CodePen.
の例だと、EmailやPasswordという文字列の部分をクリックしても入力を開始できることが分かります。これは、labelの要素内にinputを入れているためです。
子要素にしない場合、for属性を利用すると同様の挙動似できます。
See the Pen html label for by Totori (@souki202) on CodePen.
labelタグのforには、クリックでカーソルを当てたい入力欄のid属性の値を指定します。
入力欄のid属性は、関連するforの値に合わせます。
inputタグの詳細
name属性
name属性は見た目の通り名前をつける属性です。大半のタグに付けることができるのですが、nameはフォームのinputにおいて重要な役割を持ちます。
というのも、このnameと値のペアが送信され、それをサーバ側で処理するためです。
ここの名前は、通常サーバが要求する名前をつけます。例えば
<input type="email" name="email"> <input type="text" name="userName">
といった具合に設定します。
入力欄の種類
入力する部分はいくつか種類があります。
See the Pen html input elems by Totori (@souki202) on CodePen.
特に、1行を入力するものは、数値や日付など、いくつか種類があります。
1行入力
1行の入力はいくつか種類があります。type属性に種類を指定することで、特定の形式以外のものをエラーとして扱うことができたり、日付をクリック操作のみで入力できたりします。
スマホなら、キーボードが数値入力になったり、@マークがすぐ押せる場所に出てきたりします。また、ブラウザの自動入力にも使用されます。
See the Pen html input oneline types by Totori (@souki202) on CodePen.
| 種類 | 意味 |
|---|---|
type="text" | 普通の文字入力です。これは他が適さない場合の最終手段です。 |
type="number" | 数値増減ボタンが出て、数値以外入力できなくなります |
type="date" | カレンダーボタンを押すと簡単に日付を入力できます |
type="password" | 入力がすべて隠されます |
type="email" | 見た目は変わりませんが、スマホ時にアットマークがすぐ入力できる場所に出ます。ブラウザの自動入力に影響します |
type="address" | 住所入力です。見た目等は変わりませんが、ブラウザの自動入力に影響します |
type="hidden" | 見えない入力欄です。裏でユーザ識別子を送信したりに利用します。 |
type="file" | ファイルアップロードに使用します |
他にも色々ありますが、よく利用するものだけ紹介しました。
これを指定することでの良い点は次の3つです。
- ブラウザの自動入力や入力候補に適切なものを表示できる
- 形式によっては、ブラウザが自動で入力チェックしてくれる
- スマホやタブレット端末等の場合、専用のキーボードを表示できる
そのため、見た目に変化がなくとも、適切なtypeを設定するとユーザビリティが向上します。
初期値の設定
初期値を設定するには、value属性に値を入れます。
See the Pen html default value by Totori (@souki202) on CodePen.
placeholder
placeholder属性を利用すると、入力がない場合に薄い文字を表示できます。
See the Pen html form placeholder by Totori (@souki202) on CodePen.
複数行入力
複数行の入力では、textareaタグを用います。
See the Pen html textarea by Totori (@souki202) on CodePen.
初期状態では、textareaはサイズを変更できます。変更させたくない場合、cssで指定します。
textarea {
resize: none;
}
初期値の設定
初期値を設定したい場合、要素内に初期値を直接書き込みます。
See the Pen html textarea default value by Totori (@souki202) on CodePen.
ラジオボタン
ラジオボタンは、複数項目から1だけを選ぶボタンです。type="radio"でラジオボタンになります。
選択一覧を作るときは、複数のinputを並べて、それらをすべて同じnameに設定します。
また、送信する値としてのvalueを設定し忘れないように注意する必要があります。ユーザが入力するのではなく、すでに決められた値から選択するためです。
See the Pen html radio by Totori (@souki202) on CodePen.
チェックボックス
チェックボックスは、自由にONOFFできるボタンです。ユーザは何個でもチェックを入れられます。
こちらも、送信する値としてのvalueを設定し忘れないように注意する必要があります。
ここで、サーバの設計によって、ひとまとまりのチェックボックスはすべて同じnameにするか、分けるかで割れると思います。ここは、サーバ側の要求に合わせた仕様にする必要があります。
See the Pen html form checkbox by Totori (@souki202) on CodePen.
送信ボタン
<input type="submit">とすると送信ボタンが出てきます。value属性に値を入れることで、表示する文字を変更できます。(デフォルトでは、”送信”や”Submit”と表示されます。)
<input type="submit" value="送信">
実際に送信してみよう
アカウント作成フォームを想定して実際に作ってみましょう!
通常、見た目まではともかく、送信をテストするにはサーバが必要になります。今回は練習用のサーバを用意してあるので、そこに送信します。
送信先はhttps://api.progtext.net/account、postメソッドで送信します。入力するのはemailとpasswordです。
formを作る
まずはformタグを使ってformの箱を作ります。送信先はaction属性、メソッドはmethod属性に入力します。
<form action="https://api.progtext.net/account" method="post"> </form>
これでひとまずフォームを用意できました。
入力欄を作る
次は、labelとinputを使って、入力欄を作成します。入力するのはemailとpasswordなので、それぞれをname属性に設定した欄をつくります。
emailの入力ではtype="email"が適切で、passwordの入力ではtype="password"が適切です。これをform要素内に入れます。
<input type="email" name="email"> <input type="password" name="password">
入力欄を作ったら、labelタグを使ってそれぞれが入力するものは何かを説明します。labelタグの中に、表示文字と入力欄を入れます。
<label>
Email
<input type="email" name="email">
</label>
パスワードも同じようにしてみましょう!
あとはお好みでplaceholderを付けます。
送信ボタンを付ける
送信ボタンは、<input type="submit" value="(ボタン名)">でした。これをフォーム要素の最後に入れます。
完成サンプル
これで完成しました! 多分このような感じになっていると思います。
See the Pen html form by Totori (@souki202) on CodePen.
完全に同一である必要はありません。nameとtypeの順序が入れ替わっていたり、”Email”ではなく”Eメール”と表記したり、といった差はあります。
あとは送信ボタンを押して、{"message":"Email: hoge@example.com, Password: abcde を受け付けました"}のようなメッセージが表示されたら成功です!
まとめ
フォームを作る際は、form要素の中に各入力欄を設定します。
inputの種類は様々あり、見た目が変わらないものも多いですが、ブラウザの自動入力やタッチキーボードの最適化などが行われるため、適切なものを設定するべきです。
単にWebページを表示するだけならそこまで使わないformですが、Webアプリではバンバン使うので把握しておきましょう!
使い勝手改善のために、次の記事も見ていきましょう!
