• 更新日: 2017年03月22日

初心者必見！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編集部

人気記事

  1. 【2022年版】社会人でも通いやすいプログラミング教室5選｜選び方の基準も解説
    【2022年版】社会人でも通いやすいプログラミング教室5選｜選び方の基準も解説
    プログラミング学習
    プログラミングスクール・サービス
  2. 塾講師からエンジニアへ26才で転職。先生の支えがあって成長できました。
    塾講師からエンジニアへ26才で転職。先生の支えがあって成長できました。
    受講生インタビュー
  3. 様々なフィールドで活躍するエンジニアを育てていきたい【CodeCamp人気講師 #12 舘先生】
    様々なフィールドで活躍するエンジニアを育てていきたい【CodeCamp人気講師 #12 舘先生】
    講師インタビュー
  4. 【初心者〜上級者まで】python学習におすすめの本・レベル別3選+α
    【初心者〜上級者まで】python学習におすすめの本・レベル別3選+α
    Python
    プログラミング書籍・参考書
  5. 【PHP入門徹底ガイド】初心者のための学習ロードマップ
    【PHP入門徹底ガイド】初心者のための学習ロードマップ
    PHP
    プログラミング入門
  6. コロナに負けるな！プログラミング&YouTubeで頑張る人が作るべきアプリ
    コロナに負けるな！プログラミング&YouTubeで頑張る人が作るべきアプリ
    Python
    HTML
    CSS
    お役立ち情報
    アプリ学習入門
  7. 【Twitter×Python】自分専用のエゴサーチボットを作る方法
    【Twitter×Python】自分専用のエゴサーチボットを作る方法
    Python
  8. Webデザインから見たSEO
    Webデザインから見たSEO
    Webデザイン入門
    Webデザインお役立ち情報
  9. 未経験からのWebデザイナー転職を有利にする資格４選
    未経験からのWebデザイナー転職を有利にする資格４選
    Webデザインお役立ち情報
    転職
まずは7日間お試し！人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp
プログラミング講座を無料で試す