HTMLスキル ー 第4章 チャレンジ

フォームに関するタグを使って、ログインページを作ろう!

このスキルのデータをダウンロード: Windows Mac

チャレンジ内容

HTMLの「フォーム関連のタグ」を駆使して、見本と同じになるようにログインページを作成しましょう。


使用するファイル

・チャレンジフォルダの中の「start」フォルダに入っている、「index.html」に記述していきましょう。



進め方

01.フォームの作成に必要なタグを記述し、入力ボックスの作成をしよう

・<form>タグを記述し、ラベルになる文字を書きます。
・入力ボックスを<input>タグで記述し、type属性を追加します。
・<input>タグにid名、<label>タグにfor属性を追加して、紐付けをします。




02.チェックボックスの作成をしよう

・<input>タグを記述します。
・type属性を追加し、値をcheckboxにします。
・<input>タグにid名、<label>タグにfor属性を追加して、紐付けをします。





03.ログインボタンの作成をしよう

・<button>タグを追加して、ボタンに表示させたい文字を囲みます。
・type属性を追加し、値をsubmitにします。




04.最後に、<input>タグにname属性を追加しよう

・実際に情報を送信したときにそこに入力されたのがどんな情報かを示すためのname属性を、それぞれの<input>タグに追加しましょう。




このような手順で進めて、ログインフォームの作成にチャレンジしましょう。