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

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

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

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

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

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



チャレンジ内容

・フォームを作成するのに必要なタグが記述できるかどうか
・ラベルと入力ボックスの紐付けを理解しているかどうか
・チェックボックスやボタンの作り方を理解しているかどうか



フォームを作成し、入力ボックスを記述しよう


まず、フォームをつくるために、<!-- ここにフォームを記述 -->の部分に<form>タグを書きましょう。


 <!-- ここにフォームを記述 -->
<form>
</form>




そして、ラベルの部分になる文字だけをひとまず書き、入力するためのボックスを記述していきます、
<input>タグを書いてtype属性を追加し、値をtextにしておきます。


 <!-- ここにフォームを記述 -->
<form>
ユーザー名:
<input type="text">
パスワード:
<input type="text">
</form>




一度ブラウザで見てみると、ボックスに文字の入力ができるようになっています。



次に、どの入力ボックスにどのラベルが対応しているのかを紐付けできるようにしていきましょう。
<input>タグにid名を追加し、<label>タグに同じ名前をfor属性で加えます。
また、パスワードは、<input>タグの中のtype属性の値をpasswordにすると、入力したときに文字を記号で表すことできます。



 <!-- ここにフォームを記述 -->
<form>
<label for="user_id">ユーザー名:</label>
<input type="text" id="user_id">
<label for="password">パスワード:</label>
<input type="password" id="password">
</form>



保存してブラウザで見てみましょう。
ラベルをクリックするとそのラベルに対応した入力ボックスがハイライトされました。
また、パスワードのボックスに文字を入力すると、記号で表示されるようになっています。




チェックボックスとボタンを作成しよう


次に、チェックボックスを作成していきましょう。
こちらも<input>タグを使いますが、type属性はcheckboxになります。
前と同じように、labelを作ってid名で紐付けをしておきましょう。



<input type="checkbox" for="save" name="save" value="save">
<label id="save">保存する</label>




次に、<button>タグでボタンの作成をします。
ボタンに表示させたい文字を<button>タグで囲み、type属性をsubmitにして追加してください。

<button type="submit">ログイン</button>
<span class="redactor-invisible-space">
</span>




<input>タグにname属性を記述しよう


これで表示上のタグは完成ですが、
最後に、実際に情報を送信したときにそこに入力されたのがどんな情報かを示すためのname属性を、それぞれの<input>タグに記述していきたいと思います。


 <!-- ここにフォームを記述 -->
<form>
<label for="user_id">ユーザー名:</label>
<input type="text" id="user_id" name="user_id">
<label for="password">パスワード:</label>
<input type="password" id="password" name="password">
<input type="checkbox" for="save" name="save" value="save">
<label id="save">保存する</label>
<button type="submit">ログイン</button>
</form>


これで、ログインフォームの完成です。