【HTML初心者入門】HTMLフォームとは?作成方法を解説! | プログラミング入門ならWEBCAMP NAVI
【12月枠も残りわずか】転職保証コース

【HTML初心者入門】HTMLフォームとは?作成方法を解説!

みなさんはHTMLの学習をしていませんか?

今回の記事ではフォームの使い方や注意点について紹介していきます!

フォームとは文章を入力する部分のこと

フォームとは直訳すると形、形状、恰好です。今回の意味合いでいくと、「形式だった文書」です。現実世界で、形式文書といえば紙でできたものを連想します。現代社会では必ず何らかのフォームに書き込まなければならないことがあります。申込書や投票用紙、アンケート用紙など、ほとんどの人は今までにフォームに書き込む場面を経験していると思います。

Web上でもフォームはいろいろな目的に使われます。調査、オンライン注文書、フィードバック、その他ユーザの入力が必要なあらゆる機能に用いられます。WEBを利用する上で、自分でも気がつかないうちにフォームを使っているということもありがちです。

Yahoo! や Google といったサーチエンジンを使ったことのある方なら、検索をする時に、キーワードを入力するという標準的なHTMLフォームを使ったことがあるはずです。フォームのような対話的手法が使えなければ、インターネットは一方通行の通信しかできないことになってしまいます。つまりフォームはWebの対話性にとって重要なものです。

・多くのテンプレートを知りたい方は、「【初心者向け】おすすのhtmlのテンプレート7選!」の記事を参考にしてください。

構成要素と属性

フォームは以下のような要素で構成されます。

1. text、textarea  :テキスト入力欄
2. radio           :ラジオボタン
3. checkbox        :チェックボックス
4. select、option  :メニュー選択リスト
5. submit、reset   :送信、リセットボタン

これらは「構成部品」または「入力フィールド」と呼ばれています。

指定できる属性(form)

1. action

データを処理するプログラムの URIを指定します。

2. enctype

送信する際のデータの MIMEタイプを指定します。

3. method

データの送信方法の指定します。

get :URIとフォームのデータをセットで送信
post:フォームデータのみ送信

「get」と「post」の詳しい違いについては省略しますが、「get」を使う場合はデータの量の制限や送信した内容が送信先サーバのログにそのまま残ってしまう場合があるなど気を付ける点が多いです。そのため、特に問題が無ければ「post」を利用することをお勧めします。

 4. id

フォームの名称を指定します。

・HTMLタグを一覧から探したい方は、「【初心者向け】htmlで使う主要なタグ一覧を解説」の記事を参考にしてください。

サンプル

実際に動作させるためには、送付先である「formtest.html」が必要になりますのでご注意ください。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>[TEST]form</title>
</head>
<body>

<form action="formtest.html" method="post">


<label>お名前:
<input type="text" name="名前" value="" tabindex="1">
</label>
</div>


<div>

性別:
<input type="radio" name="sex" value="man" tabindex="2">男性
<input type="radio" name="sex" value="wom" tabindex="3">女性

職業:
<input type="checkbox" name="job" value="Student" tabindex="4">学生
<input type="checkbox" name="job" value="worker" tabindex="5">会社員
<input type="checkbox" name="job" value="official" tabindex="6">公務員
<input type="checkbox" name="job" value="etc" tabindex="7">その他

</div>


<div>

年代:<select name="age" tabindex="8">
<option value="age" selected>お選びください</option>
<option value="10ages">10代</option>
<option value="20ages">20代</option>
<option value="30ages">30代</option>
<option value="40ages">40代</option>
<option value="50ages">50代</option>
<option value="60ages">60代</option>
</select>

</div>


<div>

<label>お問合せ
<textarea name="title" rows="5" cols="60" tabindex="9">
</textarea>
</label>

</div>


<div>

<input type="reset" value="送信" tabindex="10">
<input type="reset" value="取消" tabindex="11">


</form>

</body>
</html>
・学習ステップを確認したい方は、【入門者向け】プログラミング初心者がHTMLを学ぶ6つのステップ」の記事を参考にしてください。

まとめ

初心者の方向けにフォームを紹介していきましたが、いかがでしたか?

headタグはWebサイトを作成する上で基本となるタグですので、しっかり基本を抑えてくださいね!

12月枠も残りわずか!!

エンジニア転職を目指すなら…

転職保証付きプログラミングスクール

で未経験からエンジニア目指そう

 

✔︎未経験からの転職 ✔︎会社の将来が不安 ✔︎給与や待遇に不満がある

 

転職保証コースは質の高いカリキュラムで転職成功率98%