メモ

メモを入力してみよう!


Lesson 07「フォームを作ってみよう!」

学習概要

テキストボックスやチェックボックス、ラジオボタンにセレクトボックス、テキストエリアなど。
お問合せフォームやユーザー登録フォームなどWEBアプリケーションには欠かせないフォームの作り方を学んでいこう!

補足

textareaタグだけはvalue属性をもたせることはできません。

■色々なフォームパーツ
詳しくはコチラ

この練習でわからない所を質問する※部活外の質問はできません

ログインが必要です

この練習への質問一覧

ログインが必要です

Lesson 07「フォームを作ってみよう!」の内容※SEO用のため読めません

皆さん初めまして、ウェブカツコーチの斉藤です。これからHTML&CSSについて学んでいきたいと思います。今回学んでいくのはこちら。
フォームを作ってみよう。

では前回と同じくフォルダを作成しましょう。作成したフォルダの中に最初に作ったHTMLファイルをコピーします。コピーしたらファイルを編集していきましょう。タグの中にこちらのコード書いてみてください。書き終わったら保存しファイルをブラウザで開いてみましょう。フォームが表示されれば完成です。

次にチェックボックスを作ってみましょう。formタグの中にこちらのコードを書いてみてください。保存をしブラウザで開いてみて、こちらのような表示がされれば完成です。

次にラジオボタンを作ってみましょう。
同じくformタグの中にこちらのコードを書いてみてください。書き終わったら保存をし同じようにブラウザで開いてみてください。
こちらのような画面が表示されれば完成です。

次にセレクトボックスを作ってみましょう。
同じくformタグの中にこちらのコードを書いてみてください。書き終わったら保存をしブラウザで表示させてみましょう。こちらのような表示がされれば完成です。

最後にテキストエリアを作っていきましょう。
同じくformタグの中にこちらのコードを書いてみてください。書き終わったら保存をしブラウザで表示させてみましょう。こちらのような表示がされれば完成です。


はい、コード中身をこれから見ていただきたいと思います。まずformというのは例えばホームページとかだとお問合せフォームであったり、あとはユーザー登録をフォームであったりそういったとこで使わかれるものがフォームと呼ばれるものです。ホームを作るにはformタグというものを使っていきます。このformタグの中に実際表示させたいフォームの種類によって色々なタグを変えていくという形になります。

フォームの中を見てみると、1行目今回の場合[ E-mail ]という文字を書いてます。で
というタグがあってこれは改行のタグですね。その下にinputというタグを使ってフォームを表示させてます。このタグに[ type=" " ]という属性をつけて[ type="text" ]という形に値をしてます。でも[ type="text" ]とするとテキストフォームというものが作れる形になります。

次に[ name=" " ]という属性をつけてます。値[ name=" E-mail" ]としてますけどもname属性というのはこのフォームひとつひとつに名前をつけられるんですね。今回はこのフォームをE-mailのフォームとして使いたいので名前をE-mailという形で付けてます。

同じようにその下[ password ]という文字を表示させて
というタグで改行してます。
その下にinputというタグを同じように使ってフォームを表示させますよ、type属性にtextを指定してテキストフォームを表示させます。name属性に[ name="pass" ]としているのでこのフォームの名前はpassっていう形にしてますよ、というものになってます。実際画面を見てみるとこんな形になってますね。E-mail・Password、フォームが表示されてます。

16行目を見てみると同じくinputというタグを使って表示させます。type属性に今度[ type="submit" ]を指定してます。submitとすると送信用のボタンにしますよって形になります。name属性に送信のボタンなのでsubmitという名前にしてます。

実際にこれを画面で見てみるとこういう形で送信のボタンが表示されるという形になります。

では次にチェックボックスの方を見ていきたいと思います。チェックボックスも同じようにinputというタグを使ってフォームを表示させます。type属性に今度は[ type="checkbox"]とすることでチェックボックスのフォームが表示される形になります。で[東京]という文字を表示させて東京のチェックボックスだってわかるようにしてます。

今度value属性というものをつけてます。何かと言うとこのフォーム自体に値を持たせることができるんですね。表面上に画面では見えないんですけれども、このフォームチェックした時に中身は1ですよ、というものになりますこれがvalue属性というんですね。このvalue属性の値は数値でも文字でも好きなものでつけられるので何でもつけてもらって大丈夫です。同じようにinputタグを使って今度は神奈川というチェックボックスを作ってます。この二つのチェックボックスなんですけれどもname属性、同じように今回 "[pref]" としてます。でチェックボックスの場合同じname属性の同じ名前をつけることでそれがひとつのグループのチェックボックスですよ、というものを表してます。

なので同じグループ、例えば東京神奈川とかっていう形で同じ住所を指定するチェックボックスなのでそういう形でひとつのグループですよ、と表したい場合は同じ名前を付けてあげるようにしてください。これは後々お話ししますけれども同じ名前に指定して同じグループにすることで実際に送信した後の値をやり取りっていうところがちょっと違ってきますのでまあ今の時点では同じ名前にするんだよっていう形で覚えていただければと思います。
実際画面を見てみるとですねチェックボックスとして東京・神奈川というのがあって、それぞれチェックができるような形になっています。


次にラジオボタンを見ていきたいと思いますinputタグを使ってますね。[ type=” ” ]としてtypeを[ radio ]としてます。[type=”radio”]とすることでラジオボタンが表示されます。フォームの名前、name属性は[ name="gender" ]としてます。今回は性別をチェックするラジオボタンの役割をしているのでgenderという名前をつけてます。でバリューとしてvalue属性、今回は値を1を持たせてます。男をクリックすると値が1のものが値として持たされるという形になってます。

同じように数字だけじゃなくて文字列同じように男という形にすることもできますね。
下の行でも同じくinputタグを使って[ input="radio" ]としてラジオボタンを指定してます。でname属性で同じくgenderという形にしてます。でvalue属性で今度は2という値をこのフォームに持たせてます。
このname属性なんですけども先ほどのチェックボックスと同じく、genderという名前を二つ同じものをつけてます。そうすることでこのラジオボタンが一つのグループになるんですねグループにするとですね実際画面を見てもらうと男と女というラジオボタンが表示されていてどちらかをクリックするとどちらかが消される、クリックされなくなる、ということはどっちかがチェックされるような形のものになります。それがグループというものになります。

例えばですねもう一つラジオボタンを作ってみてそこにname属性を先ほどとは違うものをちょっと入れてみます。で画面を見てみるとラジオボタンが三つ表示されてるんですけれども男と女というのはひとつのグループなんですがはてなというのは違うグループになってます。なので実際にチェックをしてみると男と女はどちらかがチェックされるんですけれども、[ ? ]というのはひとつのまた別のグループなので、[男・女・?]という形で別々のグループに分かれてるっていう形になってます。
これが実際のグループの違いというものになってきます。

次にセレクトボックスを見ていきたいと思います。
セレクトボックスを作るにはセレクトというタグを使います。今回は血液型を選択するものなのでname属性に[ name="blood" ]という形をつけてます。そのselectタグの中に実際に選択をしたい内容を入れていきます。内容はoptionタグをつけて一つ一つ選択する内容を入れていくんですけれどもで、それぞれにvalue属性で値を持たせてます。例えばA型ならA、1とかで構いません、という形で付けてます。なので今回それがoptionタグたいが3つあるのでA型B型C型という選択ができるボックスを作ってます。実際に画面を見てみるとこういった形で選択ができるボックスが表示されるという形になります。

最後にテキストエリアを見ていきたいと思います。でテキストエリアは先ほどと違ってinputタグとかを使わないでtextareaタグというものを使います。同じようにname属性で名前を付けられます。よくコメント欄とかで使うものなので[ name="comment" ]という名前を付けてます。今までなかったのはcols・rowsとかあります。cols・rows属性といって何かと言うとテキストエリアの横幅と縦幅を指定してます。横幅[ cols="50"]、縦幅が33行[ rows="33" ]という形のテキストエリアです。

実際画面を見てみるとこういった形のよくコメント欄とかに使われるものが表示されるという形になります。余談ですけれどもこのtextareaのタグの中に文字を入れると、実際表示させてみると最初からそのテキストエリアの中に入れた文字が表示されている状態で最初表示される、という形になります。これがフォームと呼ばれるものの作り方になります。実際にはですね他にもinputタグを使って色々なホームを作ることはできます。基本的にはこれだけ知っておけば問題はないのでこちらの方をきちんと覚えるようにしてください。

はい、いかがだったでしょうか。フォームはウェブアプリケーション、ウェブサービスを作る上で欠かせないスキルになってきますのできちんと覚えておきましょう。

ではまたお会いしましょう、さよなら。