サルでもわかる？かんたんHTML トップページ
>>> ＃８．フォーム
>>> 入力欄（1行）を作ろう
「今回やるのはこれじゃ。」
「パスワードの入力もできるんですね！」
「うむ。ただこれは、画面上では見えないだけで
完全に暗号化されるわけではないぞぃ。
送信されたデータを見れば簡単に解読できてしまうからのぅ。
使うときには注意が必要じゃ。」
「なるほど･･･。
先生、このフォームに入力して送信したら
どんなメールが届くんですか？」
「ふむ･･･。では今回から、作ったフォームを送信すると
どんなメールが届くのかも見ていこうかのぅ。
とりあえず、タグを見てみるぞぃ。」
入力欄（1行）を作るタグ
-----------------------------------------------------------------
<INPUT type="■"> ： 〜の入力欄（1行）を作る。
（■には text,password を入れる）
name="●" ： 入力欄に●と名前をつける。
（●には自分でわかりやすい名前を入れる）
value="▲" ： 入力欄にあらかじめ▲と入力しておく。
（▲にはあらかじめ表示しておきたい文字を入れる）
size="◆" ： 入力欄の幅を◆にする。
（◆には数字を入れる）
maxlength="★" ： 最大★文字まで入力可能にする。
（★には数字を入れる）
-----------------------------------------------------------------
「今回はずいぶんたくさんですね･･･。
一番上の <INPUT type="■"> って
送信・リセットボタンを作ろう で出てきたタグと一緒ですね。」
「そうじゃ。このタグに text,password を入れるだけで
入力欄に変わるんじゃよ。」
「なるほど。
2番目の name="●" は、入力欄に名前をつける、って書いてあるけど･･･。
どういう意味ですか？」
「これはフォームの内容がメールで送られてきたときに
必要になってくる設定なんじゃ。
詳しくはまた後で説明するぞぃ。」
「わかりました。
3番目の value="▲" っていうのも
前回の ボタンに表示する文字を変えよう で出てきましたよね。」
「うむ。
前回はボタンに表示したい文字を変えるときに使ったが、
今回は入力欄にあらかじめ入れておきたい文字を入力するんじゃ。
サンプルでいうと、ホームページアドレスの http:// や
パスワードの部分じゃな。」
「ふむふむ。
この入力欄もボタンみたいに、enterキーで改行したら
複数行になるんですか？」
「いや、今回は1行だけの入力欄じゃから、
改行しても入力欄の高さは変わらんぞぃ。
複数行の入力欄はまた別のタグを使うんじゃよ。
幅は size="◆" 調節できるぞぃ。
では、実際に使ってみるが、今回から実際に送信してみるので
送信・リセットボタンも一緒に表示しておくぞぃ。」
「ちょっといろいろ指定しておってややこしいが･･･。
ではブラウザで見てみるぞぃ。」
「それでは実際にこれを送信してみると
どんなふうにメールが届くのか見てみるぞぃ。
フォームの上の欄から順に
・自分の名前 → もんちき
・担任の先生の名前 → ぱんだ先生
・友達の名前 → うさこ
・ホームページアドレス → http://saru-html.pupu.jp/
・会員番号 → 12345
・パスワード → saru
と入力して送ってみるぞぃ。
action="mailto:自分のアドレス" の部分に
自分のメールアドレスを入れてから送信ボタンを押してくれぃ。」
「左側の 自分＝ とか 先生＝ とかって
name="●" で入力した部分ですよね？
入力欄に名前をつけるって、こういうことだったんだ。」
「わかったかのぅ？
ちなみに、友達の名前で入力した「うさこ」が表示されておらんじゃろ？」
「ほんとだ。
これは name="●" を入力しなかったからですね。」
「その通り。ブラウザでは入力してもしなくてもちゃんと表示されるが
メールで内容を受け取るためには、入力を忘れちゃいかんぞぃ。
そのほかの value="▲",size="◆",maxlength="★" は
必要なものだけ使うといいぞぃ。」
「わかりました。
text="password" で入力した文字は
メールで送信すると丸見えになっちゃうんですね。」
「うむ。くれぐれも使い方には注意するんじゃぞぃ。
今回はこれでおしまいじゃ。」
↑ページのTOPへ
サルでもわかる？かんたんHTML トップページ >>> ＃８．フォーム >>> 入力欄（1行）を作ろう
「今回やるのはこれじゃ。」| サンプル |
|
なまえ ホームページアドレス パスワード |
「パスワードの入力もできるんですね！」
「うむ。ただこれは、画面上では見えないだけで完全に暗号化されるわけではないぞぃ。
送信されたデータを見れば簡単に解読できてしまうからのぅ。
使うときには注意が必要じゃ。」
「なるほど･･･。先生、このフォームに入力して送信したら
どんなメールが届くんですか？」
「ふむ･･･。では今回から、作ったフォームを送信するとどんなメールが届くのかも見ていこうかのぅ。
とりあえず、タグを見てみるぞぃ。」
入力欄（1行）を作るタグ
-----------------------------------------------------------------
<INPUT type="■"> ： 〜の入力欄（1行）を作る。
（■には text,password を入れる）
name="●" ： 入力欄に●と名前をつける。
（●には自分でわかりやすい名前を入れる）
value="▲" ： 入力欄にあらかじめ▲と入力しておく。
（▲にはあらかじめ表示しておきたい文字を入れる）
size="◆" ： 入力欄の幅を◆にする。
（◆には数字を入れる）
maxlength="★" ： 最大★文字まで入力可能にする。
（★には数字を入れる）
-----------------------------------------------------------------
「今回はずいぶんたくさんですね･･･。一番上の <INPUT type="■"> って
送信・リセットボタンを作ろう で出てきたタグと一緒ですね。」
「そうじゃ。このタグに text,password を入れるだけで入力欄に変わるんじゃよ。」
「なるほど。2番目の name="●" は、入力欄に名前をつける、って書いてあるけど･･･。
どういう意味ですか？」
「これはフォームの内容がメールで送られてきたときに必要になってくる設定なんじゃ。
詳しくはまた後で説明するぞぃ。」
「わかりました。3番目の value="▲" っていうのも
前回の ボタンに表示する文字を変えよう で出てきましたよね。」
「うむ。前回はボタンに表示したい文字を変えるときに使ったが、
今回は入力欄にあらかじめ入れておきたい文字を入力するんじゃ。
サンプルでいうと、ホームページアドレスの http:// や
パスワードの部分じゃな。」
「ふむふむ。この入力欄もボタンみたいに、enterキーで改行したら
複数行になるんですか？」
「いや、今回は1行だけの入力欄じゃから、改行しても入力欄の高さは変わらんぞぃ。
複数行の入力欄はまた別のタグを使うんじゃよ。
幅は size="◆" 調節できるぞぃ。
では、実際に使ってみるが、今回から実際に送信してみるので
送信・リセットボタンも一緒に表示しておくぞぃ。」
| メモ帳 |
|
<BODY>〜</BODY> の間に入力
<FORM action="mailto:自分のメールアドレス" method="post" enctype="text/plain"> 自分の名前<BR> <INPUT type="text" name="自分"> 担任の先生の名前<BR> <INPUT type="text" name="担任の先生" size="10"> 友達の名前<BR> <INPUT type="text"> ↑ もし name="●" を入力し忘れるとどうなるか試してみるぞぃ。 ホームページアドレス<BR> <INPUT type="text" name="URL" value="http//"> 会員番号<BR> <INPUT type="password" name="ID" value="12345"> パスワード<BR> <INPUT type="password" name="pass" maxlength="4"> <INPUT type="submit" value="送信するぞぃ。"> <INPUT type="reset" value="リセットするぞぃ。"> ↑ 送信・リセットボタンを設置しておくぞぃ。 </FORM> |
「ちょっといろいろ指定しておってややこしいが･･･。ではブラウザで見てみるぞぃ。」
| ブラウザ |
|
|
「それでは実際にこれを送信してみるとどんなふうにメールが届くのか見てみるぞぃ。
フォームの上の欄から順に
・自分の名前 → もんちき
・担任の先生の名前 → ぱんだ先生
・友達の名前 → うさこ
・ホームページアドレス → http://saru-html.pupu.jp/
・会員番号 → 12345
・パスワード → saru
と入力して送ってみるぞぃ。
action="mailto:自分のアドレス" の部分に
自分のメールアドレスを入れてから送信ボタンを押してくれぃ。」
| メール |
|
自分＝もんちき 先生＝ぱんだ先生 URL＝http://saru-html.pupu.jp/ ID＝12345 pass＝saru |
「左側の 自分＝ とか 先生＝ とかってname="●" で入力した部分ですよね？
入力欄に名前をつけるって、こういうことだったんだ。」
「わかったかのぅ？ちなみに、友達の名前で入力した「うさこ」が表示されておらんじゃろ？」
「ほんとだ。これは name="●" を入力しなかったからですね。」
「その通り。ブラウザでは入力してもしなくてもちゃんと表示されるがメールで内容を受け取るためには、入力を忘れちゃいかんぞぃ。
そのほかの value="▲",size="◆",maxlength="★" は
必要なものだけ使うといいぞぃ。」
「わかりました。text="password" で入力した文字は
メールで送信すると丸見えになっちゃうんですね。」
「うむ。くれぐれも使い方には注意するんじゃぞぃ。今回はこれでおしまいじゃ。」
↑ページのTOPへ
|
ボタンに表示する文字を変えよう <<< 前のページへ戻る |
入力欄（複数行）を作ろう 次のページへ進む >>> |
サルでもわかる？かんたんHTML トップページ >>> ＃８．フォーム >>> 入力欄（1行）を作ろう
