フォーム要素 HTMLでフォームを作成します。 例: ラジオボタンの使用

HTMLフォームは、HTML ドキュメントが何らかの情報を外部の所定のポイントに送信し、そこで情報が何らかの方法で処理されるツールです。

HTML 専用のチュートリアルでフォームについて話すのは非常に困難です。 理由は非常に簡単です。HTML フォームの作成は、HTML フォームが情報を送信する「外界のポイント」を作成するよりもはるかに簡単です。 ほとんどの場合、そのような「ポイント」は Perl または C で書かれたプログラムです。

フォームによって送信されたデータを処理するプログラムは、CGI スクリプトと呼ばれることがよくあります。 CGI は Common Gateways Interface の頭字語です。 ほとんどの場合、CGI スクリプトを作成するには、適切なプログラミング言語と Unix オペレーティング システムの機能についての十分な知識が必要です。

現在、PHP/FI 言語はある程度普及しており、その命令を HTML ドキュメントに直接埋め込むことができます (ドキュメントは拡張子 *.pht または *.php のファイルとして保存されます)。

HTML フォームは、[変数名]=[変数値] のペアの形式でハンドラー プログラムに情報を渡します。 変数名はラテン文字で指定する必要があります。 変数値は、数値のみを含んでいる場合でも、ハンドラーによって文字列として扱われます。

HTML フォームの仕組み

フォームはタグで開かれます

そしてタグで終わります

。 HTML ドキュメントには複数のフォームを含めることができますが、フォームを複数のフォームの中に配置しないでください。 タグを含む HTML テキストは、制限なくフォーム内に配置できます。

鬼ごっこ

3 つの属性を含めることができ、そのうちの 1 つは必須です。 属性は次のとおりです。

必須の属性。 フォームハンドラーが配置される場所を決定します。

フォームからのデータをハンドラーに転送する方法 (つまり、どのハイパーテキスト転送プロトコル メソッドを使用するか) を決定します。 有効な値は METHOD=POST および METHOD=GET です。 属性値が設定されていない場合は、デフォルトで METHOD=GET が想定されます。

HTML フォームのデータをエンコードしてハンドラーに送信する方法を決定します。 属性値が設定されていない場合、デフォルトは ENCTYPE=application/x-www-form-urlencoded です。

最も単純な HTML フォーム

フォームからハンドラーにデータを転送するプロセスを開始するには、何らかの制御が必要です。 このようなコントロール本体の作成は非常に簡単です。

フォーム内でそのような行に遭遇すると、ブラウザは画面上に「送信」という文字のボタンを描画します（英語の「submit」から、2番目の音節に重点を置いて「submit」と読みます）。クリックすると、すべてのデータが利用可能になります。フォームはタグで定義されたハンドラーに転送されます .

属性 VALUE="[Label] を入力することで、ボタンのラベルを任意に設定できます。" (читается "вэлью" с ударением на первом слоге, от английского "значение"), например:!}

これで、単純な HTML フォームを作成するのに十分な知識が得られました (例 11)。 データは収集されませんが、この章の本文に戻るだけです。

最も単純な形式

ボタンに配置された碑文は、必要に応じて、ボタン定義に NAME=[name] 属性を導入することでハンドラーに渡すことができます (英語の「name」から「name」と読みます)。次に例を示します。

このようなボタンをクリックすると、ハンドラーは他のすべてのデータとともに、値「Let's go!」を持つボタン変数を受け取ります。 。

フォームには、異なる名前や値を持つ複数の送信ボタンを含めることができます。 したがって、ハンドラーは、ユーザーがクリックした送信ボタンに応じて異なる動作を行うことができます。

HTML フォームがデータを収集する方法

他の種類の要素もあります 。 各要素 要素の名前 (および、それに応じてハンドラーに渡される変数の名前) を指定する NAME=[name] 属性を含める必要があります。 名前を指定する必要があります ラテン文字のみ。 ほとんどのアイテム 属性 VALUE="[値] を含める必要があります" , определяющий значение, которое будет передано обработчику под этим именем. Для элементов !} そして ただし、対応する変数の値はユーザーがキーボードを使用して入力できるため、この属性はオプションです。

基本的な要素の種類 :

TYPE=テキスト

テキスト行を入力するためのウィンドウを定義します。 追加の属性 SIZE=[number] (文字単位の入力ウィンドウの幅) および MAXLENGTH=[number] (文字単位の入力文字列の最大許容長) を含めることができます。

例：

テキスト入力用に 20 文字幅のウィンドウを定義します。 デフォルトでは、ウィンドウには Ivan というテキストが含まれており、ユーザーはこれを編集できます。 編集された (または編集されていない) テキストは、ユーザー変数のハンドラーに渡されます。

TYPE=パスワード

パスワードを入力するためのウィンドウを定義します。 テキスト タイプとまったく同じですが、入力されたテキストの記号の代わりにアスタリスク (*) が画面上に表示されるだけです。 例：

パスワードを入力するための 20 文字幅のウィンドウを定義します。 許可されるパスワードの最大長は 10 文字です。 入力されたパスワードは、pw 変数でハンドラーに渡されます。

TYPE=ラジオ

ラジオボタンを定義します。 追加の selected 属性を含めることができます (ボタンがチェックされていることを示します)。 同じ名前のラジオ ボタンのグループ内では、ラベルの付いたラジオ ボタンは 1 つだけ存在できます。

例：

9600bps
14400bps
28800 bps

9600 bps、14400 bps、および 28800 bps というラベルの付いた 3 つのラジオ ボタンのグループを定義します。 最初のボタンには最初にラベルが付いています。 ユーザーが別のボタンをチェックしない場合、値 9600 を持つモデム変数がハンドラーに渡されます。 ユーザーが別のボタンをチェックすると、値 14400 または 28800 のモデム変数がハンドラーに渡されます。

TYPE=チェックボックス

マークを付けることができる正方形を定義します。 追加の selected 属性を含めることができます (正方形がチェックされていることを示します)。 ラジオ ボタンとは異なり、同じ名前の四角形のグループには複数のラベル付き四角形を含めることができます。

例：

パソコン
ワークステーション
ローカルネットワークサーバー
インターネットサーバー

4 つの正方形のグループを定義します。 2 番目と 4 番目の正方形には最初にマークが付けられます。 ユーザーが変更を加えなかった場合、 comp=WS と comp=IS という 2 つの変数がハンドラーに渡されます。

TYPE=非表示

フォームに入力するときにユーザーには表示されず、変更されずにハンドラーに渡される非表示のデータ要素を定義します。 ハンドラーがどのバージョンのフォームを扱っているかを認識できるように、時々再設計されるフォーム上にこのような要素があると便利な場合があります。 他の用途を自分で簡単に思いつくことができます。

例：

値 1.1 でハンドラーに渡される非表示のバージョン変数を定義します。

TYPE=リセット

クリックすると HTML フォームを元の状態に戻すボタンを定義します。 このボタンを使用するときはハンドラーにデータが渡されないため、リセット ボタンには name 属性がない場合があります。

例：

クリックすると HTML フォームを元の状態に戻す [フォーム フィールドのクリア] ボタンを定義します。

要素以外にも , HTML フォームにはメニューを含めることができます およびテキスト入力フィールド .</p> <p>メニュー <SELECT>n 個の要素は次のようになります。</p><p> <SELECT NAME="[имя]"> <OPTION VALUE="[値1]">[テキスト 1] <OPTION VALUE="[値2]">[本文2] ... <OPTION VALUE="【n値】">[テキストn]</SELECT> </p><p>ご覧のとおり、メニューはタグで始まります <SELECT>そしてタグで終わります</SELECT>。 鬼ごっこ <SELECT>メニューが生成する変数の名前を指定する必須の NAME 属性が含まれています。</p> <p>鬼ごっこ <SELECT>MULTIPLE 属性を含めることもできます。この属性の存在は、メニューから複数の項目を選択できることを示します。 ほとんどのブラウザにはメニューが表示されます <SELECT MULTIPLE>メニュー項目が配置されるウィンドウの形式 (ウィンドウの行数の高さは SIZE=[number] 属性で設定できます)。 メニュー <SELECT>ほとんどの場合、ドロップダウン メニューとして表示されます。</p> <p>鬼ごっこ <OPTION>メニュー項目を定義します。 必須の VALUE 属性は、このメニュー項目が選択された場合にハンドラーに渡される値を設定します。 鬼ごっこ <OPTION>要素がデフォルトでチェックされていることを示すchecked属性が含まれる場合があります。</p> <h3>小さな例を見てみましょう:</h3> <SELECT NAME="selection"> <OPTION VALUE="オプション1" checked>オプション1 <OPTION VALUE="オプション2">オプション 2 <OPTION VALUE="オプション3">オプション 3</SELECT> <p>このフラグメントは、オプション 1、オプション 2、およびオプション 3 の 3 つの要素のメニューを定義します。 デフォルトでは、項目「オプション 1」が選択されています。 ハンドラーには、値が option1 (デフォルト)、option2、または option3 である選択変数が渡されます。</p> <p>すでに学んだことをすべて終えた後、要素は <TEXTAREA>非常に単純に見えるかもしれません。 例えば：</p><p> <TEXTAREA NAME=address ROWS=5 COLS=50>そして、こちらがあなたの住所です...

すべての属性は必須です。 NAME 属性は、ウィンドウの内容がハンドラーに転送される名前を定義します (例ではアドレス)。 ROWS 属性は、ウィンドウの高さを行単位で設定します (この例では 5)。 COLS 属性は、ウィンドウの幅を文字単位で設定します (この例では 50)。

タグの間にテキストを配置 そして、ウィンドウのデフォルトの内容を表します。 ユーザーはそれを編集したり、単に消去したりできます。

ロシア語の文字がウィンドウに表示されていることを知っておくことが重要です ハンドラーに渡されると、対応する文字オブジェクトに変換できます。</p> <h3>例：</h3> <p>HTML フォームの使用法を示すために、PHP で小さなプログラムを作成しました。このプログラムは次の場所にあります。</p><p>http://206.31.82.215/hp/nc/fd-win.pht</p><p>ソース データは、例 12 で説明されている形式でこのプログラムに転送されます。</p><p> <HTML> <HEAD> <TITLE>例 12</TITLE> </HEAD> <H1>もう少し複雑な形状</H1> <FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht" METHOD=post> <H2>あなた自身について少し教えてください...</H2> <P>本物の情報を提供する必要はありません。 デモンストレーションの目的では、架空のものも非常に適しています。</P> <P>名前： <INPUT TYPE=text SIZE=40 NAME=fn><BR>姓： <INPUT TYPE=text SIZE=40 NAME=ln><BR>床： <INPUT TYPE=radio NAME=gender VALUE="男" checked>男 <INPUT TYPE=radio NAME=gender VALUE="女性">女性 <BR>年： <INPUT TYPE=text SIZE=5 NAME=age>年 <BR> <INPUT TYPE=submit VALUE="ハンドラの実行"></P> </FORM> </BODY> </HTML> </p><p>HTML フォームに記入し、ボタンをクリックすると、何が起こるか見てみましょう...</p> <p><b>ちょっとしたトリック <br>またはフォームをメールで送信する方法</b></p><p>これはすべて素晴らしいことだ、と懐疑的な人は言うでしょうが、一体なぜ、処理するものが何もない HTML フォームが必要なのでしょうか? これは部分的には真実ですが、部分的にしか当てはまりません。</p> <p>HTML は、フォームのコンテンツを電子メールで送信するための非常に強力なメカニズムを提供します。 実際に使ってみるとこんな感じです。</p> <p>例 12 を少し変更したとしましょう。文字列の代わりに</p><p> <FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht" METHOD=post> </p><p>私たちは列に入りました</p><p> <FORM ACTION="mailto:user@mail.box" ENCTYPE=text/plain> </p><p>エンコード アルゴリズムを text/plain に変更しました。つまり、実際にはエンコードを完全にオフにしたことに注意してください。</p> <p>ここで、ユーザーが名を Ivan、姓を Petrov、性別が男性、年齢を 22 歳としたとします。 ここで問題は、ユーザーが「ハンドラーの実行」ボタンをクリックすると何が起こるかということです。</p> <p>答えは簡単です。 次のメッセージが電子メールで user@mail.box に自動的に送信されます。</p><p>Fn=イワン ln=ペトロフ 性別=男性 年齢=22</p><p>残念ながら、すべてのユーザーがこの HTML フォームを使用できるわけではありません。 実際、メッセージを作成し、それを送信するために電子メール プログラムを起動するという作業はすべて、実際にはユーザーのブラウザによって引き継がれます。 これは、ユーザーのインターネット アクセス構成で、ハイパーテキスト転送プロトコルと送信メール配信プロトコルが同時に機能するようにする必要があることを意味します。 これは常に可能なわけではありません。 しかし、たとえそれが不可能だったとしても、致命的なことは何も起こりません。 ブラウザにはエラー メッセージが表示されるだけです。</p> <table width="635" border="0"><tr><td width="200"> </td><td> </td><td width="200"> </td> </tr></table> <p>Web サイトでは、HTML フォームが配置されたページをよく見かけます。 Web フォームは、サイトの訪問者から情報を受け取る便利な方法です。 この例としては、サイト訪問者と開発者にフィードバックを提供する -, - があります。 フォームは、サイト開発者が CMS を開発する際にも便利で、サイトの主要なプロパティである関連性を維持できます。 この記事では、HTML フォームの作成の基本、その処理、および画面フォームから PHP スクリプトにデータを転送する方法について説明します。</p> <h2>1) 簡単なフォームを作成する</h2> <p>タグ <i><form> </i>そして <i></form> </i>フォームの始まりと終わりを定義します。 開始フォームタグ <i><form> </i> 2 つの属性が含まれます。 <i>アクション</i>そして <i>方法</i>。 action 属性には、スクリプトを処理するために呼び出す必要があるスクリプト URL が含まれます。 属性 <i>方法</i>フォームを送信するために使用する HTTP リクエストのタイプをブラウザに指示します。 可能な値 <i>役職</i>そして <i>得る</i>.</p> <h2>コメント</h2> <p>POST メソッドと GET メソッドの主な違いは、情報の転送方法です。 GET メソッドでは、パラメータはアドレス バーを通じて渡されます。 基本的には HTTP リクエスト ヘッダー内にありますが、POST メソッドではパラメータは HTTP リクエストの本文を通じて送信され、アドレス バーにはまったく反映されません。</p> <p> <form method="post" action="../admin/add_story.php"> </p> <p><?php <br>$text = nl2br($_POST["mytext"]); <br>?> </p> <p><b>タスク：</b> 2000 年から 2050 年までの年を含むドロップダウン リストを作成する必要があるとします。 <br><b>解決：</b> SELECT 要素を含む HTML フォームと、フォームを処理するための PHP スクリプトを作成する必要があります。</p><p><b>議論：</b></p> <p>まず、2 つのファイルを作成しましょう。 <b>フォーム.html</b>そして <b>アクション.php</b>。 ファイル内 <b>フォーム.html</b>ドロップダウン リストを備えた HTML フォームが含まれます。 さらに、リスト内の値は 2 つの方法で指定できます。</p> <h2>I. 手動データ入力:</h2> <p> <select class="input" type=text name=years> <br><option value="2000">2000</option> <br><option value="2001">2001</option> <br><option value="2002">2002</option> <br>…………………………………………… <br><option value="2050">2050</option> <br></select> </p> <h2>II. ループを通じてデータを入力する:</h2> <p> <select class="input" type=text name=years> <br><?php <br>$年 = 2000 ; <br>for ($i = 0 ; $i<= 50 ; $i ++) <span>// 0 から 50 まで循環します <br></span>{ <br>$new_years = $year + $i ; <span>// 新しい値を形成する <br></span>エコー " <option value="。 $new_years。">" . $new_years . "</option>" ; <span>// 新しい行を作成します <br></span>} <br>?> <br></select> </p> <p>ご覧のとおり、ループを含む 2 番目の例はよりコンパクトです。 このフォームはテキストフィールドとまったく同じように処理されるため、このフォームにハンドラースクリプトを提供する必要はないと思います。 リスト値はスーパーグローバル配列から取得できます <i>$_POST</i>.</p> <p><b>説明：</b></p> <p>ファイルをサーバーに送信するための HTML フォームを作成しましょう。</p> <p> <FORM ENCTYPE="multipart/form-data" ACTION="action.php" METHOD=POST> <br><INPUT NAME="myfile" TYPE="file"> <br><INPUT TYPE="submit" value="転送ファイル"> <br></FORM> </p> <p>この HTML フォームには要素が含まれています <i>ブラウズ</i>をクリックすると、サーバーにアップロードするファイルを選択するためのダイアログ ボックスが開きます。 ボタンを押すと <i>「ファイル転送」</i>、ファイルはハンドラー スクリプトに渡されます。</p> <p>次に、ハンドラースクリプトを作成する必要があります <b>アクション.php</b>。 ハンドラーを作成する前に、ファイルをどのディレクトリにコピーするかを決定する必要があります。</p> <p><?php <br>if(isset($_FILES [ "myfile" ])) <span>// ファイルが存在する場合 <br></span>{ <br>$catalog = "../image/" ; // 弊社のカタログ <br>if (is_dir($catalog)) <span>// そのようなディレクトリが存在する場合 <br></span>{ <br>$myfile = $_FILES [ "myfile" ][ "tmp_name" ]; <span>// 一時ファイル <br></span>$myfile_name = $_FILES [ "myfile" ][ "name" ]; // ファイル名 <br>if(! copy ($myfile, $catalog)) echo <span>「ファイルのコピー中にエラーが発生しました」</span>。 $myfile_name <span>// ファイルのコピーに失敗した場合 <br></span>} <br>else mkdir ("../image/" ); <span>// そのようなディレクトリが存在しない場合は作成します <br></span>} <br>?> </p> <h2>コメント</h2> <p>ユーザーがサーバーにファイルをアップロードすることを信頼している場合は、細心の注意を払う必要があります。 攻撃者は「不正な」コードを画像やファイルに埋め込み、サーバーに送信する可能性があります。 このような場合、ファイルのダウンロードを厳密に制御する必要があります。</p> <p>この例では、ディレクトリを作成し、そのディレクトリにファイルをサーバーにコピーする方法を示します。</p> <p>要素を使用した例も示したいと思います <i>チェックボックス</i>。 この要素は、要素の 1 つではないにしても、他の要素とは少し異なります。 <i>チェックボックス</i>'a が選択されていない場合、スーパーグローバル変数 <i>$_POST</i>空の値を返します:</p> <p> <FORM ACTION="file.php" METHOD=POST> <br><input name="mycolor" type="checkbox" value="青">青 <br><input name="mycolor" type="checkbox" value="黒">黒 <br><input name="mycolor" type="checkbox" value="白">白 <br><input name="Submit" type=submit value="選ぶ"> <br></FORM> </p> <p><?php <br>if (!empty($_POST [ "mycolor" ])) echo $_POST [ "mycolor" ]; <span>// 少なくとも 1 つの要素が選択されている場合 <br></span>それ以外の場合はエコー <span>「値を選択」</span>; <br>?> </p> <br><p>HTML のフォームは最も複雑ですが、その一方で、おそらく HTML で最も興味深いトピックでもあります。</p> <p>Web フォームを使用すると、サイト訪問者は特別なフィールドに特定の情報を入力でき、開発者はその情報を自分にとって都合の良い形式で受け取ることができます。</p> <p>フォームの例としては、ゲストブック、アンケート、オンライン テストなどがあります。 フォームは、Webサイトへの登録時やオンラインストアでの注文時などに記入します。</p> <p>HTML を使用すると、テキスト フィールド、メニュー、リスト、ボタン、チェックボックス、ラジオ ボタンなどのフォーム フレームワークを作成できます。 つまり、特定の情報をフォームに入力するために使用される要素です。</p> <p>次に、フォームに入力されたデータは処理のためにサーバーに送信されます。 しかし、ここでは HTML は無力です。HTML に添付されているプログラムまたはスクリプトがすでにフォームの処理に取り組んでいます。 このようなプログラムは通常、PHP または JavaScript で作成されます。</p> <h4>フォーム属性 - タグ <form></h4> <p>Web ページには複数のフォームが存在する場合があります ( <i>開発者が必要とするだけ</i>）。 それぞれはタグで始まります <form>そして終了タグで終わります</form> .</p> <p>action 属性はどのフォームでも必須です。これは、フォームを提供するファイルのアドレスを指定します ( <i>入力されたデータを処理します</i>).</p> <p>Method 属性は、フォームのコンテンツを送信する方法を指定します。 GET と POST の 2 つのメソッドがあります。 GET メソッドと POST メソッドを使用して情報を送信するというトピックはデータ処理言語に関連しているため、これらのパラメーターについて詳しく調べるのは意味がありません ( <i>たとえばPHP</i>）。 フォームでほとんどの場合に使用されるのは POST データ転送方法であることを知っておくだけで十分です。</p> <p>タグ名属性 <form>はオプションです。 ただし、文書内に複数のフォームがある場合、それぞれのフォームがハンドラーによって何らかの方法で識別される必要があります。 したがって、この場合には name 属性の存在が必要です。これはフォームの一意の名前を指定します。</p> <p>入力データのエンコーディングを設定することもできます。これには accept-charset 属性が使用されます。また、target 属性を使用して、送信されたフォームの処理結果が表示されるウィンドウを定義します ( <i>新しいウィンドウまたは現在のウィンドウで</i>).</p> <p>でもタグ自体は <form>フォームは最初にどこかに入力する必要があるデータを送信するため、意味がありません。</p> <h4>データ入力。 フォームフィールド - タグ <input></h4> <p>鬼ごっこ <input>これはフォームで最も一般的なタグです。 これは、フォームにデータを入力するために機能するさまざまな要素 (テキスト フィールド、ボタン、チェックボックス、ラジオ ボタン) を作成するように設計されています。</p> <p>type はタグの主な属性です <input>。 フィールドタイプを設定します( <i>要素</i>) 形式:</p> <table width="100%" border="1"><tr><td width="300px"> <p>属性値 type="..."</p> </td> <td width="245px"> <p>結果</p> </td> <td> <p>説明</p> </td> </tr><tr><td> <p><input type="text" size="20" value="あなたの名前..." ></p> </td> <td align="center"> </td> <td><p>テキストを入力するための単一行のテキストフィールド。 size 属性はフィールドの幅を文字数で指定します。</p> </td> </tr><tr><td><p><input type="password" maxlength="10" size="20" ></p> </td> <td align="center"> </td> <td><p>パスワードを入力するためのテキストフィールド。 <br>maxlength 属性は、入力できる最大文字数を設定します。</p> </td> </tr><tr><td><p><input type="radio" name="radio" value="1" checked></p> <p><input type="radio" name="radio" value="2" ></p> <p><input type="radio" name="radio" value="3" ></p> </td> <td align="center"> </td> <td><p>スイッチ。 <br>提供されたオプションから 1 つだけ選択できます。 selected 属性は、事前にチェックされたフィールドを指定します。</p> </td> </tr><tr><td><p><input type="checkbox" name="flag" value="1" checked></p> <p><input type="checkbox" name="flag" value="2" ></p> <p><input type="checkbox" name="flag" value="3" ></p> </td> <td align="center"> </td> <td><p>チェックボックス。 <br>いくつかのオプションから選択できます。</span>属性 <span>selected は、事前にチェックされたフィールドを定義します。</p> </td> </tr><tr><td><p><input type="button" value="ボタン" ></p> </td> <td align="center"> </td> <td><p>ボタン。 <br>value 属性はボタンのラベルを設定します。</p> </td> </tr><tr><td><p><input type="reset" value="リセット" ></p> </td> <td align="center"> </td> <td><p>リセットボタン。 <br>フォームフィールドを元のフォームに戻します。 入力したデータをリセットします。</p> </td> </tr><tr><td><p><input type="submit" ></p> </td> <td align="center"> </td> <td><p>入力したデータを送信するボタンです。</p> </td> </tr><tr><td><p><input type="file" ></p> </td> <td align="center"> </td> <td><p>送信するファイルの名前を入力するフィールド。</p> </td> </tr><tr><td><p><input type="image" src="img/buttom.gif" ></p> </td> <td align="center"> </td> <td><p>ボタン画像。 <br>サーバーにデータを送信するためにも使用されます。 src 属性は画像ファイルのアドレスを指定します。</p> </td> </tr><tr><td><p><input type="hidden" size="20" ></p> </td> <td align="center"> </td> <td><p>隠しフィールド - ユーザーには表示されません。</p> </td> </tr></table><h3>ドロップダウン - タグ <select>そして <option></h3> <p>鬼ごっこ <select>タグと同じ <input>情報を収集するのに役立ちます。1 つ以上の要素を選択できるリストが作成されます。 各要素は値に対応し、値は処理のためにサーバーに送信されます。</p> <p>作成されるリストのタイプは、size 属性の値によって異なります。 size= "1" ( <i>デフォルト値</i>) リストはドロップダウンになります。</p> <p>size 属性の異なる値は、表示されるリスト項目の数に対応します。 たとえば、 size="3" の場合、3 つの要素が表示されます。 他のリスト項目を表示するには ( <i>何かあれば</i>) 自動的に追加される垂直スクロール バーを使用する必要があります。</p> <p>デフォルトでは、リスト項目は 1 つだけ選択できます。 タグに multiple 属性を追加する <select>マウスと Ctrl キーおよび Shift キーを使用して複数のリスト項目を選択できます。</p> <p>multiple 属性が存在する場合、リスト項目のすべてまたは一部が表示されます ( <i>ブラウザに応じて</i>)、size 属性が特定の表示項目数に設定されていない限り。</p> <p>ドロップダウン リストの必須要素はタグです <option>。 タグ内にあります <select>そして各リスト項目を作成します。</p> <p>タグの name 属性を使用する <select>リストには名前が付けられ、タグの value 属性を使用します。 <option>リスト要素には値が割り当てられます。 したがって、リストの名前と選択された要素の値である「名前=値」のペアがサーバーに送信されます。</p> <p>選択されたタグの属性 <option>以前に選択したリスト項目を定義し、disabled 属性はリスト項目をブロックします。リスト項目は選択できません。</p> <p><img src='https://i0.wp.com/webpupil.ru/img/java/java_example.jpg' height="68" width="200" loading=lazy loading=lazy></p> <p><form> <br><p>基本方向は、次の 4 つの主要な方向のうちの 1 つです。</p> <br> <select name= "storona" > <br> <option value= "北" >北</option><br> <option value= "南" >南</option><br> <option value= "西" >西</option><br> <option value= "東" >東</option> <br> </select><br><p>世界の七不思議！</p> <br> <select name= "chudo" size= "4" multiple> <br> <option value= "1" >クフ王のピラミッド</option><br> <option value= "2" selected> <span>バビロンの空中庭園</span> </option><br> <option value= "3" disabled> <span>オリンピアのゼウス像</span> </option><br> <option value= "4" > <span>エフェソスのアルテミス神殿</span> </option><br> <option value= "5" > <span>ハリカルナッソスの霊廟</span> </option><br> <option value= "6" > <span>ロードスの巨像</span> </option><br> <option value= "7" > <span>アレキサンドリアの灯台</span> </option><br> </select><br><p> <input type= "reset" value= "リセット" > </p> <br> </form> </p> <p><img src='https://i1.wp.com/webpupil.ru/img/java/java_result.jpg' height="61" width="200" loading=lazy loading=lazy></p> <h3>複数行のテキストフィールド - タグ <textarea></h3> <p>鬼ごっこ <textarea>複数行のテキストフィールドを作成します。 ハンドラーにデータを送信するときに、改行を行っても保持されます。</p> <p>タグ名属性 <textarea>は必須です。これを使用すると、テキストフィールドに名前が付けられます。</p> <p>無効な属性はフィールドを無効にします。フィールドの内容は変更できず、アクセスできません。 readonly 属性は、フィールドが読み取り専用であることを示します。ユーザーはコンテンツを編集することはできませんが、フィールドは使用可能です。フィールドを選択してコピーすることなどは可能です。</p> <p>Cols 属性と rows 属性を使用して、テキスト フィールドの幅を文字単位で設定し、フィールドの高さを行単位で設定できます。</p> <p><img src='https://i0.wp.com/webpupil.ru/img/java/java_example.jpg' height="68" width="200" loading=lazy loading=lazy></p> <p><p> <textarea name= "text" cols= "40" rows= "5" readonly> <span>フィールドの内容がそのサイズを超えると、スライダーが表示されます。</span>

フィールドの内容がそのサイズを超えると、スライダーが表示されます。

フォームの使用例

次に、フォームがどのように機能するかを見てみましょう。

教育ビデオ注文フォーム:

あなたの名前： *

ご注文：

HTML に関するビデオチュートリアル
CSS に関するビデオチュートリアル
PHP に関するビデオチュートリアル

メディアを選択します:

CD

DVD

USBフラッシュ

あなたの電子メール: *

あなたの住所： *

説明

HTMLタグ

ユーザー入力をサーバーに送信するために使用される HTML フォームを作成します。

フォーム自体はユーザー入力の手段を提供していないため、要素内では ユーザーにデータを入力するためのさまざまな方法を提供することを目的とした他の要素が含まれています。

これらの要素に加えて、フォーム内で他の HTML 要素を使用できます。

デフォルトでは、フォームは Web ページ上にまったく表示されず、フォーム内にある要素のみが表示されますが、CSS を使用すると、フォームに任意の外観を与えることができます。

属性

accept-charset: 処理のためにサーバーに送信されるフォーム入力の文字エンコーディング、または文字セットのスペース区切りのリストを指定します。 指定されたエンコーディングでサポートされていない文字がデータに含まれている場合、ブラウザはそれらの文字に適切なエンコーディングを決定しようとします。 適切なエンコードが決定できない場合、文字は数値コードにエンコードされます。

デフォルト値は予約文字列「UNKNOWN」です（ブラウザはこの値を、その要素を含むドキュメントの文字エンコーディングと同じ文字エンコーディングとして解釈します） ）。 action: 入力済みフォームからデータを送信するためのアドレスを示します。この情報はそこで処理されます。 autocomplete: フォームのオートコンプリートを有効にするか無効にするかを決定します。 自動入力が有効になっている場合、ブラウザーはユーザーが前回フォームを使用したときに入力した値を自動的に入力します。 可能な属性値:

• の上：ブラウザには、ユーザーが以前に入力した値 (デフォルト値) が自動的に表示されます。
• オフ：ユーザーはフォームを使用するたびに各フィールドに値を入力する必要があります。 以前に入力した値は表示されません。

注: オートコンプリート属性は Opera ブラウザではサポートされていません。

Enctype: サーバーに送信するときにフォーム データをエンコードする方法を指定します。 Method="post" 属性と組み合わせてのみ使用できます。 可能な値:

• application/x-www-form-urlencoded:デフォルト: すべての文字は送信前にエンコードされます (スペースは「+」文字に変換され、特殊文字は ASCII HEX 値に変換されます)。
• マルチパート/フォームデータ:文字はエンコードされません。 要素に使用されます 、その type 属性は「file」に設定されます。
• テキスト/プレーン:スペースは「+」文字に変換されますが、アポストロフィなどの特殊文字は 16 進値にエンコードされません。

Method: フォーム データを送信するときに使用される HTTP データ転送メソッドを指定します。 可能な値:

• 得る：データは、名前=値のペアとして URL の末尾に追加されてブラウザのアドレス バーに渡されます。 疑問符 (?) はメイン URL と送信データの間の区切り文字として使用され、アンパサンド文字 (&) は送信データを互いに区切るために使用されます。 この方法は、小さなデータを送信するときに使用されます。
• 役職：データは URL の一部としてではなく、ブラウザー要求のコンテンツとして送信されます。 この方法は、大量のデータを送信するために使用されます。

Method 属性が指定されていない場合は、デフォルトで GET メソッドが使用されます。 name: フォームの名前を指定します。 この名前は、JavaScript で要素を名前で参照したり、送信後のフォーム データを参照したりするために使用できます。 1 つの文書で複数のフォームが使用されている場合、その名前を繰り返してはならず、属性値として空の文字列を残すべきではありません。 novalidate: フォームに入力されたデータが送信前に検証されないことを示します。 novalidate boolean 属性の可能な値:

注: novalidate 属性は、IE9 以前および Safari ではサポートされていません。

ターゲット: フォームの送信後に受信した応答を表示する場所を指定するフレーム名またはキーワードを定義します。

• _空白：新しいウィンドウまたはタブでドキュメントを開きます。
• _自己：リンクが配置されているのと同じディレクトリでドキュメントを開きます (デフォルト)。
• _親：親フレームでドキュメントを開きます。
• _上：ドキュメントをウィンドウの全幅で開きます。
• フレーム名:名前が値として指定された iframe でドキュメントを開きます。

鬼ごっこ グローバル属性とイベントもサポートします

デフォルトのスタイル

フォーム (表示: ブロック; マージン上部: 0em; )

例

名前：
姓：

フォームは、ユーザーから Web サーバーにデータを送信するように設計されています。 HTML のフォームは、テキスト フィールドとテキスト領域、チェックボックスとラジオ ボタン、ドロップダウン リストで構成できます。 これらはすべて形式の要素です。 各要素はサイトに何らかの意味を伝える役割を果たします。
HTML フォームの中核は、情報を入力するための領域が表示される Web ページです。 フォームに記入して「送信」をクリックすると、フォームからの情報がパッケージ化されて Web サーバーに送信され、サーバー側のスクリプト (ハンドラー ファイル) によって処理されます。 処理後、別の Web ページが応答として返されます。 次の図は、フォームがどのように機能するかを明確に示しています。

HTML フォームの作成に難しいことは何もありません。 フォームについて理解する最も簡単な方法は、HTML コードを少し解析して、それがどのように機能するかを確認することです。 次の例は、単純な HTML フォームを作成するための構文を示しています。

例: 単純な HTML フォーム

• 自分で試してみてください」

私の最初のフォーム:
名前：
姓：

私の最初のフォーム:
名前：
姓：

要素

フォームは、要素を使用して Web ページに挿入されます。 。 これは、テキスト フィールドやボタン、その他の HTML タグなどの要素を含む、すべてのフォーム コンテンツのコンテナを提供します。 ただし、別の要素を含めることはできません .
フォームをサーバーに送信するには、「送信」ボタンを使用します。フォーム内で「Enter」キーを押しても、同じ結果が得られます。 フォームに「送信」ボタンがない場合は、「Enter」キーを使用して送信できます。
ほとんどの要素の属性 フォームのデザインではなく処理に影響します。 最も一般的なのは、 アクションそして 方法。 属性 アクションサーバーによる処理のためにフォーム内の情報が送信される URL が含まれます。 属性 方法ブラウザがフォーム データを送信するために使用する必要がある HTTP メソッドです。

要素

ほとんどすべてのフォームフィールドは要素を使用して作成されます。 （英語の入力 - 入力から）。 要素の外観 属性の値に応じて変化します タイプ:

以下にいくつかの属性値を示します タイプ:

テキストとパスワードを入力する

フォーム要素の最も単純なタイプの 1 つはテキスト フィールドで、テキストを 1 行に入力するように設計されています。 このテキスト入力タイプはデフォルトで設定されているため、属性の指定を忘れた場合に表示される 1 行フィールドです。 タイプ。 フォームに 1 行のテキスト入力フィールドを追加するには、要素内に次のようにする必要があります。 属性を登録する タイプテキスト値の場合:

パスワード入力フィールドは、通常のテキスト フィールドの一種です。 単一行のテキスト フィールドと同じ属性がサポートされます。 属性 名前ユーザーが入力したパスワードとともにサーバーに送信されるパスワード入力フィールドの名前を設定します。 パスワードフィールドを作成するには、パスワード属性を次のように設定する必要があります。 タイプ(パスワード(英語) - パスワード):

パスワードフィールドを含むフォームの作成例:

例: パスワードフィールド

• 自分で試してみてください」

あなたのログイン:

パスワード：

あなたのログイン:

パスワード：

この属性と組み合わせて使用​​できます。 最大長の値によって、特定の文字列に入力できる最大文字数が決まります。 属性を使用して入力フィールドの長さを設定することもできます。 サイズ。 デフォルトでは、ほとんどのブラウザではテキスト フィールドの幅が 20 文字に制限されています。 属性の代わりに新しいフォームの要素の幅を制御するには サイズ、カスケード スタイル シート (CSS) の使用をお勧めします。
属性 価値フォームがロードされたときにテキストフィールドにデフォルトで表示される値を指定します。 フィールドにデフォルト値を入力すると、ユーザーがここにどのようなデータをどの形式で入力するかを正確に説明できます。 これはサンプルのようなものです。ユーザーは目の前で例を見ながらフォームに記入する方がはるかに便利です。

スイッチ（無線機）

要素 タイプ 無線論理「OR」原理を使用するスイッチを作成し、複数の値のうち 1 つだけを選択できるようにします。1 つの位置を選択すると、他の値はすべて非アクティブになります。 トグル要素の基本構文は次のとおりです。

属性 名前 for switch は必須であり、複数のスイッチ要素を 1 つのグループに結合する際に重要な役割を果たします。 ラジオ ボタンをグループに結合するには、同じ属性値を設定する必要があります 名前と異なる属性値 価値。 属性 価値選択したラジオ ボタンの値をサーバーに送信するように設定します。 ユーザーが選択した応答オプションをサーバーが認識できるように、各ラジオ ボタン要素の値はグループ内で一意である必要があります。
属性の存在 チェック済み switch 要素の (英語から - インストール済み) は、必要に応じてページを読み込むときに、提案されたオプションのどれをデフォルトで選択する必要があるかを示します。 この属性は、グループ内の 1 つのラジオ ボタン要素に対してのみ設定できます。

• 自分で試してみてください」

何歳ですか？

1. 18歳以下
2. 18時から24時まで
3. 25から35まで
4. 35以上

何歳ですか？

1. 18歳以下
2. 18時から24時まで
3. 25から35まで
4. 35以上

チェックボックス

要素 タイプ チェックボックス提供するオプションからユーザーが選択できるという点で、ラジオ ボタンに似たチェックボックスを作成します。 ラジオ ボタンとの主な違いは、訪問者が一度に複数のオプションを選択できることと、チェックボックス自体が円ではなく四角で示されることです。 ラジオ ボタンと同様に、各項目に同じ属性値を割り当てることでチェックボックスのグループが作成されます。 名前ただし、各チェックボックスには独自の意味があります。 チェックボックスの基本的な構文は次のとおりです。

属性 チェック済みは、ラジオ ボタンと同様に、ページの読み込み時にデフォルトでチェックボックスがオンになるように指定します。 この属性は、複数のグループのチェックボックスに対して同時に設定できます。
次のチェックボックスの使用例には、デフォルトの回答の選択肢がいくつかあります。

例: ラジオボタンの使用

• 自分で試してみてください」

1. ジャズ
2. ブルース
3. ロック
4. シャンソン
5. 国

どのようなジャンルの音楽が好きですか?

1. ジャズ
2. ブルース
3. ロック
4. シャンソン
5. 国

確認（送信）ボタンとクリア（リセット）ボタン

要素 タイプ 提出するボタンが作成され、クリックされるとブラウザがサーバー スクリプトに送信され、ユーザーがフォームに入力したデータが処理されます。 フォームをクリアするボタンを作成する場合、属性を割り当てます。 タイプ「リセット」値。 要素 タイプ 提出するオプションの属性を割り当てることができます 名前。 属性 価値この要素でボタンのラベルを示すテキストを指定するために使用されます。 デフォルトでは、ブラウザのボタンには「送信」と書かれていますが、このテキストに満足できない場合は、自分で入力してください。 確認ボタンのスタイルはブラウザによって異なる場合があるため、CSS ツールを使用してボタンのスタイルを自分でカスタマイズするか、グラフィカル ボタンを使用することをお勧めします。
確認ボタンとクリアボタンの作成:

例: 送信とリセットの使用

• 自分で試してみてください」

「リセット」ボタンをクリックすると、ユーザーが入力したデータがリセットされます。

アクション属性。

要素のメイン

属性です アクション、フォームのデータ ハンドラーを指定します。 データ ハンドラーは、フォーム データの処理方法を記述したファイルです。 この処理の結果、新しい HTML ページがブラウザに返されます。 つまり、属性では アクションフォームを処理するためのサーバー上のハンドラー ファイル (スクリプト ページと呼ばれることもあります) への URL パスを指定します。 構文は次のとおりです。

…

処理ファイルはサーバー上にあります mytestserver.comフォルダ内 ネームフォルダーおよびデータを処理するサーバー スクリプトの名前 - オブラボチク.php。 Web ページ上のフォームに入力したすべてのデータが彼に転送されます。 .php 拡張子は、指定されたフォームが PHP で記述されたスクリプトによって処理されることを示します。 ハンドラー自体は別の言語で作成できます。たとえば、Python、Ruby などのスクリプト言語を使用できます。
常に属性値を設定することをお勧めします。 アクション。 フォームが配置されている同じページに値を渡す必要がある場合は、action 属性の値として空の文字列を指定します: action=""。

メソッド属性

属性 方法情報をサーバーに転送する方法を指定します。 選択するフォーム送信方法は、フォームで送信するデータによって異なります。 ここでは、このデータの量が大きな役割を果たします。 最も一般的なのは、フォーム ソース データをブラウザからサーバーに転送する 2 つの方法です。 得るそして 役職。 メソッドは任意に設定できます。指定しない場合はデフォルトが使用されます。 得る。 それぞれの使い方を考えてみましょう。

POSTメソッド

方法 役職データはメッセージの本文に含まれているため、ユーザーが気付かないうちにデータをパッケージ化してサーバーに送信します。 Webブラウザ（メソッド使用時） 役職特別なヘッダーとそれに続くフォーム データで構成されるリクエストをサーバーに送信します。 このリクエストの内容はサーバーのみが利用できるため、メソッドは 役職パスワード、銀行カードの詳細、ユーザーのその他の個人情報などの機密データを送信するために使用されます。 方法 役職とは異なり、大量の情報を送信するのにも適しています。 得る、送信文字数に制限はありません。

GETメソッド

すでにご存知のとおり、ブラウザの主な仕事はサーバーから Web ページを受信することです。 したがって、このメソッドを使用すると、 得るの場合、ブラウザはいつものように Web ページを取得するだけです。 方法 得るフォーム データもラップしますが、リクエストをサーバーに送信する前に URL の末尾に追加します。 メソッドがどのように機能するかを理解するには 得る、実際に見てみましょう。 このレッスンの最初の例 (例: 単純な HTML フォーム) をメモ帳 (Notepad++ など) で開き、HTML コードに少し変更を加えます。

それらの。 交換する 役職の上 得る.
という名前でファイルを保存します ファイル名.htmlブラウザ ページを更新し (F5)、フォームに次のように入力します。 ヴァシャ・パプキンを選択し、「送信」ボタンをクリックします。 ブラウザのアドレス バーに次のような内容が表示されます。

File_name.html?firstname=Vasya&lastname=パプキン

これで、各フォーム要素の名前とその値が URL 内に表示されるようになります。
URL は疑問符でフォーム データの残りの部分から区切られ、変数名と値はアンパサンドで区切られます。 (&) .
大量の情報を転送しない場合は、この方法を使用する必要があります。
銀行カード番号やパスワードを保存するなど、フォーム内のデータが機密性の高い場合、この方法は機能しません。
また、その方法は、 得るフォームと一緒にファイルをサーバーに送信する場合には適していません。

フォーム要素のグループ化

意味に関連するフォーム要素をタグ間でグループ化できます。

そして

。 ブラウザが表示されます

フォーム要素のグループを囲むフレームの形式。 フレームの外観は、カスケード スタイル シート (CSS) を使用して変更できます。
各グループにタイトルを追加するには、要素が必要です

、フレームに埋め込まれるグループ タイトル テキストを指定します。