メモ

メモを入力してみよう!


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

練習を見る

学習概要

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

補足

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

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

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

ログインが必要です

この練習への質問一覧

ログインが必要です

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

【入門】HTML言語・CSS言語初心者 について学んでいきたいと思います。

今回学んでいくのはこちら。【入門】HTML言語・CSS言語初心者ホームを作ってみよう。では前回と同じくフォルダを作成しましょう。【入門】HTML言語・CSS言語初心者作成したフォルダの中に最初に作った HTML ファイルをコピーします。コピーしたらファイルを編集していきましょう。 BODY タグの中にこちらの行動変えてみてください書き終わったら補導しファイルをブラウザで開いていましょう。ホームが表示されれば完成です。

次にチェックボックスを作ってみましょう。【入門】HTML言語・CSS言語初心者 form タグの中にこちらの行動を書いてみてください保存押しブラウザで開いてみてこちらのような表示がされれば完成です次にラジオボタンを作ってみましょう。

同じくホームタイムの中にこちらの行動変えてみてください。【入門】HTML言語・CSS言語初心者書き終わったら保存をし同じようにブラウザで開いてみてください。

こちらのような画面が表示されれば完成です次にセレクトボックスを作ってみましょう。同じくホームタグの中にこちらの行動変えてみてください。書き終わったら保存押しブラウザで表示させてみましょう。【入門】HTML言語・CSS言語初心者こちらのような表示がされれば完成です最後にテキスト例を作っていきましょう同じく form タグの中にこちらの行動変えてみてください書き終わったら保存押しブラウザで表示させてみましょう。こちら側の表示がされれば完成です。

かコード中身をこれから見ていただいますとまんですね。ふもというのは例えばホームページとかだと乙女4であったり後はユーザー登録をホームであったりそういったとこで突かれるものの公務と呼ばれるのですでホームを作るにはフォームタグというものを使っていきますこのフォームタグの中に実際表示させたいフォームの種類によって色々なタグを変えていくという形になります。

【入門】HTML言語・CSS言語初心者リフォームの中を見てみるとですね一行目コカの葉 E メールという文字を変えてますで BR というタグがあってごらん改行のタグですねその下にインプットというタグを使ってフォームを表示させてますこのタグにですねタイプという属性をつけてテキストという形に値をしてますでもテキストとするとですねテキストフォームというものが作れる形になりますで次にねーむという属性をつけてますまた医院メールとしてますけどもこれ name 属性というのはこの方もひとつひとつにですね名前をつけるんですね。【入門】HTML言語・CSS言語初心者今回はこの訪問 E メールのホームとして使いたいので名前を E メールという形で付けてます同じようにそのしたパスワードという文字を表示させて BR というタグで改行してますへその下にインプットという単語同じように使ってホームを表示させますよねタイプ属性にテキストを指定してのでテキストをホームを表示させます name 属性にぱすーとしているのでこのホームの名前は明日っていう形にしてますよというものになってますね【入門】HTML言語・CSS言語初心者ジッサイ画面を見てみるとこんな形になってますね email パスワードとフォームが表示されてますで16行目を見てみると同じくインプットというタグを使って表示させますタイプ属性にこのサブミットを指定してますをサブミットとすると送信用のボタン送信用のボタンにしますよって形になります。

で name 属性にマーク送信のボタンなのでサブミットという名前にしてますで実際にこれを画面で見てみるとこういう形で送信のボタン表示されるという形になりますでは次にですねチェックボックスの本を見て でチェックボックスもできても同じようにインプットというタグを使ってホームを表示させます音 TYPE 属性に今度はチェックボックスとしてますチェックボックスとすることでチェックボックスのホームが表示される形になります音音音東京という文字を表示させて今東京のチェックボックスだってわかるようにしてます。

【入門】HTML言語・CSS言語初心者でこの Value 属性というものをつけてます何かと言うとこのフォーム自体に値を持たせることができるんですね表面上に画面が見えないんですけれどもこのフォームチェックした時に中身は1ですよというものになりますこれが Value 属性というんですねこの Value 属性の値は数値でも文字でも好きなものでつけられるので何でもつけてもらって大丈夫ですね同じようにインプットタグを使って今度は神奈川というチェックボックスを作ってて【入門】HTML言語・CSS言語初心者この二つのチェックボックスなんですけれども a name 属性同じように今回プレイかっこかっことじとしてますでチェックボックスの場合ですね同じ name 属性の同じ名前をつけることでそれがひとつのグループのチェックボックスですよというものを表してます。

ので同じグループ例えば東京神奈川とかっていう形で同じ住所を指定するチェックボックスなのでそういう形でひとつのグループですよーたらしたい場合は同じ名前を付けてあげるようにしてくださいね。【入門】HTML言語・CSS言語初心者これは後々ちょっとお話ししますけれども同じ名前に指定して同じグループにすることで実際に送信した後の値をやり取りっていうところがちょっと違ってきますのでまあ今の時点では同じ名前にするんだよっていう形で覚えていただければと思います。【入門】HTML言語・CSS言語初心者実際画面を見てみるとですねチェックボックスとして東京神奈川というのがあってそれぞれチェックができるような形になっています次にですねラジオボタンを見ていきたいと思いますもしあのですねお72 input タグを使ってますねタイプとしてタイプをラジオとしてますタイプをラジオとすることでラジオボタンが表示されますホームの名前 name 属性はジェンダーとしてます今回は性別をチェックするラジオボタンの役割をしているのでジェンダーという名前をつけてますでバリューとして Value 属性運今回は値を1を持たせてます男をクリックすると値が1のものがいい値としても足されるという形だってます。

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

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

これが実際ととグループの違いというものになってきます次にですねセレクトボックスを見ていきたいと思いますセレクトボックスを作るには【入門】HTML言語・CSS言語初心者セレクトという歌を使います 今回は血液型を選択するものなので name 属性にブラッドという形をつけてますその SELECT タグの中にですね実際に洗濯をしたい内容を入れていきますね内容 OPTION タグをつけて一つ一つ選択する【入門】HTML言語・CSS言語初心者内容を入れていくんですけれどもでそれぞれにですね Value 属性で値を持たせてます食べ方なら8か1とかで構いませんという形で付けてますので今回それがオプションたいが三つあるので a型 B 型 C 型という選択ができるボックスを作ってます実際に画面を見てみるとですねこういった形で洗濯ができるボックスが表示されるという形になります。

最後にですねテキストエリアを見ていきたいと思いますでテキストエリアは下げると違ってです input タグと火を使わないでテキストエリアタグというものを使いますで同じように name 属性で名前を付けられますがよくコメント欄とかで使うものなので【入門】HTML言語・CSS言語初心者コメントという名前男の子振り付けてます今までなかったのは小ローズローズとかありますこれぞローズ属性となっても何かと言うとテキストエリアの横幅と縦幅を指定してます横幅ゴルスラ50でローズ縦幅が33行の形ですねという形のテキストエリアですので実際画面を見てみるとこういった形の翼コメント欄とかに使えるものが表示されるという形になります4弾ですけれどもこのテキストエリアのタグの中にですね【入門】HTML言語・CSS言語初心者と大文字を入れると実際表示させてみるとですね最初からそのテキストエリアの中に入れた文字が表示されている状態で最初表示されるという形になりますこれがですね【入門】HTML言語・CSS言語初心者ホームと呼ばれるものの作り方になりますね実際にはですね他にも input タブを使って色々なホームを作ることはできます基本的にはこれだけ知っておけば問題はないのでこちらの方をきちんと覚えるようにしてくださいはいから大正かですねメールアプリケーションタイムサービスを作る上で欠かせないスキルになってきますのでチートを覚えておきましょうではまたお会いしましょうさようなら