list list2
サプリメント・ダイエット・美容
健康や美容、サプリメント、ダイエット商品を紹介しています。

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

(HTMLのフォームのデータ送信)

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="login" 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>




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


ここからログイン




■参考サイト
とほほのWWW入門>逆引きリファレンス>フォーム
フォームデータの送信
林道の鬼>Visual Basic のコーナー>VB で URL エンコード
健康ジャンル
健康全般
 ・お水
 ・育毛
 ・健康ショップ
 ・健康食品
 ・健康茶・青汁
 ・自宅で検査
 ・性の悩み
 ・腸内洗浄
 ・目の健康
カテゴリ
レンタルサーバー・ホスティング
美容全般
 ・アミノ酸
 ・アロマテラピー・ロハス・癒し
 ・サプリメント
 ・スキンケアトライアル
 ・スキンケア
 ・ダイエット
 ・ヘアケア
 ・ボディケア
 ・化粧品
 ・
 ・美容ショップ
 ・美容器・美顔器
 ・美容整形・エステ
グルメ・食品
 ・飲料・酒
 ・肉専門店
 ・魚専門店
 ・スイーツ・お菓子
ブログ・情報交換・地域・海外情報
アート・写真
ビジネスサービス
 ・ウェブサイト作成サービス
インターネットサービスプロバイダー
ゲーム・玩具・ギャンブル
 ・ゲーム
 ・パチンコ・パチスロ
 ・玩具
 ・競輪・競艇など
 ・競馬予想
教育・学校・資格・講座
 ・英会話・英語
ペット・ペット用品
オフィス用品
結婚情報
コミュニティ
 ・出会い系サイト(有料)
 ・出会い系サイト(男女共無料)
 ・出会い系サイト(比較サイト)
ファッション・雑貨・アクセ
 ・アクセサリー
 ・ファッション
 ・雑貨
 ・(開運)お洒落なブレスレット
 ・(開運)幸せをよぶネックレス・ペンダント
 ・ティファニー選び
懸賞・メルマガ
ギフト・花・ガーデニング
 ・園芸
エンタメ(書籍・音楽・映画等)
株式・証券
 ・口座開設・資料請求
ポイントサービス
旅行・航空券
 ・格安航空券予約
就職・転職・仕事情報
ASP(WEBサービス)・ソフトウェア
金融
 ・一定期間無利息ローン・キャッシング
 ・クレジットカード
 ・ローンキャッシング
家庭・子供用品・家具
 ・家具
 ・家庭
 ・子供用品
車・バイク
 ・自動車保険一括見積り
 ・車買取・車査定
不動産・賃貸・引越
広告メディア
 ・アフィリエイトプロバイダ
チャット
 ・女性募集中
 ・男性募集中
スポーツ・趣味
ノウハウ・ハウツー・セミナー
 ・出会いマニュアル
 ・ネットビジネス
 ・美容・健康
 ・ギャンブル
 ・教育・自己啓発
 ・投資・資産運用
 ・恋愛・結婚
電話・通信
ショッピング全般・モール・オークション
 ・激安香水
 ・格安コンタクトレンズ
 ・出品募集中
女性向サービス
 ・占いサイト
パソコン・家電
 ・ウェブカメラ・ウェブカメ
SOHO・在宅ワーク
保険
健康全般
 ・お水
 ・育毛
 ・健康ショップ
 ・健康食品
 ・健康茶・青汁
 ・自宅で検査
 ・性の悩み
 ・腸内洗浄
 ・目の健康
そのた
(etc)  Copyright (C) 2008 サプリメント・ダイエット・美容 All Right Reserve
【ホームページ作成講座】 | 本・漫画・DVD・アニメ・家電・ゲーム | Webコンサルティングサービス
業界NO1のライブチャット | 自宅でで学べる!CAD資格合格講座 | 20GB 無料のオンラインストレージ
★薬草の資格が取れる! ⇒ 【薬草ガーデン講座】 | 最新ニュース | Web検索 | ドメイン | 無料HPスペース