HTMLを学ぶ。フォーム関連の要素を学ぶ。(form要素)

HTMLを学ぶ。フォーム関連の要素を学ぶ。(form要素)

今回のポイント

今回はフォームの要素について解説していきます。
フォームとは、以下のようなイメージです。

これは「価格コム」さんのログイン入力のフォーム画面です。

このようにフォームとは、メールアドレスやパスワードなど様々な情報を入力したり、ボタンを使って情報を転送するなどの機能を持っています。

フォームを表す要素(form要素)

フォームを使用する際は、form属性を使用します。
表現すると、以下のようになります。

<form>
・・・後で機能を付与するスペース・・・
</form>

しかしこのform属性は単体では、機能を持つことが出来ません。
そこで機能を付与する属性や要素を合わせて、記述していきます。
それでは、それぞれを解説していきます。

action(アクション)属性

action属性はユーザーが入力したデータを、どこに保存するか指定する属性です。
表現すると以下の通りになります。

<form action=”receive.php”>
・・・後で部品を付与するスペース・・・
</form>

これは後に勉強することになると思いますが、phpファイルである「receive.phpに保存する」と指定した例です。

method(メソッド)属性

method属性はどのような方法で、データを送信するのか指定する属性です。
送信方法は以下の2つがあります。

  • getメソッド
  • postメソッド

getとpostの違い

getメソッドとは最大有効文字数が255文字で転送できます。
対してpostメソッドは文字数に制限が有りません。
更にはgetメソッドは転送する際に外部に情報が見えますが、postメソッドは外部に見られることは有りません。

その昔、getメソッドは主流で使用されていましたが、上記のような制限によりpostメソッドが登場しました。

それでは記述してみましょう。
今回はユーザー情報を入れるフォームを仮定して作成するので、postを使用します。

<form action=”receive.php” method=”post”>
・・・後で部品を付与するスペース・・・
</form>

input(インプット)要素

input要素はフォームの部品を生成する要素です。
例えば、下の図のような部品です。

それでは、具体的に使い方を解説していきます。
まずはinput要素を記述してみましょう。

<form action=”receive.php” method=”post”>
 <input>
</form>

input要素は空要素なので、終了タグは必要ありません。

type(タイプ)属性

さらにinput要素には、type属性を記述する必要があります。

そしてtype属性には部品の種類を指定する必要もあります。
これが先程、図で説明した入力フィールドやチェックボックスなどです。

今回は入力(テキスト)フィールドを作成します。
それでは記述してみましょう。

<form action=”receive.php” method=”post”>
 <input type=”text”>
</form>

name(ネーム)属性

name属性は部品に名前を指定する属性です。
これはphpなどを使用した場合にデータを送受信する際に使用します。
今回はHTMLの解説なので、割愛しますね。

それでは今回は、ユーザーに入力フォームへアドレスを入れてもらうように作成しようと思いますので、mailと指定しておきましょう。

<form action=”receive.php” method=”post”>
 <input type=”text” name=”mail”>
</form>

それでは、出来栄えを確認してみましょう。

ちゃんと入力フォームは表示できたでしょうか。

これだけでは少し寂しいので「アドレス」とでも表示作成しておきましょう。
これは段落要素を使用して記述してみます。

<p>アドレス</P>
<form action=”receive.php” method=”post”>
 <input type=”text” name=”mail”>
</form>

それでは、出来栄えを確認してみましょう。

入力フォームっぽくなったと思います。

value(バリュー)属性

ラジオボタンも配置しておきましょう。
ラジオボタンとは下の図のようなボタンを指します。

今回は性別を選べるラジオボタンを作ってみます。
ラジオボタンはtype属性をradioで指定します。
そしてname属性は性別を英語でsexと指定しておきます。
それでは記述してみましょう。

<p>アドレス</P>
<form action=”receive.php” method=”post”>
 <input type=”text” name=”mail”>
 <input type=”radio” name=”sex”>
</form>

そして男性か女性か選べるようにvalue属性を使って指定します。

<p>アドレス</P>
<form action=”receive.php” method=”post”>
 <input type=”text” name=”mail”>
 <input type=”radio” name=”sex” value=”男”>男性
 <input type=”radio” name=”sex” value=”女”>女性

</form>

このvalue属性は「name属性のsexはどれ?」といった具合に項目を1つだけ選択/指定できる属性です。
今回の場合はname=”sex “に対してユーザーに対する質問は「男」か「女」のどちらかを選択するものになります。

それではどのように表示されるか、確認してみましょう。

いかがですか?無事に表示されたでしょうか。

今回はブラウザにフォームを表示させる方法を解説しました。
しかしこれらは、フォーム表示させるだけの方法なのでphpなどのプログラム言語を学んで入力されたデータを活用できるスキルを身につけていきましょう。

またフォームに使用できる部品は沢山あるので、どんどん使ってこのフォームの表示に慣れていきましょう。

次の記事

前回の記事

HTMLを学ぶ。シリーズはこちら

HTMLカテゴリの最新記事