HTML

【課題付き】練習問題で定着!HTMLのフォーム作成の復習

どうも、つよぽんです!

今回はHTMLのフォーム作成の練習問題に取り組んでもらうのが目的の記事となります。

この記事の想定読者は次のとおりです。

想定読者
  • HTMLのフォーム作成に必要な知識を定着させたい人
  • HTMLのフォーム作成の課題に取り組んで現在の自分のレベルを確認したい人

ここまで7回に分けてフォーム作成に必要な知識記事とスライドで解説してきました。

インプットだけでは学んだつもりで終わってしまい、実際には手を動かせないということもあるので、アウトプットによって知識を定着させようというのが今回の狙いです。

練習問題は以下の記事から確認することが出来るので、今すぐ課題に取り組みたい方は以下のリンクから早速課題ページにアクセスして取り組んでいただけたらと思います。

あわせて読みたい
【エクササイズ】HTMLのフォーム作成の復習ここまで学んできたHTMLのフォームの理解度を確認するために練習課題に取り組んでもらいます。忘れているところがあったら、学習した過去記事のリンクを貼っておくので、学習コンテンツの復習を繰り返すことで知識が定着していくでしょう。...

上のリンクから課題をやってもらうのがこの記事の最終的な目的となりますが、今まで学んできた「HTMLのフォーム作成」に必要な知識の学習内容をあらためてふりかえってみます。

今回の内容は以下のとおりです。

今回の内容
  • HTMLのフォーム作成に必要な知識をふりかえる

HTMLのフォーム作成に必要な知識をふりかえる

これまで学んできたHTMLのフォーム作成に必要な知識は以下の7つです。

学んだ7つの内容
  1. HTMLのフォームで出来ることを知る【図解付き・概要解説】
  2. HTMLのinputタグで出来ることを知る【図解付き】
  3. HTMLのformタグの使い方【action・method】
  4. 【図解付き】HTMLのlabelとinputの連携方法【2種類】
  5. 【図解付き】HTML5のフォームバリデーションの使い方
  6. 【図解】HTMLのselectとoptionで選択ボックスを作る
  7. 【図解】HTMLのtextareaの使い方【改行できるinput】

上記7つそれぞれで学んだ内容をでざっくりまとめてみます。復習のつもりで記事を読み進めてもらえたらと思います。

学習した記事リンクも貼っているので、わからないところ、忘れているところがあればリンク先の記事を読んで思い出してみましょう。

HTMLのフォームで出来ることを知る【図解付き・概要解説】

あわせて読みたい
HTMLのフォームで出来ることを知る【図解付き・概要解説】HTMLのフォームの主な役割をご存知ですか?HTMLのフォームを使うにはHTMLだけでなく、Webサーバーでフォームで送信するデータを受け取るようにしなければいけませんが、まずはフロントエンド側で出来ることの概要を解説します。...

この記事では、そもそもフォームを使うことによって何が出来るようになるのかを解説しました。

フォームを使うことによって、ユーザーが任意のデータをサーバーに送ることが可能になります。任意のデータとは以下のようなものです。

任意のデータ例
  • Twitterのツイート
  • ブログの記事内容
  • Webサービスに登録する際のユーザー情報

そして、HTMLのフォームを作成するために使われるタグにどんなものがあるのかを説明しました。

具体的なタグの使い方については1つずつ別記事で解説し、次以降の6つの記事がその記事となります。

HTMLのinputタグで出来ることを知る【図解付き】

あわせて読みたい
HTMLのinputタグで出来ることを知る【図解付き】HTMLのinputを使うことでユーザーに「ユーザー名」「パスワード」などの情報を入力してもらうことができます。またtype属性によって様々な機能に切り替わるので、inputを使うことでどんなことが出来るのか解説していきます。...

この記事では、inputタグを使うことによって、ユーザーに文字を入力してもらうフォームを作成したり、チェックボックスラジオボタンといった選択式のフォームを作成できることを説明しました。

inputタグ約20種類の機能を持ち、type属性にセットする値によって機能を切り替えることが可能となります。

ただ、あくまでもinputタグはデータの入力・選択を行うのみで、実際にデータを送るには次に説明するformタグを使います。

HTMLのformタグの使い方【action・method】

あわせて読みたい
HTMLのformタグの使い方【action・method】前回はinputタグを使ってユーザーによって情報を入力して貰う方法を解説しました。今回は入力した情報を実際にサーバーに送るのに使われるformタグの解説をします。データの送り先・送る手段(HTTPメソッド)の指定方法を図を使って解説します。...

この記事では、formタグを使うことによってユーザーが入力・選択したデータをサーバーに送ることが可能だということを解説しています。

また、formタグで使われるaction属性method属性の使い方についても説明しています。

【図解付き】HTMLのlabelとinputの連携方法【2種類】

あわせて読みたい
【図解付き】HTMLのlabelとinputの連携方法【2種類】labelタグを使っていますか?HTMLでinputタグとlabelタグを組み合わせると、入力フォームの意味をユーザーに伝えるだけでなく、ちょっとした便利機能も追加されます。今回の記事ではinputタグとlabelタグ関係性について解説します。...

この記事では、labelタグを使うことによって、inputタグにどんな情報を入力してもらいたいのか意味をもたせることが出来ることを解説しています。

この「意味をもたせる」というのは、ユーザーにとってはキャプションという意味を伝えて、ブラウザにとってもどのlabelタグどのinputタグが関係づけされているのか理解することが可能という意味です。

このようなコーディングを「セマンティック」なコーディングと呼び、セマンティックの意味についてもこの記事で解説しています。

【図解付き】HTML5のフォームバリデーションの使い方

あわせて読みたい
【図解付き】HTML5のフォームバリデーションの使い方HTML5から新たに用意されたフォームバリデーション。今まではフロントエンドのバリデーションを行うためにはJavaScriptでプログラムする必要がありました。しかしHTML5のフォームバリデーション機能を使うことでプログラミングを必要とせずバリデーションを行えるようになりました。...

この記事ではバリデーションについての意味と、バリデーションを行う意義について解説します。

バリデーションはフロントエンドによるバリデーションと、バックエンドによるバリデーションが存在します。そして、フロントエンドバックエンドでバリデーションの役割は厳密には異なるということも説明します。

そして、バリデーションの意味・意義の解説だけでなくどのようにしてHTMLでバリデーションを行うのかについても解説しています。

【図解】HTMLのselectとoptionで選択ボックスを作る

あわせて読みたい
【図解】HTMLのselectとoptionで選択ボックスを作る今回はHTMLで選択ボックスをどうやってつくるか解説していきます。選択ボックスとはどういうもの?選択ボックスはどうやって作るの?選択したデータをどのようにサーバーに送るの?これらの疑問を画像を使いながら説明します。...

この記事では選択ボックス型の選択フォームの作り方を解説しています。

さきほど解説したinputタグを使った選択式のフォームと何が異なるのかについても、この記事を読むことで理解できるでしょう。

【図解】HTMLのtextareaの使い方【改行できるinput】

あわせて読みたい
【図解】HTMLのtextareaの使い方【改行できるinput】ユーザーが文字を入力するためのフォームを作りたいときにまず先に思い浮かぶのがinputタグ。しかしinputでは1行の入力が行えず、ツイートのように複数行入力できるようにしたい場合は今回説明するtextareaタグを使います。...

この記事では、複数行入力ができるフォームの作り方について解説しています。

inputタグを使った入力フォームでは、1行入力しか出来ませんでしたが、textareaタグを使うことにより複数行入力が可能となります。

まとめ

今回の記事は、これまで学んできたHTMLのフォーム作成に必要な知識の定着を目的とした記事で、あらためて今まで学習してきた内容7つをふりかえりました。

ふりかえった7つの内容
  1. HTMLのフォームで出来ることを知る【図解付き・概要解説】
  2. HTMLのinputタグで出来ることを知る【図解付き】
  3. HTMLのformタグの使い方【action・method】
  4. 【図解付き】HTMLのlabelとinputの連携方法【2種類】
  5. 【図解付き】HTML5のフォームバリデーションの使い方
  6. 【図解】HTMLのselectとoptionで選択ボックスを作る
  7. 【図解】HTMLのtextareaの使い方【改行できるinput】

上記内容をふりかえり、HTMLのフォーム作成に必要な知識を定着させるために、以下の記事で練習問題にとりかかってみてください。

あわせて読みたい
【エクササイズ】HTMLのフォーム作成の復習ここまで学んできたHTMLのフォームの理解度を確認するために練習課題に取り組んでもらいます。忘れているところがあったら、学習した過去記事のリンクを貼っておくので、学習コンテンツの復習を繰り返すことで知識が定着していくでしょう。...

頭では理解してても実際に手を動かしてみて手が進まないところがあれば、それは理解が不十分だということを意味します。

練習問題をやっててわからないところ、質問したいところがあればお気軽に以下からご連絡いただけたらと思います^^

あわせて読みたい
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!プログラミングやWebで困っていることに対して何でも質問受け付けています。「こんなこと質問しても大丈夫かな」と思っている方のために過去にどんな質問があったのか一例で挙げているので参考にしていただけたらと思います。...

それでは、課題頑張ってください!

【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です