更新日: 2017年05月22日
公開日: 2015年12月05日

初心者必見！HTMLフォームとは ① ゼロから始めるHTML/CSS講座Vol15

ゼロから始めるHTML/CSS講座HTMLフォームを作成しよう①
入力・送信フォーム
form要素
input要素

ゼロから始めるHTML/CSS講座HTMLフォームを作成しよう①

入力・送信フォーム

フォームとは、ブラウザ上からユーザがデータを入力する仕組みです。メールアドレスやパスワードなどユーザ情報を入力し送信ボタンを押すことで、指定された場所へデータを送信することができます。

例として、下記に示す[メールアドレス][パスワード][郵便番号][都道府県][性別][メール配信]を入力するフォームをHTMLで作成していきましょう。

html要素やhead要素などHTMLの基本構造のみ記述したファイルを用意し、これに追記をしていきます。
ファイル名: form.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>form</title>
</head>
<body>
</body>
</html>

なお理解優先のため、上から順に作成&説明ではなく、一部前後して紹介します。

form要素


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<form action="#">
</form>
</body>
</html>

フォーム関連要素の集まりを表します。

action属性にデータ送信先の場所を指定します。

フォームに関連する要素は基本的にform要素に含めます。イメージとしては「head要素=文書自体の情報(ヘッダ)」としたとき、「form要素=フォーム」となります。

なおフォームから送信したデータの受け取りは、PHP等のプログラミング言語で行います。このためサンプルではaction属性の値を「#」と仮のものにしております。またform要素にはその他ほぼ必須となる属性もありますが、HTML以外の知識も必要となるため、ここでは紹介しません。

input要素

データやフィールドを表します。通常はユーザーがデータを編集することができるようにするための部品(フォーム部品)です。

type属性に要素のデータタイプを指定します。

name属性は送信データを受け取る際の名前を指定します。

※name属性はプログラミング言語と連携して利用するため詳細は割愛します

input要素はtype属性の値により様々なタイプへと変わります。

type=”text”


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>form</title>
</head>
<body>
    <form action="#">
        <p>
            郵便番号:
            <input type="text" name="post_code">
        </p>
    </form>
</body>
</html>

type属性の値に「text」を設定した場合、input要素は改行なしのテキストデータを表し、テキストボックスと呼ばれる形状になります。

type=”submit”


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>form</title>
</head>
<body>
    <form action="#">
        <p>
            郵便番号:
            <input type="text" name="post_code">
        </p>
        <p>
            <input type="submit" value="送信">
        </p>
    </form>
</body>
</html>

type属性の値に「submit」を設定した場合、input要素は送信ボタンとなります。

value属性にボタンの中に表示するテキストを指定します。
※サンプルの場合は「送信」

送信ボタンを押すと、form要素のaction属性に指定した場所へユーザが入力したデータを送信します。

type=”email”


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>form</title>
</head>
<body>
    <form action="#">
        <p>
            メールアドレス:
            <input type="email" name="mail">
        </p>
        <p>
            郵便番号:
            <input type="text" name="post_code">
        </p>
        <p>
            <input type="submit" value="送信">
        </p>
    </form>
</body>
</html>

type属性の値に「email」を設定した場合、input要素はメールアドレスのデータを表すテキストボックスになります。

特徴として、ブラウザによっては送信ボタンを押した際にメールアドレスの妥当性チェックをしてくれます。

type=”password”


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>form</title>
</head>
<body>
    <form action="#">
        <p>
            メールアドレス:
            <input type="email" name="mail">
        </p>
        <p>
            パスワード:
            <input type="password" name="password">
        </p>
        <p>
            郵便番号:
            <input type="text" name="post_code">
        </p>
        <p>
            <input type="submit" value="送信">
        </p>
    </form>
</body>
</html>

type属性の値に「password」を設定した場合、input要素は機密情報のデータを表すテキストボックスになります。

特徴として、入力されたデータが隠されて表示されます。

type=”radio”


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>form</title>
</head>
<body>
    <form action="#">
        <p>
            メールアドレス:
            <input type="email" name="mail">
        </p>
        <p>
            パスワード:
            <input type="password" name="password">
        </p>
        <p>
            郵便番号:
            <input type="text" name="post_code">
        </p>
        <p>
            性別:
            <input type="radio" name="gender" value="man">男性
            <input type="radio" name="gender" value="woman">女性
        </p>
        <p>
            <input type="submit" value="送信">
        </p>
    </form>
</body>
</html>

type属性の値に「radio」を設定した場合、input要素は複数用意された選択肢の中から1つを選択できるラジオボタンと呼ばれる形状になります。

name属性の値が同じだと「複数の選択肢の1つ」と解釈してくれます。値が同じラジオボタンは、選択肢の中から1つしか選択できないようになります。

type属性の値に「submit」を設定した場合、input要素は送信ボタンとなります。

value属性は送信データの値を指定します。 ※ラジオボタンのvalue属性はプログラミング言語と連携して利用するため詳細は割愛します。

type=”checkbox”


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>form</title>
</head>
<body>
    <form action="#">
        <p>
            メールアドレス:
            <input type="email" name="mail">
        </p>
        <p>
            パスワード:
            <input type="password" name="password">
        </p>
        <p>
            郵便番号:
            <input type="text" name="post_code">
        </p>
        <p>
            性別:
            <input type="radio" name="gender" value="man">男性
            <input type="radio" name="gender" value="woman">女性
        </p>
        <p>
            メール配信:
            <input type="checkbox" name="magazine" value="1"  checked>配信を希望する
        </p>
        <p>
            <input type="submit" value="送信">
        </p>
    </form>
</body>
</html>

type属性の値に「checkbox」を設定した場合、input要素は用意された選択肢の中から0個以上を選択できるチェックボックスと呼ばれる形状になります。

value属性は送信データの値を指定します。 ※チェックボックスのvalue属性はプログラミング言語と連携して利用するため詳細は割愛します

checked属性は最初からチェックボックスが選択された状態にします。値を指定する必要はありません。

なおラジオボタンにもchecked属性は利用できます。

input要素のtype属性の値についてまとめると以下のようになります。 input要素のtype属性の値についてまとめると以下のようになります。

input要素[type属性]
属性の値	役割	種類
text	改行なしのテキスト	テキストボックス
email	メールアドレス	テキストボックス
password	パスワード	テキストボックス
radio	複数の選択肢から1つを選択	ラジオボタン
checkbox	複数の選択肢から0個以上を選択	チェックボタン
submit	入力されたデータを送信する	ボタン