HTML5を使ってログインフォームを作ってみる

2018年1月8日追記
こちらの記事は2015年に書かれたものになります。私自身、webの知識が乏しかったため内容に不適切な表現がありますことをお詫びいたします。
また、ログインフォームに関しまして、最新版としまして
2018年最新版!オシャレなログインフォーム10選を作成いたしました。
是非そちらも参考にしていただけますと幸いです。

会員登録制のwebサイトや、投稿するにはユーザー登録が必要なSNS。
よく見かけるログイン画面ですが、あの仕組みってどうなっているのだろう?
 
ブログのコメント記入欄があるページや、個人情報を入力して送信するページ。
実はどれも基本にHTMLの”フォーム”というものが使われています。
 
”データを送信するためには「何を」「どこに」「どうやって」送るかを示さなければなりません。
フォームはこのための手段を提供します。
HTMLのフォームは、データを入力するための手段(コントロールと呼びます)と、
それに関するラベルや説明から構成されるひとまとまりのセクションです。
「何を」送信するかを示すためにこのセクションの範囲を明示し、
「どこに」「どうやって」送信するかを設定します。この枠組みを提供するのがform要素です。”
 
基本的なフォームより引用

 
 
HTML5ではなく古い記事ですが、フォームの基本を知るには、上記サイトが分かりやすいかな。
 
HTML5ではtype属性の値がかなり追加されているのですね。
フォーム部品の種類を指定するtype属性の値
 
 

まず今回作りたいのは、UserIDとPasswordを入力して認証を受ける画面(モックアップ)なので
HTML5とCSSで書いてみます。
 
 

 
 
ちなみに、ログイン画面(login.html)
のサイトにはweb認証を指示するための記述はこう書きなさいって書いてあります。
 

 

うーーん。記事ごとで記述内容が異なるのでわからなくなてきました。
action=”/cgi-bin/Login.cgi”とはなんぞや。
 
・CGIをおく ディレクトリ(仮想ディレクトリ) の名前 → cgi-bin
CGIプログラムのことで、ようはログインの認証プログラムの事なのかな。
http://www.kent-web.com/pwd/login.html
とこのサイトをみて思った。
 
 
他にも分からない事があってググって調べてみるとこのような記事も。
input type = password autocomplete = off は使ってはいけない
使ってはいけないの????
 
autocompleteとは
form要素に autocomplete=”” を追加すると、オートコンプリート機能(入力内容の自動補完)を有効にするかどうかを指定できるもの。
参考:autocomplete=””
 
 

調べれば調べるほど、なんだかよく分からなくなってきました…
 
何が正解かは、どういう動作をさせたいのかをよく考える必要がありそうなので
とりあえず、CSSを書いてみて完成させます。
 
 

 
 
CSSボタンの作成はこのジェネレーターが便利でしたよ。
CSS Button Generator
 

こんな感じで完成?!です。
 
login
 
 
ログイン画面デモ
 
あくまでも練習用として作ってみたので、実際に使えるようになるデザインでもないですが
ログイン画面用のモックアップとしてHTMLのフォームの復習としておきます。
 
ここから先の、実際にボタンを押したらどうするか。
プログラミングの事はまだ勉強不足なので、ひとまずここまで。
 
ググって迷走してしまっている所は再度調べて明確にしておかねば。
たった一つのフォームでもプログラムが絡むと奥が深いですねえ。。。
 
そして、知識不足で間違いの記載が多々あるかもしれませんので
間違いを発見した際はコメントにてお知らせいただけると嬉しいです。
 

あわせて読みたい

コメントを残す

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