196の日記

完全に開発メモと雑談、その他忘れそうな計算式などを書き溜める場所になっています!

HTMLのformについてお勉強

いきなりサボりそうになった!

 

...昨夜に半ば深夜テンションで始めた日記です.さっき昨日書いた内容を確認して、その殺風景さに唖然としました。笑

 もっとこう、よくググったりしたときに出てくる個人ブログみたいな感じで書きたい!笑 まだ無理か!とりあえず、個人的に行間隔が空きすぎていて読みにくいと思ったので、もっと詰めて書こうと思います!

 

 さてとりあえず、この日記は調べたことを書いておく個人ノートのように使おうと考えております。とりあえずずいぶん前にやったPHPの内容を復習ついでにメモしようかなと、考えております!

 

とあるPHP内にこんなものが出てきました。

<form method="post" action="$_SERVER[PHP_SELF]">
<p><label for="address">Street Address:</label><br/>
<input type="text" id="address" name="address" size="30" /></p>
...
<button type="submit" name="submit" value="send">Add Entry</button>
</form>

まずこのformの中。このmethod=""の中に形式を入力すれば、データの送信形式を指定することができます。また、action="" の中に書いた場所がそのデータの送信先となります。

//使用例
<form method="post" action="view.php">
..
</form>

きっとこんな感じですよ笑

methodに指定できるものは、postとgetがありgetはURLに情報を記載して送信します。URLに情報が出るのであまり見られたくない情報に使うのはだめですね!後、文字の長さにも制限があるので注意です!postには文字数の制限はありません!情報も表には基本でないのでgetよりいいですね!getは主に検索エンジンで、postはメールフォームなどのフォームで使われていることが多いそうです!

では最初の見たコードの"$_SERVER[PHP_SELF]"とはなんだったのでしょうか。。
これはサーバ変数というもので、これでスクリプト名などが取得できるらしいです! で、PHP_SELFは現在実行しているスクリプトのファイル名で、ドキュメントルートから取得されます。僕はプライベートアドレスのhttp://192.168.33.10/以下にphpファイルなどを配置しているので、http://192.168.33.10/hoge.phpで呼んだ"$_SERVER[PHP_SELF]"は/hoge.phpになります。多分! つまり、自分のページからもう一回自分のページにジャンプしているってことかな多分!

というわけで、一行目はform内のものをpost形式で自分に送信して自分もう一回にジャンプしてるって感じです。

次はlabelの中のforですね。HTMLタグ辞典さんから、そのままもらいますと、

 

まあ、一行下のinputのid属性値を指定してあげることで、このラベルと下のインプットは仲間ですよって指定してあげてるんです。こうすると、ラベルの文字をクリックすれば、inputと連動してくれたりするらしいです!!!

続いてはinputですね。type要素には、inputする要素を指定してあげます。textを指定してあげれば文字列、ってな具合です!nameにはこのinputに名前を付けることができます。inputした値を、postから呼び出す際に目印になるのがこのnameだと思ってます!きっと! あとはまぁ、sizeはサイズです笑

最後にbuttonです。これも、その名の通りボタンを表示するものです。typeは"submit"を指定していますが、これは送信ボタンを作成するものだそうです。buttonはデフォルトでは直近の親要素に関連付けられるので、今回はこのbuttonを囲んでいるformをsubmitするボタンとなっているようです! また、type属性にはリセット用の"reset"や、その他汎用的に使える"button"も指定できるそうです。 value属性には送信されるクエリを指定できるそうです。今回はnameとvalueは使いませんでした。

これも今回は使用しませんでしたが、form属性を指定することができます。たとえば、、

<form method="post" id="hogeform" action="hoge.php">
..
</form>
<button type="submit" form="hogeform"..>hoge</button>

とすれば、親要素にformがなくても"hogeform"の送信ボタンとして機能するということだと思います!違ってたらすいません。。

 

普段はHTMLやPHPなど使わないもので(というより苦手意識がある)、今回書いたものは全部正しいのかはわかりません!ですが自分なりに腑に落ちたものを書いたので恐らく大丈夫かと。。。日記なんてこんなものです笑

今回は書いてたら夜遅くなっちゃって、最後の方はもう駆け足で書いちゃいました。。idとnameについて調べてみたかったな。。なので次回も似たようなことを書くつもりです!
夜中に書いたから誤字すごぞう。。ごめんなさい!

追記

このサイトを見たのですが、どうやらこの方法はXSS(クロスサイトスクリプティング)というセキュリティーホールになるようです。。ローカルな環境での勉強程度なら、そこまで心配することはないと思いますが、念のため覚えておきます。

また、現在僕が勉強してる本が多少古いので、書く情報も多少古い物になりがちです。