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

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

会員登録制の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のフォームの復習としておきます。

ここから先の、実際にボタンを押したらどうするか。
プログラミングの事はまだ勉強不足なので、ひとまずここまで。

ググって迷走してしまっている所は再度調べて明確にしておかねば。
たった一つのフォームでもプログラムが絡むと奥が深いですねえ。。。

そして、知識不足で間違いの記載が多々あるかもしれませんので
間違いを発見した際はコメントにてお知らせいただけると嬉しいです。

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

コメントを残す