list list2
Net課長のお小遣い・ネット収入
ネットでできるお小遣い稼ぎ、ネット収入、キャンペーン、懸賞、ビジネス、お得情報などを中心に紹介しています。

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

(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・在宅ワーク
ビジネスサービス
 ・ウェブサイト作成サービス
アート・写真
車・バイク
 ・自動車保険一括見積り
 ・車買取・車査定
株式・証券
 ・口座開設・資料請求
パソコン・家電
 ・ウェブカメラ・ウェブカメ
エンタメ(書籍・音楽・映画等)
結婚情報
ポイントサービス
そのた
ログインソースのタグ構造 Copyright (C) 2011 Net課長のお小遣い・ネット収入 All Right Reserve
SEO [PR]  ローン比較 再就職支援 バレンタイン 無料レンタルサーバー SEO