ログインソースのタグ構造

（ＨＴＭＬのフォームのデータ送信）

Webサイトをブラウザで開き、ユーザーIDとパスワードを入力して、ボタンをクリックしてログインをする。毎日毎日、ログインをしているけど、これはいったいどんな仕組みになってるのか気になったので調べてみました。
「へ〜そうなの〜」って感じでサラっと読んでみてくださいね(^^Aｱｾｱｾ

　↓　こういうのね




■タグコードはどうなってるの？
ウェブページを右クリックして、「ソースの表示」をクリックすると、そのウェブページのソースコードを見ることができるので見て欲しい。このログインするところのソースコードは大体こんな風に書かれている。
<table>、<tr>、<td> タグに囲まれて、ごちゃごちゃして分かりにくいが・・。

---

<form action="../index.cgi" method=post>
<input type="hidden" name="mode" value="login">
<input type="text" name="id" size="11">
<input type="password" name="pass">
<input type="checkbox" value="1" name="cookie_limit">
<input type="submit" value="ログイン" name="submit">
</form>

---

要するに、ログインボタンを押すと、<form>〜</form>中にある、inputで記載されているものを　../index.cgi に送る。ということ。


■ローカルの環境でログインできるかな？
パソコンのデスクトップにhtmlファイルを作り、このタグコードを書いて、ローカル環境からウェブサイトにログインしてみよう。

<form action="../index.cgi" method="post">
action=""はログインを実行するアドレス。上記のように相対アドレスで書かれていることが多いので、絶対アドレスに書き換える。
target="_blank"を付け加えると、ログイン後のページを「新しいウィンドウ」で開くことが出来る。
書き換え後：
<form action="http://pointget20.fc2web.com/index.cgi" method="post" target="_blank">


<input type="hidden" value="ｌogin" name="mode">
type="hidden" は、実際に目に見えないが必要な値を格納している。値がある場合（value=""でない場合）は省略しないはいけない。


<input type="text" name="id" size="11">
value="ユーザーID"を追加し、初期値を設定。
size="11"　はテキストボックスの横の長さ。邪魔なので削除。
書き換え後：<input type="text" name="id" value="ユーザーID">


<input　type="password"　name="pass">
type="password"　は、入力した値を「*****」のように表示する。type="text"　に置き換えると、具体的な値を目で確認することが出来る。
value="パスワード"を追加し、初期値を設定。
書き換え後：<input type=text name="pass" value="パスワード">


<input type="checkbox" value="1" name="cookie_limit">
type="checkbox" はチェックボックス。value="1"だとチェックした状態になる。


<input type="submit" value="ログイン" name="submit">
type="submit" は送信ボタン。これをクリックすると　<form action=""・・・・>で指定したアドレスが実行される。
たまにボタンではなく画像の場合もある。
<input type="image" name="login" src="画像アドレス"onClick=.....などと書かれてある。悩むことはない。送信ボタンに変えてしまえ。

■あとがき
なお、上記の場合だと

<a href="http://pointget20.fc2web.com/index.cgi?mode=login&id=ユーザーID&pass=パスワード&cookie_list=1" target="_blank">ここからログイン</a>

というリンクを作ってもよい。アドレスのあとに　?　を付け、inputの情報を &　= でつなげる。

しかし、これだと、ユーザーIDとパスワードの値が見えない。
また、フォームは文字列をURLエンコードに変換して送信するため上手く行かない場合もある。


■おまけ。実践
実際にヤフーメールにログインしてみよう！
下記のソースコードを自分のhtmlファイルに貼ってみてください。
赤文字のユーザーIDとパスワードは自分のものに置き換えてくださいね。
このままでは当然ログインはできません。

↓ソースコード
<form method=post action="https://login.yahoo.co.jp/config/login?" target="_blank">
<input type=hidden name=".tries" value="1">
<input type=hidden name=".src" value="www">
<input type=hidden name=".intl" value="jp">
<input type=hidden name=".v" value="0">
<input type=hidden name="hasMsgr" value="0">
<input type=hidden name=".chkP" value="Y">
<input type=hidden name=".done" value="http://mail.yahoo.co.jp/">
<input name="login" value="ユーザーID">
<input name="passwd" type="text" value="パスワード">
<input name=".save" type="submit" value="Login">
</form>
<a href="https://login.yahoo.co.jp/config/login?.tries=1&.src=www
&.v=0&hasMsgr=0&.chkP=Y&.done=http://mail.yahoo.co.jp/
&login=ユーザーID&passwd=パスワード" target="_blank">
ここからログイン</a>



↓こういう感じのフォームとリンクができます。

ここからログイン




■参考サイト
とほほのＷＷＷ入門＞逆引きリファレンス＞フォーム
フォームデータの送信
林道の鬼＞Visual Basic のコーナー＞VB で URL エンコード