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

作 成

作 成 2

基礎知識

装 飾 術

<<前へ  |123456789101112131415|  次へ>>

★今すぐ仕事に結びつく稼げる資格!スキルアップガイド無料進呈中 Click Here![PR]

● フォームの設定

フォームによる入力欄の作成は前述で可能ですが、 さらに便利にしたり、踏み込んだ事をしたい場合は以下のことが必要になるかもしれません。
特にスクリプト等を使用する場合には重要になってきます。

選択不能設定・閲覧専用設定

INPUT要素やTEXTAREA要素等をフォームとしての目的以外に使用する場合などで、 閲覧者から、入力を拒む場合は、閲覧専用とすることができます。
また、送信フォームなどで、「必要な情報を入力し終えるまで、送信ボタンを押せないようにする」、 「選択項目によって入力箇所を変化させる」などを実行するために、 一部の入力要素や選択要素、ボタンの機能を停止させることが可能です。

閲覧専用にするためには、目的の要素に『readonly』属性を設定します。 これにより、その要素は閲覧専用になり、書込みを禁止します。
readonly』属性は INPUT要素とTEXTAREA要素にのみ設定できます。
設定された要素の機能は通常とおなじで、フォーカスを受けとれ、タブによる移動順に含まれます。 ただ、変更をすることができません。
この、閲覧専用要素がどのように表示されるかは、ブラウザによります。 カーソルは置けるが中の文字に変化を与えられない、カーソルも置けないなど。
『お知らせ』とか『更新履歴』などに使うときに便利かもしれません。 スクリプトを利用して、『readonly』属性を変更するなどして、 利用範囲を広げることができます。
あと、要素としては十分に機能するわけですから、メール送信フォームなどで、このように使えます。
(これはPHPスクリプトを利用しています。)

以下の情報がメールと共に送信されます。

機能を停止させるためには、目的の要素に『disabled』属性を設定します。
disabled』属性を設定できる要素は、 BUTTON、INPUT、OPTGROUP、OPTION、SELECT、TEXTAREAとなります。
設定された要素は変更が出来なくなるだけでなく、フォームとしての機能を果しません。 フォーカスや、タブによる移動からも無視されます。 この機能停止要素がどのように表示されるかはブラウザによります。 機能を停止した入力欄やメニュー項目、ボタンの表示をぼかしたり、灰色にしたりなどで表示されます。 スクリプトを利用を利用して、『disabled』属性を変更するなどして、 利用範囲を広げることができます。
(これはJavaScriptを利用しています。)

・・・以上のメッセージを送信します。よろしいですか?

フォームからの送信

FORM要素から『action』属性で設定したURLに対してデータを送信するときは、 『method』属性に送信データの型を設定します。値は次の2つのいずれかです。

GET:HTTPの『GET』メソッドを用い、 『action』属性に示されたURL(URI)の末尾に 『?』(区切り子)を入れ、フォームの情報をクエリー文字列 (『?』以降につく付加情報、『query』要求という意)として送ります。 これは、通常のウェブページを開くときに使用する要求方式と同じで、 その名の通りGET(受け取り)のための要求です。
この方式はブラウザに『要求したURL』として履歴に残るため使用用途によっては便利であり、 (検索サイト等で、検索キーワードをGETで送ると、以前の検索を履歴から要求できる) 一方でセキュリティ上問題のある場合もあります。 (パスワードの入力値をGETで送ると、そのURLでパスワードを入力した状態に出来てしまう)

POST:HTTPの『POST』メソッドを用い、 フォームの情報を処理機構へ送ります。
基本的にFORM要素で、投稿等の情報の送信のために使い、その言葉も『投稿する』を意味します。 POSTで送られたデータは、URLのリクエストに続くエンティティ(本体)に格納されて送信されます。 これにより、アドレス欄に載ったり、履歴に残ったりすることが有りません

FORM要素をはじめとする入力のための全ての要素が正常に機能するとき、 各入力欄に定義された名前と入力値が一組となって送信されます。
(ただし、機能停止が設定された要素はその機能を果しません。)
また、1つのFORM要素内に複数の送信ボタンがあった場合、 動作させられた送信ボタンの機能が果されます。
チェックボックス形式の入力要素において、ラジオボタン形式の入力、 SELECT要素による入力では、選択された欄だけが機能します。
(ただし、ラジオボタン形式の入力では、同一の名前(name属性の属性値)が与えられた中の、 1つだけを選択できます。)
SELECT要素ではその要素が入力値の名前を与え、OPTION要素が入力値となります。
隠し入力hidden形式やスタイルシートの設定(『display:none』)で非表示になっていても、 機能に替わりはありません。

フォームデータの送信処理

フォームの送信ボタンによって送信される情報は、 『name』属性によって与えられた情報の名前と 『value』属性や閲覧者から入力された入力値、二つを一組として、情報をまとめます。 このとき、フォームデータの情報は、 FORM要素の『enctype』属性に設定された符号化を行います
符号化した情報は、『action』属性が示す処理へ、 『method』属性に設定されたかたちで送られます。

たとえば、
method』属性がGETで、 『action』属性がウェブ上におかれたファイル(CGIやPHPなど)であった時、 ブラウザは『action』属性の値(アドレス)を取得し、 これに『?』を加え、 その後にフォームの情報をMIMEタイプapplication/x-www-form-urlencoded』 で符号化して付け加えます。
ブラウザは、これにより完成したアドレスへ移動します。 この場合のフォームデータはASCIIコードに限られます
この動作は検索サイトで行われています。
閲覧者が入力したキーワードはURLエンコードされてアドレスの後に付け加えられ、検索単語として処理されます。

たとえば、
method』がPOSTで『action』がウェブ上の動作だった時、 ブラウザは『enctype』属性で設定されるMIMEタイプで情報を生成し、 『action』属性が示す相手とデータの受渡しをします。
一般的な掲示板やメール送信フォームで行われています。
ブラウザを閉じたあとは、送信したデータを見ることができません。

フォームのMIMEタイプ

FORM要素の『enctype』属性は、 フォームデータをサーバへ送信する際に用いるMIMEタイプを設定するものです。

application/x-www-form-urlencoded
デフォルトのMIMEタイプで、このMIMEタイプで送信するフォームは、 主に次のように符号化されます。

name属性の名前と入力値とはそのままで、スペースは『+』に置き換えられ、 非アルファベット及び非数字は当該文字のASCIIコードとパーセント記号と16進数に置換えまられます。
なお、name属性の名前と入力値との組み合わせは、文書に出現する順に並べられて、名前と値を『=』で、 各々を『&』で区切ります。

ファイルや、非ASCIIデータ、バイナリデータを含む場合は、 MIMEタイプ『multipart/form-data』を用いる必要があります。
(『enctype』属性が定義されていないときに自動で設定されます。)

multipart/form-data
フォームの各箇所ごとに1つの添付ファイルとして送信されます。 符号化方式もセットで送信されるので、文字化けの心配がありません。
INPUT要素でtype属性にfileを設定する場合に使う必要があります

HTMLによるページ作成には特に必要としませんが、 スクリプトを利用して、ファイルアップローダー的な事をするには重要です。

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

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

TOP] [HOME

更新日時:2014/08/09