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



初心者必見!HTMLフォームとは ① ゼロから始めるHTML/CSS講座Vol15
目次
  1. ゼロから始めるHTML/CSS講座HTMLフォームを作成しよう①
  2. 入力・送信フォーム
  3. form要素
  4. input要素

image

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

入力・送信フォーム

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

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

image

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要素

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

image

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>

image

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属性に指定した場所へユーザが入力したデータを送信します。

image


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>

image

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

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

image


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>

image

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

image

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


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>

image

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>

image

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

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

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

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


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

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

注意事項として、type属性の値はHTMLの最新バージョンであるHTML5から多く追加されていますが、古いバージョンのブラウザや一部ブラウザでは追加された値が非対応となっていることがあります。

Google ChromeはHTML5の利用を推奨しているため最新の値にも対応していますが、Internet explorer(IE)では対応していないことも多いため、実際に公開するサービスのHTMLを作成する場合、各ブラウザの対応状況を確認して利用しましょう。

なお今回紹介した値の中で、HTML5から追加された値はemailのみです。

NEXT LESSON ☛ HTMLフォームを作成しよう②

PREV LESSON ☛ 命名規則

image

関連記事

CodeCampus編集部
この記事を書いた人
CodeCampus編集部
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp