HOMEへ   ホームページを作ろう |レンタルサーバいろいろ
TOPB B SScriptPCMY-LOG
Click Here!

作 成

作 成 2

基礎知識

装 飾 術

<<前へ  |123456789101112131415|  次へ>>

最安値でイッキにまとめ買いブックオフオンラインのオトナ買い [PR]

● フォームの表示

フォームって・・・?メールを送るためのページとか、掲示板への書込みにある、 下↓のような部分を作るためのHTML要素群で、主に情報を送るのに利用します。
ただし、HTML要素だけでは情報の変更(更新)などの動的作業をすることは出来ませんので、 通常は『JavaScript』や『CGI』、『PHP』などのスクリプトと連携して使用します。

お名前 
ふりがな 
E-Mail 
使用機器

ご意見、ご要望があればどうぞお気軽にご記入ください

男性
女性

 
※機能していますので送信しないようにご注意を。

送信をクリックすると、メールを送ることができます。
ただし、これはHTMLだけでメールを送信しているように振る舞いますが、 実際にメールを送信しているは、閲覧者が設定している標準のメール送受信アプリケーションです。 つまり、この場合、フォームが行っているのは、 入力した情報を標準のメーラーに送るだけです。
よって、ここから送られたメールは、送信者の標準メールアドレスで届きます。
実際に何人か来てます・・・ メーラーの設定で、作成されたメールを即時発送にしていると気づかないのかもしれませんね。
まぁ、似非メール送信フォームとでもいいましょうか・・・(^^;。
本来はCGIやPHPなどのサーバーサイドスクリプトを使用します。

FORM要素

名前の通りフォームを作るときの基本となる要素です。下↓のように記述します。
『フォームの内容』部分に入力された情報が、『送信』等のボタンにより、 『action』に記述された先に送られます。
上のメールフォームの場合は『action』に『mailto:』で、 送信先メールアドレスを記入しています。

<FORM action="./action.file" method="POST" target="_self">
・・・・フォーム内容・・・・
</FORM>

action』にはフォームデータを送信(処理)するファイルを記述します。主にCGI等のスクリプトになります。
method』には送信方法『GET』か『POST』を記述します。記述しないと『GET』になりますが、 何らかの障害がない限り、『POST』を利用するのが一般でしょう。
enctype』は、『method』が『POST』の場合に、送信時のMIMEタイプ(ファイル内容のタイプ)を設定します。 通常は『application/x-www-form-urlencoded』で、特に記述する事はありませんが、 『INPUT』要素で『type="file"』を利用するときは『multipart/form-data』を設定する必要があります。
accept-charset』フォームを処理するサーバが受け入れられる文字コード化のリストを設定します。 複数の場合は半角スペースかカンマで区切ります。初期値は『UNKNOWN』で通常は記述の必要はありません。
accept』フォームを処理するサーバが処理を可能としているMIMEタイプを、カンマ区切りで設定します。 これにより、ファイルアップローダー等で、閲覧者が選択するファイルの種類を誘導します。
name』を設定することで、この要素に名前をつけ、スタイルシートやスクリプトから参照することが可能になります。
また、『target』ターゲット属性を持たせることで、動作ウィンドウをフォーム以外にすることが可能です。

INPUT要素

名前の通り入力(INPUT)のための要素です。
FORM要素であった『フォームの内容』の部分を作るための要素の一つです。 FOME要素の内容となることで、 『INPUT』された情報が『送信』等のボタンにより、『action』に記述された先に送られます。

名前を入力
男性 女性
OK?

(Operaでは『tex』『hidden』タイプが送信されない。)

==JavaScriptは省略します==
<FORM name="form">
名前を入力<INPUT name="mess" type="text" size="50" value="名前を入力"><BR>
<INPUT type="radio" name="sex" value="男" checked> 男性
<INPUT type="radio" name="sex" value="女"> 女性<BR>
OK?<INPUT name="check" type="checkbox" value="1"><BR>
<INPUT name="mode" type="hidden" value="入力値">
<INPUT type="button" onClick="func()" value=" メッセージ表示 ">
</FORM>

FORM要素の内容となることで、送信する情報を書込む場所を提供します。
◎主な属性
type』属性の値で提供される形式が変わります。

◎テキスト入力
 『text』により1行だけのテキスト入力が可能になります。
 『password』は基本的にテキストと変わりませんが、 記入した文字が『*』アスタリスク等によって隠されたり、『戻る』によって戻った際には保持されないなど、 パスワードのようにデリケートな内容の入力に使用します。が、セキュリティ保護としては軽度な物です。
 『file』はファイル名の記入(選択)欄を作成します。
 『hidden』は表示されない入力です。 主に『value』属性値を用いて、無条件でスクリプトに渡したい情報を書込んでおくのに使用します。
◎選択入力
 『checkbox』はチェックボックスを作成します。 この入力は複数の同じ『name』属性内で複数の選択を可能にします。
 『radio』はラジオボタンを作成する。 この入力は複数の同じ『name』属性内で一つだけ選択できるようにします。
(Netscapeでは、FORM要素内でしか、『name』属性の判別をしないようになっています。)
◎ボタン
 『submit』は送信ボタンを作成する。これを押すとフォームの内容が送信されます。
 『button』はただのボタンを作成します。 主に、スクリプトの起動などに使用します。
 『reset』はリセットボタンボタンを作成します。これを押すとフォームの内容が初期の状態に戻ります。
 『image』は画像を用いた送信ボタンを作成します。 『src』属性を利用してボタンとして使う画像を設定します。
アクセス性を考慮し『alt』属性によって画像の代替テキストを記述しておく方がよいでしょう。
このボタンをマウス等のポインティングデバイスでクリックした場合、 フォーム内の情報が送信されると共にクリック地点の座標も送信れます。 左上を座標0,0とし、x座標は横、y座標は縦としピクセル単位で 『name.x』『name.y』として送信されます(『name』はname属性の値)。
これと何らかのスクリプトを用いれば、クリック地点によって、異なる動作を可能としますが、 画像を出力出来ないブラウザで、ポインティングデバイスによるクリックではない閲覧者でも、 障害がないように考慮しなくてはいけないでしょう(複数の送信ボタンを用いるなど)

name』は、それぞれの入力に対する名前になります。 スクリプトでは入力値を呼び出すために、この名前を利用します。
value』は、それぞれの値の初期値です。 テキスト入力ではフォームにあらかじめ書かれている内容となり、 ボタンではそのボタンがチェックされたときの値となります。 そのため、type属性が『radio』か『checkbox』では省略ができません。
 <INPUT size="10" name="text" type="text" value="http://">では、 となります。
size』は、そのフォームの幅を設定します。 主に『type』属性が『text』、『password』または『file』の場合に使用します。値は文字数となります。
maxlength』は、『type』属性が『text』または『password』の時に、入力できる最大文字数を設定するのに使用します。 最大文字数は『size』設定を超えてもかまいません。デフォルトでは『無制限』となっています。
<INPUT size="10" name="text" type="text" maxlength="3">では、 となります。
checked』は、type属性が『radio』または『checkbox』の場合に、 あらかじめ選択された状態にしておくのに使用します。
<INPUT name="checkbox" type="checkbox" checked>とすれば、 となります。
src』は、type属性が『image』の場合、ボタンとして使用する画像ファイルを指示します。
disabled』、この属性が設定された要素は使用が不可能となります。
dir』、文字方向を設定できます。『rtl』:右から左へ『ltr』:左から右へとなります。
readonly』、この属性が設定された要素は『value』の値を表示するだけの閲覧専用となります。

BUTTON要素

BUTTON要素はボタンを表示するための要素です。 これはINPUT要素で作成した物と機能はおなじですが、 BUTTON要素の方が表示能力が高いとされています。
画像を用いるBUTTON要素も、『type』属性が『image』のINPUT要素と機能は同じです。 ただ、BUTTON要素では内容として表示される画像や文字列記述します。
(JavaScriptを使用した処理です。Operaでは動作せず。)

name』は、それぞれの入力に対する名前になります。 スクリプトでは入力値を呼び出すために、この名前を利用します。
value』は、ボタンの初期値で、ボタンを押したときに 『name』の値として送信される情報となります。
type』は、INPUT要素のボタンと同じものが、3つ在ります。
>> 『submit』は送信ボタンを作成します。 これを押すとフォームに書かれた情報が送信されます。
>> 『button』はただのボタンを作成します。 主に、スクリプトの起動などに使用します。
>> 『reset』はリセットボタンボタンを作成します。 これを押すとフォームの内容が初期の状態に戻ります。
disabled』、この属性が設定された要素は使用が不可能になります。
dir』、文字方向を設定できます。『rtl』:右から左へ『ltr』:左から右へとなります。

value』は、『name』の値として送信される情報・・・なのですが、 以下のボタンを押すと何が表示されます?

<BUTTON type="button" value="押したね" onClick="alert(value)">ボタン</BUTTON>
と、value属性に『押したね』を設定しているのですから、 『!押したね』が表示されるはずです(Operaではそうです)。 しかし、なぜだか『ボタン』と出る(TT。 つまり、IE5.5では、value属性より、 BUTTON要素内の内容が初期値として送信されているみたいです。
これが、理想通り動けき一組(『name』と『value』)のデータとして送信されれば、 INPUT要素の属性値の1つ『hidden』1つ分の働きもしてくれる事になるのですが・・・
BUTTON要素・・・何だか変これはバグなのか?

SELECT要素 ・ OPTGROUP要素 ・ OPTION要素

SELECT要素はフォームなどに選択肢を表示するのに使用します。
メニューの選択肢はOPTION要素によって表示します。 1つのSELECT要素には必ず1つ異常のOPTION要素(選択肢)があるべきとされています。
これらの選択肢を項目分けするのが、OPTGROUP要素なのですが、一部のブラウザでしか表示されません。 表示されなくても支障がないので付けて置いても構わないみたいです。
IE6.0では表示されています。
使用しているOSは?: [Ctrl]キー(Machintosh環境では[Apple]キー)等のキーを押しながら選択することで複数の項目を設定できます。

<SELECT multiple size="3" name="os">
<OPTION selected label="ete" value="none">その他</OPTION>
<OPTGROUP label="windows">
<OPTION label="95" value="95">windows95</OPTION>
<OPTION label="98" value="98">windows98</OPTION>
<OPTION label="ME" value="ME">windowsME</OPTION>
</OPTGROUP>
<OPTGROUP label="windowsNT">
<OPTION label="NT" value="NT">windowsNT</OPTION>
<OPTION label="2000" value="2000">windows2000</OPTION>
<OPTION label="XP" value="XP">windowsXP</OPTION>
</OPTGROUP>
<OPTGROUP label="Mac">
<OPTION label="9" value="Mac9">Mac9</OPTION>
<OPTION label="X" value="MacX">MacX</OPTION>
</OPTGROUP>
<OPTGROUP label="Linux">
<OPTION label="Turbo" value="Turbo">TurboLinux</OPTION>
<OPTION label="Miracle" value="Miracle">MiracleLinux</OPTION>
<OPTION label="RedHat" value="RedHat">RedHatLinux</OPTION>
</OPTGROUP>
</SELECT><BR>

SELECT要素の属性
name』は、それぞれの入力に対する名前になります。 スクリプトでは入力値を呼び出すために、この名前を利用します。
size』は、選択肢を表示する数になります。 例えば、SELECT要素がスクロール式のリストで表示される場合は、表示する行数となります。
multiple』、この属性が設定されたSELECT要素は複数の選択が可能となります。 この設定がされない限り、1つしか選択できません。
disabled』、この属性が設定された要素は使用が不可能になります。
dir』、文字方向を設定できます。『rtl』:右から左へ『ltr』:左から右へとなります。

OPTION要素の属性
selected』、この属性が設定された選択肢が、選択の初期値になります。 複数選択された場合は、一番上の選択肢が優先されるなどの処理がされます。
value』は、選択されたときに『name』の値として送信される情報で、 この選択肢の初期値となります。この属性が設定されていない場合はOPTION要素の内容が初期値となります。
label』は、選択項目として表示される内容を設定します。 OPTION要素内に記述することも出来ますが、これを用いることで、 OPTION要素を空要素として使用することができます。 ただ、一部のブラウザでしか表示されません。 本来は、『label』属性内の項目が優先して表示されるべきなのですが、そうでもないようです。

TEXTAREA要素

<TEXTAREA name="textarea" rows="5" cols="80" readonly>
INPUT要素とは違い、複数行のテキスト入力スペースを表示します。
TEXTAREA要素の内容はこのようにあらかじめ表示されます。
<TEXTAREA name="textarea" rows="5" cols="80" readonly>と、
『readonly』属性を設定することで、閲覧者からの書込みを拒否できます。
なお、この中のタグや改行は文字列として、そのまま表示されるので、
HTMLなどのサンプルタグを記述するときにも利用されるようです。
</TEXTAREA>

name』は、それぞれの入力に対する名前になります。 スクリプトでは入力値を呼び出すために、この名前を利用します。
rows』は、表示するテキストエリアの行数を設定します。 この行数を超える入力に対しては通常、スクロールなどによって表示されます。
cols』は、表示するテキストエリアの幅(平均的な文字幅による文字数)を設定します。 この幅を超える入力に対しては、スクロールや折返しによって表示されます。
disabled』、この属性が設定された要素は使用が不可能になります。
dir』、文字方向を設定できます。『rtl』:右から左へ『ltr』:左から右へとなります。
readonly』、この属性が設定された要素は閲覧専用となります。

以上がフォームを作るための入力欄になります。
それぞれをうまく組み合わせ、閲覧者にとって入力しやすいフォームを提供する必要があります。
例えば、配置は良いか、入力欄の大きさが適切か、使用しているフォームは適切かなどです。
選択肢を扱えるフォームは、チェックボックス、ラジオボタン、SELECT要素が有ります。 選択肢が多い時はSELECT要素を利用し、スペースを小さくすることができます。 しかし、都道府県や年齢層など順番が予想できる物には適切ですが、 そうでない物は選択肢を一覧できず、使い勝手は悪くなります。
送信ボタンにイメージを使う場合、それがボタンで有ることが解りづらくなるらないよう、注意が必要です。
などなど・・・。

<<前へ  |上へ|  次へ>>
123456789101112131415

中古スマホ・ガラケーなどのモバイル製品をお探しなら電脳プラザで!
 
常時2,000台以上の在庫を取り揃え!最短即日出荷に対応!

TOP] [HOME

更新日時:2014/08/09