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



初心者必見!HTMLフォームとは ② ゼロから始めるHTML/CSS講座Vol16
目次
  1. ゼロから始めるHTML/CSS講座HTMLフォームを作成しよう②
  2. select要素・option要素
  3. label要素
  4. フォームまとめ
  5. 補足.input要素の様々な属性
  6. 課題

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

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

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

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

select要素・option要素


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>form</title>
</head>
<body>
    <form action="#">
            メールアドレス:
            <input type="email" name="mail">

パスワード:
            <input type="password" name="password">

郵便番号:
            <input type="text" name="post_code">

都道府県:
            <select name="pref">
<option value="">選択してください</option>
<option value="北海道">北海道</option>
<option value="青森県">青森県</option>
<option value="岩手県">岩手県</option>
<option value="宮城県">宮城県</option>
<option value="">サンプルのため以下省略</option>
</select>

性別:
            <input type="radio" name="gender" value="man">男性
            <input type="radio" name="gender" value="woman">女性

メール配信:
            <input type="checkbox" name="magazine" value="1"  checked>配信を希望する

<input type="submit" value="送信">

</form>
</body>
</html>

html_form02

select要素は選択肢のセットから選択するためのコントロールを表します。select要素により作成されるコントローラをセレクトボックスと呼びます。

option要素はselect要素の選択肢を表します。

select要素とoption要素は、ul要素とli要素と同じく親子関係にあります。select要素でセレクトボックス全体を定義し、その中にoption要素を記述し、個々の選択肢リストを作成します。

セレクトボックスをクリックした場合、option要素の内容が表示されます。html_form02-2

なお今回は利用していませんがoption要素の属性としてselected属性があり、指定したoption要素が選択された状態にすることが可能です。

selected属性の指定がない場合、select要素内で一番最初に書かれているoption要素が選択された状態になります。

label要素


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>form</title>
</head>
<body>
    <form action="#">
            <label for="mail">メールアドレス: </label>
            <input type="email" name="mail" id="mail">

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

<label for="post_code">郵便番号: </label>
            <input type="text" name="post_code" id="post_code">

都道府県:
            <select name="pref">
<option value="">選択してください</option>
<option value="北海道">北海道</option>
<option value="青森県">青森県</option>
<option value="岩手県">岩手県</option>
<option value="宮城県">宮城県</option>
<option value="">サンプルのため以下省略</option>
</select>

性別:
            <input type="radio" name="gender" value="man">男性
            <input type="radio" name="gender" value="woman">女性

メール配信:
            <input type="checkbox" name="magazine" value="1"  checked>配信を希望する

<input type="submit" value="送信">

</form>
</body>
</html>

キャプションを表し、主にinput要素のようなフォーム部品と項目名(ラベル)を関連付ける際に使用します。

for属性の値とフォーム部品のid属性の値を一致させることで、フォーム部品と項目名を関連付けることができます。html_form02-3-639

一般的なブラウザでは、項目名をクリックした際に関連付けされている部品がアクティブな状態になります。html_form02-4

また下記のようにlabel要素の中にフォーム部品を含めることでも関連付けは可能です。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>form</title>
</head>
<body>
    <form action="#">
            <label for="mail">メールアドレス: </label>
            <input type="email" name="mail" id="mail">

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

<label for="post_code">郵便番号: </label>
            <input type="text" name="post_code" id="post_code">

都道府県:
            <select name="pref">
<option value="">選択してください</option>
<option value="北海道">北海道</option>
<option value="青森県">青森県</option>
<option value="岩手県">岩手県</option>
<option value="宮城県">宮城県</option>
<option value="">サンプルのため以下省略</option>
</select>

性別:
            <label><input type="radio" name="gender" value="man">男性</label>
            <label><input type="radio" name="gender" value="woman">女性</label>

メール配信:
            <label><input type="checkbox" name="magazine" value="1"  checked>配信を希望する</label>

<input type="submit" value="送信">

</form>
</body>
</html>

フォームまとめ

作成したフォーム(form.html)は下記となります。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>form</title>
</head>
<body>
    <form action="#">
            <label for="mail">メールアドレス: </label>
            <input type="email" name="mail" id="mail">

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

<label for="post_code">郵便番号: </label>
            <input type="text" name="post_code" id="post_code">

都道府県:
            <select name="pref">
<option value="">選択してください</option>
<option value="北海道">北海道</option>
<option value="青森県">青森県</option>
<option value="岩手県">岩手県</option>
<option value="宮城県">宮城県</option>
<option value="">サンプルのため以下省略</option>
</select>

性別:
            <label><input type="radio" name="gender" value="man">男性</label>
            <label><input type="radio" name="gender" value="woman">女性</label>

メール配信:
            <label><input type="checkbox" name="magazine" value="1"  checked>配信を希望する</label>

<input type="submit" value="送信">

</form>
</body>
</html>

html_form02-5-639

フォームはユーザから情報を取得するときの基本となります。送信されたデータの受け取りにプログラミング言語が必要となるためHTMLだけでは深い理解が難しいかもしれまんが、フォームは

form要素+送信ボタン(submit)+各フォーム部品(input要素、select要素など)

で基本的に構成されており、これらをHTMLで定義する必要があります。

補足.input要素の様々な属性

input要素の属性には、サンプルで利用したもの以外にも多々あります。

placeholder属性

ユーザのデータ入力の助けとなるようなヒントを表示できる。


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

<label for="post_code">郵便番号: </label>
    <input type="text" name="post_code" id="post_code" placeholder="123-4567">


html_form02-6


maxlength属性

最大入力文字数を指定する。


    <label for="password">パスワード: </label>
    <input type="password" name="password" id="password" maxlength="12">

<label for="post_code">郵便番号: </label>
    <input type="text" name="post_code" id="post_code" placeholder="123-4567">


html_form02-7


今回紹介した属性を効果的に指定すると、ユーザが入力ミスを起こさないよう補助することができます。ユーザにとって使いやすいWebサイトの作成を目指し、フォーム関連の要素や属性は色々と調べて試してみることを推奨します。

課題

以下と同じフォームをHTMLで作成してください。

challenge_form-html-639

name属性やvalue属性の値は自由です。

HTML課題のため、CSSは必要ありません。

NEXT LESSON ☛ Webページの構成

PREV LESSON ☛ HTMLフォームを作成しよう①

関連記事

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