【エクササイズ】HTMLのフォーム作成の復習

課題
  • HTMLのフォームの作り方を復習します
  • GitHubに用意した課題の内容を確認して、課題クリアがこの記事でのゴールです

課題内容は以下の課題レポジトリのURLに記述しています。

課題レポジトリ

GitHub : html_excercise_for_intermediate_part_2

課題解決するために参考になる資料

HTMLのフォームの概要を理解する

あわせて読みたい
HTMLのフォームの概要を理解するHTMLのフォームとは何か?フォームで何が出来るのか?実際にタグを使って細かい使い方を覚える前に、HTMLのフォームの役割や出来ることを解説します。HTMLのフォームの概要を先に理解することでこの後学習するinputタグなど理解しやすくなります。...

HTMLのフォームがどのようにして作られているのか、先に概要を学ぶことで、この記事以降のタグごとの解説がより理解していただけるかと思います。

HTMLのinputタグの使い方を覚える

あわせて読みたい
HTMLのinputタグの使い方を覚えるHTMLでユーザーによって情報を入力・選択してもらうのに使われるinputタグについて学習します。。inputのtype属性を切り替えることにより、異なる機能を利用することが出来ます。inputの理解を深め、適切なtypeを使えるようになりましょう。...

inputタグを使うことで、1行のテキスト入力や、パスワード入力が出来ることを学びました。

また、type属性の値を変更することで、チェックボックスやラジオボタンなど異なる機能を実装することも出来ることを学習しました。

HTMLのformタグの使い方を覚える

あわせて読みたい
HTMLのformタグの使い方を覚えるHTMLのformタグを使うことでWebサーバー(バックエンド)とデータのやり取りを行うことが出来ます。「ユーザーの新規作成」「ログイン」「ブログの投稿」などWebサービスにはなくてはならないformタグの使い方を一緒に学習しましょう。...

formタグを使うことで、データの送り先や、データ送信時に使うHTTPメソッドを切り替えられることを学びました。

HTMLのlabelタグの使い方を覚える

あわせて読みたい
HTMLのlabelタグの使い方を覚えるHTMLのlabelタグを使うことでinputタグなどのユーザーによって入力される情報のキャプション(テキスト)を付けることができます。またキャプションをクリックすることで入力フォームなどにフォーカスがあたりユーザービリティが向上します。...

labelタグを使うことで、入力フォームのキャプションを付けたり、inputタグなどと連携することで、labelタグのテキストをクリックしても、フォーカスがあたるようになることを学びました。

HTMLのフォームバリデーションの使い方を覚える

あわせて読みたい
HTMLのフォームバリデーションの使い方を覚えるユーザーの入力した情報が意図したものか確認するための方法としてバリデーションというものがあります。そしてHTMLにはフォームバリデーションという機能が備え付けれられおり、簡単なデータ検証であればHTMLの属性を追加するだけで実装可能です。...

フォームバリデーション機能を使うことで、ユーザーの入力の不備や、不正な項目を事前に防ぐことが出来るということを学びました。

HTMLのselectタグ・optionタグの使い方を覚える

あわせて読みたい
HTMLのselectタグ・optionタグの使い方を覚えるサーバーに入力データを送るための方法としてinputタグを以前解説しました。今回はドロップダウン型の選択メニューからユーザーに値を選択してもらう方法について解説します。...

selectタグとoptionタグを組み合わせることで、ドロップダウン型の選択ボックスを作成することが出来ることを学びました。

HTMLのtextareaタグの使い方を覚える

あわせて読みたい
HTMLのtextareaタグの使い方を覚えるHTMLでユーザーに情報を入力してもらうときに使われるinputタグでは、1行のテキストフォームしか作成できません。しかし今回説明するtextareaタグを使うことで複数行入力が可能になります。...

textareaタグを利用することで、「<input type=”text”>」とは異なり、複数行入力できるようになることを学びました。(「<input type=”text”>」だと1行入力しか出来ません。)

質問・答え合わせ受け付けてます

課題に関して質問や答えの確認をしたい方はお気軽にご連絡をいただけたらと思います。

お問い合わせ・TwitterのDMのどちらでも受けて受けています。TwitterのDMのほうが早く気づけるので早めに返信できるかと思います。

あわせて読みたい
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!プログラミングやWebで困っていることに対して何でも質問受け付けています。「こんなこと質問しても大丈夫かな」と思っている方のために過去にどんな質問があったのか一例で挙げているので参考にしていただけたらと思います。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

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

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

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

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

無料特典を受け取る