HTML フォーム

フォームはユーザーが入力したデータを送信するものです。
お問い合わせやログイン、検索ボックスなどユーザーがページに情報を入力する時に使用されます。

formタグ

フォームを作るにはformタグを使います。formで囲った中にフォームを構成する部品を記述します。

<form>
.
フォームの部品
.
</form>

サーバーとのやり取りはphpなどのプログラミング言語の課題です。HTMLを学習中の段階では考えなくて良いです。

labelタグ

labelタグは、それぞれのフォームの部品に対してラベル（名前）をつけることができます。

項目名をlabelで囲みます。そしてlabelにはfor=”〇〇”、あとで連動させたいinputにid=”〇〇”と同じ名前を書きます。

サンプルコード

<form>
    <div>
        <label for="name">名前</label>
    </div>
    <div>
        <label for="email">メールアドレス</label>
    </div>
    <p>送信する</p>
 </form>

表示例

見た目で区別ができませんが、labelタグを使えば項目とフィールドを連動させることができると覚えておきましょう。

inputタグ

inputタグは、入力するためのフィールドを設置することができます。

inputではtype=”〇〇”に書く内容によって表示されるテキストフィールドの種類を指定します。

終了タグはいらないです。

テキストフィールド（Text Fields）

inputのtype属性をtextにすることで通常のテキスト入力欄を作ることができます。

サンプルではlabelはfor=”name”、inputはid=”name”と同じになっています。こうすると、項目名とフォームを連動させることができます。

「name=”name”」では、それぞれのフォームで入力された値に対して名前をつけています。

<form>
    <label for="name">名前：</label>
    <input type="text" id="name" name="name">
</form>

数字入力のテキストフィールド

inputのtype属性をnumberにすることで半角数字しか入力できないテキストフィールドを作ることができます。

直接数字を入力するか、数字を増減させるボタンで入力できます。

<form>
    <label for="num">予約番号：</label>
    <input id="num" type="number" name="yoyaku-num">
</form>

パスワード

inputのtype属性をpasswordにすることでパスワードのフィールドを作ることができます。

<form>
    <label for="pwd">パスワード：</label>
    <input id="pwd" type="password" name="password">
</form>

メールアドレス

inputのtype属性をemailにすることでメールアドレスの入力欄を作ることができます。

「xx@xxxx.xx」という形式に当てはまらない場合エラー文を表示してくれます。

<form>
    <label for="mail">メールアドレス：</label>
    <input id="mail" type="email" name="mail">
</form>

テキストエリア

テキストエリアを表示するにはtextareaタグを使用します。

inputタグと違って、終了タグが必要です。

見た目はinputの「type=”text”」に似ていますが、複数行のテキストも入力することができます。枠の右下から入力欄を拡大縮小させることができるという違いもあります。

<form>
    <label for="comment">コメント</label>
    <textarea id="comment" name="comment"></textarea>
</form>

HTMLのフォームは前の学習と比べると、明らかに難しいです。複数のページで詳しく説明したいと思います。