4Kの追求:「研修」で「交流」「経験」「感動」を追求

文系プログラマのためのHTML入門~フォームを作ってみよう~

山本健太
WRITER
 
この記事を書いている人 - WRITER -
山本健太
コンピュータの専門学校を卒業後、紆余曲折を経て大手IT企業でヘルプデスク、サーバ・エンジニア、ネットワーク・エンジニア、システム・エンジニアとして経験を積む。2005年、情報システム部門のないベンチャー企業に入社。情報システム部門を立ち上げ、IT化に注力。現在は、発注側と受注側の最前線を双方向から体験したノウハウを、若手プログラマやSEに教えている。

HTMLHyper Text Markup Language)と言えば、ホームページを作成する為の「言語」です。

1990年代後半、私が初めてホームページを作成したとき、メモ帳を使ってHTMLを必死に書いていました。

それが、現在ではWordpressをはじめとするCMS(Content Management System)を使って簡単に作ることができるようになっています。

その為、HTMLの知識がなくてもホームページの制作やブログの運営ができるようになりました。

本当に、ありがたいことです。

しかし、文系プログラマは最低限のHTMLは知っておかなければなりません。

何故か・・・

それは、ホームページの作成にもプログラミングが必要だからです。

そこで、この記事では文系プログラマが最低限必要なHTMLを覚える為に申込フォームを作ってみたいと思います。

 

文系プログラマの為の最低限必要なHTMLの知識

HTMLはHTMLタグによって記述されます。

HTMLタグとは、<タグ名>の記号で囲まれた半角英数字のことです。

例えば、次のようなタグがあります。

  • h2
  • p
  • img
  • a
  • form
  • table

タグには開始タグ終了タグの2つがあり、開始タグと終了タグに囲まれた内容が反映されます。

例えば、文字の色や大きさなどを変更する<font>タグの場合、開始タグが「<font>」、終了タグは「</font>」です。

この<font>と</font>に囲まれた部分が、タグの影響を受けることになります。

<font color=”#ff0000″>文字の色</font>

と記述すると、見た目は

文字の色

のようになります。

 

HTMLを書いてテストする方法

HTMLを実際に書いて、どのように表示されるのかを確認する為に必要なモノが2つあります。

1つはメモ帳、もう一つはブラウザです。

どちらもWindowsに既にインストールされているアプリケーションなので、特に用意をする必要はありません。

 

メモ帳の開き方

まず、HTMLを書くためメモ帳を起動します。

Windowsマークをクリックし、「Windowsアクセサリ」⇒「メモ帳」の順番にクリックしていきます。

 

メモ帳にHTMLを記述したら、名前を付けて分かりやすい場所に保存しておきます。

拡張子は必ず「.htm」としてください。

 

ブラウザで確認する方法

メモ帳で作成したファイルを、ダブルクリックすればブラウザが起動し、どのように表示されているかすぐに確認することができます。

 

文系プログラマでもわかる申し込みフォームの仕組み

申し込みフォームは、フォームに入力されたデータをサーバに送信するためのものです。

つまり、あなたがブラウザを使って申し込みフォームに入力したデータは、サーバ側で受け取り何らかの処理がされます。

 

サーバ側でどんな処理がされるかというと、

  • 自動返信メールが送られたり、
  • 顧客データベースに顧客情報が蓄積されたり

などなど、ホームページ運営者がやりたい処理が実行されます。

 

サーバにデータを送信するには

サーバにデータを送信するには、formタグを使います。

このformタグで囲われた内容がサーバに送信されるわけです。

つまり、

<form>

</form>

で囲われた内容がサーバに送信される内容です。

 

しかし、formタグを使ってサーバにデータを送信するには、formタグ固有の設定が必要になります。

このタグ固有の設定を属性といいます。

formタグには次のような属性があります。

  • action
  • method
  • enctype
  • accept-charaset
  • accept
  • name
  • target

色々ありますが、formタグを使うには最低限actionmethodを知っておけばOKです。

 

サーバにデータを送信する2つの方法

サーバにデータを送信する方法は、2種類あります。

1つはGET、もう一つはPOSTです。

GETURLにデータを埋め込んで送信し、POSTHTTPリクエストにデータを埋め込んで送信します。

どちらを使ってもサーバにデータを送信することが可能ですが、どちらの方法で送信するかはformタグの「method」によって指定します。

HTMLで記述すると次のようになります。

 

<form method=”post”>

</form>

※POSTで、データを送信する場合

 

データを送信するサーバを指定するには

さて、formタグでデータを送信することは分かったけど、どこに送信するのかわからないと思ったあなたは素晴らしい!!

実は、formタグを使ってデータを送信するには、どこにデータを送信するかを指定しないとだめなのです。

そして、どこにデータを送信するかを指定するのが「action」です。

actionには、データを送信するサーバ側のプログラム名を記述します。

例えば、サーバ側のtest.phpにデータを送信するなら、次のように記述します。

 

<form method=”post” action=”./test.php”>

</form>

※同じサーバでフォームと同じ場所にプログラムがある場合

 

もし、別のサーバにデータを送信するなら

<form method=”post” action=”https://hogehoge.com/test.php”>

</form>

のようになります。

 

サーバに送信するデータを指定するには

formタグを使ってサーバにデータを送信する方法は、つかんでいただけたと思います。

では、いよいよ実際に送信するデータを指定する方法です。

送信するデータを指定するには、次のタグを使います。

  • input
  • select
  • textarea

これらのタグはフォームの入力項目に合わせて、使い分けを行います。

今回は、最もよく使われるinputタグで説明をします。

inputタグには終了タグがありません。

記述するときは、<input />と記述します。

そして、inputタグにもformタグと同様、固有の属性があります。

inputタグの属性は、

  • type

です。そして、typeには、次の値を設定することができます。

設定値 解説
text 1行のテキストボックス これ ⇒ 
password パスワードの入力用ボックス。入力した文字がアスタリスク(*)などに置き換えられます。 これ ⇒
checkbox チェックボックス。チェックボックスは複数選択が可能。 これ ⇒ 
radio ラジオボタン。チェックボックスと異なり複数選択不可。 これ ⇒ 
file サーバにファイルを送信する際に利用する。 これ ⇒ 
hidden ユーザに分からないように隠したデータを送る際に利用する。
submit 送信ボタン これ ⇒ 
reset フォームの入力を取り消すリセットボタン これ ⇒ 

更に、各type毎に属性を指定することが可能です(詳しくはここでは解説しません)。

このようにtypeに様々な値を設定することで、テキストボックスやラジオボタン、チェックボックス等を使ったフォームの入力が可能になるのです。

 

inputタグを使って入力フォームを作る

では、いよいよ百聞は一見に如かずということで、フォームを作ってみます。

ここでは練習として、次の項目を入力するフォームを作成することにします。

フォームに設置する入力項目

入力項目 type
名前 text
電話番号 text
都道府県 text
市区町村 text
番地以降 text

※データ送信はPOST、データ送信先プログラムは「./test.php」

 

では、実際に書いてみましょう。

<form method=”post” action=”./test.php”>

<p>名前:<input type=”text” /></p>

<p>電話番号:<input type=”text” /></p>

<p>都道府県:<input type=”text” /></p>

<p>市区町村:<input type=”text” /></p>

<p>番地以降:<input type=”text” /></p>

<input type=”submit”>

</form>

 

ブラウザで表示すると、こんな感じになります。

 

まとめ

さて、今回は問い合わせフォームを作成しましたが、実はプログラミングが必要なのは、この問い合わせフォームの入力チェックをするときに必要なのです。

その為にも、どのように入力フォームが作られているのかを知っておくことがとても重要なのです。

入力チェックの記述する方法は、たくさんありますが最もよく使われるのが「Javascript」です。

javascriptによる入力チェックの方法は、別の記事で紹介をしていきますね。

まずは、問い合わせフォームの作り方を繰り返し練習してマスターをしてください。

 

20代で身に着けるべきIT業界のヒューマンスキルを108の鉄則として分かりやすく解説しました

IT業界の人財研修を15年以上行ってきた

弊社代表山崎が2010年に出版した書籍から

20代で身に着けるべきヒューマンスキルの

ポイントを抜粋してPDFにしました。

IT業界の商品は何といっても「人」

つまり、ITスキルもさることながら

ヒューマンスキルが重要なのです。

是非、PDFを手に取って20代で

身に着けるべきヒューマンスキルを確認してください。

 

 

この記事を書いている人 - WRITER -
山本健太
コンピュータの専門学校を卒業後、紆余曲折を経て大手IT企業でヘルプデスク、サーバ・エンジニア、ネットワーク・エンジニア、システム・エンジニアとして経験を積む。2005年、情報システム部門のないベンチャー企業に入社。情報システム部門を立ち上げ、IT化に注力。現在は、発注側と受注側の最前線を双方向から体験したノウハウを、若手プログラマやSEに教えている。

Copyright© Say consulting group, Inc , 2017 All Rights Reserved.