家 › インターネット › マッスルでHTML登録フォームを作成する方法。 CSS フォーム。登録パネルの作成

マッスルでHTML登録フォームを作成する方法。 CSS フォーム。登録パネルの作成

HTML のフォームは最も複雑ですが、その一方で、おそらく HTML で最も興味深いトピックでもあります。

Web フォームを使用すると、サイト訪問者は特別なフィールドに特定の情報を入力でき、開発者はその情報を自分にとって都合の良い形式で受け取ることができます。

フォームの例としては、ゲストブック、アンケート、オンラインテストなどがあります。フォームは、Webサイトへの登録時やオンラインストアでの注文時などに記入します。

HTML を使用すると、テキストフィールド、メニュー、リスト、ボタン、チェックボックス、ラジオボタンなどのフォームフレームワークを作成できます。つまり、特定の情報をフォームに入力するために使用される要素です。

次に、フォームに入力されたデータは処理のためにサーバーに送信されます。しかし、ここでは HTML は無力です。HTML に添付されているプログラムまたはスクリプトがすでにフォームの処理に取り組んでいます。このようなプログラムは通常、PHP または JavaScript で作成されます。

フォーム属性 - タグ

Web ページには複数のフォームが存在する場合があります ( 開発者が必要とするだけ）。それぞれはタグで始まりますそして終了タグで終わります .

action 属性はどのフォームでも必須です。これは、フォームを提供するファイルのアドレスを指定します ( 入力されたデータを処理します).

Method 属性は、フォームのコンテンツを送信する方法を指定します。 GET と POST の 2 つのメソッドがあります。 GET メソッドと POST メソッドを使用して情報を送信するというトピックはデータ処理言語に関連しているため、これらのパラメーターについて詳しく調べるのは意味がありません ( たとえばPHP）。フォームでほとんどの場合に使用されるのは POST データ転送方法であることを知っておくだけで十分です。

タグ名属性

はオプションです。ただし、文書内に複数のフォームがある場合、それぞれのフォームがハンドラーによって何らかの方法で識別される必要があります。したがって、この場合には name 属性の存在が必要です。これはフォームの一意の名前を指定します。

入力データのエンコーディングを設定することもできます。これには accept-charset 属性が使用されます。また、target 属性を使用して、送信されたフォームの処理結果が表示されるウィンドウを定義します ( 新しいウィンドウまたは現在のウィンドウで).

でもタグ自体はフォームは最初にどこかに入力する必要があるデータを送信するため、意味がありません。

データ入力。フォームフィールド - タグ

鬼ごっここれはフォームで最も一般的なタグです。これは、フォームにデータを入力するために機能するさまざまな要素 (テキストフィールド、ボタン、チェックボックス、ラジオボタン) を作成するように設計されています。

type はタグの主な属性です。フィールドタイプを設定します( 要素) 形式:

属性値 type="..."	結果	説明
		テキストを入力するための単一行のテキストフィールド。 size 属性はフィールドの幅を文字数で指定します。
		パスワードを入力するためのテキストフィールド。 maxlength 属性は、入力できる最大文字数を設定します。
		スイッチ。提供されたオプションから 1 つだけ選択できます。 selected 属性は、事前にチェックされたフィールドを指定します。
		チェックボックス。いくつかのオプションから選択できます。属性 selected は、事前にチェックされたフィールドを定義します。
		ボタン。 value 属性はボタンのラベルを設定します。
		リセットボタン。フォームフィールドを元のフォームに戻します。入力したデータをリセットします。
		入力したデータを送信するボタンです。
		送信するファイルの名前を入力するフィールド。
		ボタン画像。サーバーにデータを送信するためにも使用されます。 src 属性は画像ファイルのアドレスを指定します。
		隠しフィールド - ユーザーには表示されません。

ドロップダウン - タグタグと同じ情報を収集するのに役立ちます。1 つ以上の要素を選択できるリストが作成されます。各要素は値に対応し、値は処理のためにサーバーに送信されます。

作成されるリストのタイプは、size 属性の値によって異なります。 size= "1" ( デフォルト値) リストはドロップダウンになります。

size 属性の異なる値は、表示されるリスト項目の数に対応します。たとえば、 size="3" の場合、3 つの要素が表示されます。他のリスト項目を表示するには ( 何かあれば) 自動的に追加される垂直スクロールバーを使用する必要があります。

デフォルトでは、リスト項目は 1 つだけ選択できます。タグに multiple 属性を追加するそして各リスト項目を作成します。

タグの name 属性を使用する

世界の七不思議！

複数行のテキストフィールド - タグ </h3> <p>鬼ごっこ <textarea>複数行のテキストフィールドを作成します。ハンドラーにデータを送信するときに、改行を行っても保持されます。</p> <p>タグ名属性 <textarea>は必須です。これを使用すると、テキストフィールドに名前が付けられます。</p> <p>無効な属性はフィールドを無効にします。フィールドの内容は変更できず、アクセスできません。 readonly 属性は、フィールドが読み取り専用であることを示します。ユーザーはコンテンツを編集することはできませんが、フィールドは使用可能です。フィールドを選択してコピーすることなどは可能です。</p> <p>Cols 属性と rows 属性を使用して、テキストフィールドの幅を文字単位で設定し、フィールドの高さを行単位で設定できます。</p> <p><img src='https://i2.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でフォームを作成する。これが HTML で最も重要なトピックだと思います。英語の先生の言葉を思い出します。彼女は、動詞「get」のすべての語形の意味を知っていれば、彼らの助けがなければ英語でコミュニケーションをとることができない、と言いました。 HTMLのフォームも同様です。フォームを知っているなら、HTML についてもよく知っているはずです。現在では、HTML フォームを持たないサイトはほとんどないでしょう。フォームは、登録、承認、サブスクリプション、ゲストブック、フォーラムの作成時、独自のエンジンの作成時など、あらゆる場所で使用されます。記事はおそらく長くなるので、準備してください。例を使用してフォームの学習をすぐに始めましょう。

HTMLフォームの作成

一目見ると震えます。実際、ここではすべてが簡単です。少しずつ理解していきましょう。

フォームの作成キーワードから始まる

。タグのところに

いくつかの属性があります。 name 属性はフォームの名前を指定します (これは、JavaScript などでフォームを処理するために必要です)。もちろん、名前を指定しないこともできますが、そうすることをお勧めします。 action 属性は、フォームを処理するスクリプト (通常は PHP スクリプト) の名前を指定し、 action="request.php" のようになります。私たちの場合、フォームは処理されていません。 Method 属性は、オープン ( get ) または非表示 ( post ) のどちらの方法でデータを転送するかを示します。これら 2 つの異なる属性を使用してブラウザ行に表示される内容の例を示します。

1) post メソッドを使用する場合: mysite.ru/request.php。
2) get メソッドを使用する場合: mysite.ru/request.php?myname="アレックス"&姓="グリニン".
違いは明らかだと思います。

フォーム要素:

1) テストフィールド。テキストフィールドはタグを使用して作成されます、実際にはフォームのすべての要素と同様です。 type="text" 属性はテキストフィールドの作成を担当します。すべてのフォーム要素と同様、name 属性は名前です。 value 属性はデフォルト値です。

2) パスワードフィールド。同じタグを使用して設定する type="password" 属性を使用します。

3) テキストエリア。タグを使って設定する。これはペアのタグです。テキスト領域はタグで閉じる必要があります。この要素にはいくつかの属性があります。 name 属性を設定することもできます。 rows 属性は行数を担当し、cols 属性は列数を担当します。最新のブラウザでは、テキスト領域を拡張して、テキストを入力しやすくすることができます。 rows 属性とcols 属性は、いわば、フォームを圧縮できる最小値です (最初、ページが読み込まれるとき、テキスト領域のサイズは rows 属性とcols 属性で指定された大きさになります)。

4) ラジオボタン。ラジオボタンの目的は、複数の値から 1 つの値を選択することです。ラジオボタンもタグを使用して作成されます type="radio" 属性を使用します。 value 属性は、ラジオボタンに対応する値を指定します。この点に注目していただきたいのですが、この例では、3 つのボタンすべてが同じ name 属性値を持っています。それらの name 属性値が異なる場合は、それらすべてをクリックできます。したがって、正しく処理することができなくなります。 selected 属性 (値はありません) は、デフォルトでどのラジオボタンが選択されるかを示します。

5) チェックボックス。ラジオボタンとは異なり、チェックボックスはすべてクリックできます。例を入力して自分の目で確認してください。タグを使用して作成されました type="checkbox" 属性を使用します。残りの属性の意味はラジオボタンの意味と同じです。すべてのボックスのチェックを外すと、空の値が返されることだけは言っておきます。私たちの場合、それは mycheck="" になります。

6) ドロップダウンリスト。ドロップダウンリストはタグを使用して作成されます。このデザインでは、タグも使用する必要があります

7) ファイルを送信するフィールド。たとえば、プロフィールのアバターを設定するときなど、ファイルを複数回ダウンロードして送信したことがあるのではないでしょうか。このような要素は、タグを使用して実装されます。 type="file" 属性を使用します。最も難しいのはファイルを正しく処理することですが、これについては別の記事で説明します。

8) 隠しフィールド。場合によっては、フォームの残りの部分とともに一部のデータを転送する必要がある場合があります。これがタグの目的です。 type="hidden" 属性を使用します。このフィールドはフォーム自体には表示されませんが、ページのソースコードを見ると (ページを右クリックして「ソースコード」を選択するか、「ctrl+u」キーの組み合わせを押すと) 確認できます。。

9) ボタン。ボタンはタグを使用して作成されます type="button" 属性を使用します。 value 属性は、ボタンに何を書き込むかを決定します。ボタンは通常、何らかのイベントを処理するために機能します。ボタンイベントについては、次のいずれかの記事で読むことができます。

10) フォームを送信します。基本的にこれは同じボタンですが、type="submit" 属性が付いています。ボタンをクリックすると、タグの action 属性で指定されたパスに沿ってフォームが処理されます。

サイト内を移動する過程で、ユーザーは主にクリックするだけです。 リンク Web ページをナビゲートします。

ただし、ユーザーが独自のファイルを提供する必要がある場合があることは明らかです。 入力フィールド。これらの種類の対話には次のようなものがあります。

ウェブサイトでの登録とログイン。
個人情報（氏名、住所、クレジットカード情報など）の入力。
コンテンツのフィルタリング (ドロップダウンリスト、チェックボックスなどを使用)。
検索を実行する。
ファイルをダウンロードしています。

これらのニーズに対応するために、HTML はインタラクティブな機能を提供します。 コントロールフォーム:

テキストフィールド (1 行以上);
スイッチ。
チェックボックス;
ドロップダウンリスト。
ダウンロード用のウィジェット。
送信ボタン。

これらのコントロールにはさまざまな機能が含まれますタグ HTML ですが、ほとんどはタグを使用します。これは自己終了要素であるため、フィールドの型はその type 属性によって決まります。

要素

を定義するブロック要素です。 相互の作用 Web ページの一部。その結果、すべてのコントロール ( , または <button>）でなければなりません <i>内部</i>要素 <form> .</p><p>2 つの HTML 属性 <b>必要</b>:</p><ul><li>アクションには、決定するアドレスが含まれています。 <i>どこ</i>フォーム情報が送信されます。</li><li>メソッドは GET または POST のいずれかであり、どちらかを決定します。 <i>どうやって</i>フォーム情報が送信されます。</li> </ul><p>通常、フォーム情報は次の宛先に送信されます。 <b>サーバ</b>. <i>どうやって</i>このデータは、このマニュアルの範囲を超えて処理されます。</p><p>フォームは、連携して機能するコントロールの集合であると考えてください。 <b>1つ</b>手術。サイトのログインフォームを作成した場合は、 <b>三つ</b>田畑：</p><ul><li>電子メールフィールド <input type="email"> </li><li>パスワードフィールド <input type="password"> </li><li>送信ボタン <input type="submit"> </li> </ul><p>これら 3 つの HTML 要素は 1 つのフォーム内に含まれます <span><form action="/login" method="POST"> </span>.</p><p>同様に、同じ HTML ページの別の要素に登録フォームを追加できます。 <form> .</p><h2>テキストフィールド</h2><p>ほぼすべてのフォームで必要となるのは、 <b>文章</b>ユーザーは、名前、電子メールアドレス、パスワード、住所などを入力します。フォームのテキストフィールドにはさまざまなオプションがあります。</p><p>これらのフィールドは非常に似ており、ユーザーはあらゆる種類のテキスト (間違ったテキストも含む) を入力できますが、そのタイプは特定の内容を提供します。 <b>セマンティクス</b>入力用、フィールドにどのような情報が含まれるかを決定する <b>しなければならない</b>含む。</p><p>ブラウザーは、改善のためにコントロールのインターフェイスをその後わずかに変更する可能性があります。 <i>インタラクティブ性</i>または、どのようなコンテンツが期待されているかを提案します。</p><p>たとえば、パスワードフィールドには記号の代わりにドットが表示されます。また、数値フィールドでは、上下キーを使用して値を増減できます。</p><h2>プレースホルダー</h2><p>表示できるテキストフィールド <b>思わせぶりな</b>テキストを入力するとすぐに消えるテキスト。</p><p> <input type="text" placeholder="あなたの名前を入力してください"> </p><p>何かを入力し始めると、「名前を入力してください」というテキストが消えます。</p><h2><label></h2><p>フォーム要素自体はあまり説明的ではないため、通常はその前にテキストが続きます。 <b>ラベル</b>.</p><p> <label>Eメール</label> <input type="email"> </p><p>プレースホルダーは、どのようなコンテンツが期待されるかについてのヒントをすでに提供していますが、ラベルには常に表示されたままになるという利点があり、チェックボックスやラジオボタンなどの他のタイプのフォーム要素と一緒に使用できます。</p><p>短い段落を使用してフォーム要素を説明することもできますが、 <label>フォーム内にのみ存在するため、意味的にはより正確です。 <label>フィールドの id 値に対応する for 属性を使用して、特定のフォーム要素に関連付けることもできます。</p><p> <label for="first_name">名前</label> <input id="first_name" type="text"> </p><p>ラベルをクリックすると、フォーカスがテキストフィールドに移動し、その中にカーソルが置かれます。今のところ、このバンドルは役に立たないように見えますが、チェックボックスとスイッチを使用すると便利になります。</p><h2>チェックボックス</h2><p><b>チェックボックス</b>- これらは、オンまたはオフの 2 つの状態のみを持つフォーム要素です。基本的に、ユーザーは何かに対して「はい」または「いいえ」と言うことができます。</p><p> <input type="checkbox">私を覚えてますか</p><p>小さなチェックボックスをクリックするのは難しい場合があるため、チェックボックスとその説明を内側に配置することをお勧めします。 <label> .</p><p> <label> <input type="checkbox">条件に同意します</label> </p><p>「規約に同意します」のテキストをクリックしてチェックボックスを切り替えることができます。</p><p>デフォルトでは、チェックボックスは無効になっています。 selected 属性を使用するだけで、有効としてマークを付けることができます。</p><p> <label> <input type="checkbox" checked>請求先住所を使用する</label> </p><h2>スイッチ</h2><p>ユーザーに提供できます <b>オプションのリスト</b>スイッチで選択可能。</p><p>このフォーム要素が機能するには、HTML コードが必要です。 <b>グループ</b>ラジオボタンのリストをまとめます。これは、name 属性に同じ値を使用することで実現されます。</p><p> <label>家族の状況</label> <label> <input type="radio" name="status">シングル</label> <label> <input type="radio" name="status">既婚</label> <label> <input type="radio" name="status">離婚した</label> <label> <input type="radio" name="status">男やもめ</label> </p><p>すべてのラジオボタンは name 属性に同じ値 (この場合は status の値) を使用するため、1 つのオプションを選択すると他のすべてのオプションがオーバーライドされます。スイッチは、 <b>相互排他的</b>.</p><h3>ラジオボタンとチェックボックスの違い</h3><p>チェックボックスは存在しますが、 <b>自分で</b>、スイッチはフォーム内でのみ使用できます。 <b>リスト</b>(これは、少なくとも 2 つのオプションを意味します)。</p><p>さらに、チェックボックスをクリックすると、 <b>任意</b>、ラジオボタンのいずれかを選択すると、 <b>義務</b>。これが、最も近いオプションを選択した場合にスイッチをオフにすることができない理由です。最終的には、いずれかのスイッチが常に選択されます。</p><h2>ドロップダウンメニュー</h2><p>選択するオプションの数が多すぎる場合は、ドロップダウンメニューを使用できます。 <select> .</p><p>これらはスイッチと同様に機能しますが、レイアウトのみが異なります。</p><p> <select> <option>1月</option> <option>2月</option> <option>行進</option> <option>4月</option> <option>5月</option> <option>六月</option> <option>7月</option> <option>8月</option> <option>9月</option> <option>10月</option> <option>11月</option> <option>12月</option> </select> </p><h3>ドロップダウンメニューから複数選択</h3><p>multiple 属性を追加すると、複数のオプションを選択できるようになります。</p><p> <label>どのようなブラウザを使用していますか?</label> <select multiple> <option>グーグルクローム</option> <option>インターネットエクスプローラ</option> <option>モジラ Firefox</option> <option>オペラ</option> <option>サファリ</option> </select> </p><p>Ctrl (または ⌘) を押しながらクリックして、複数のオプションを選択します。これは、1 行に複数のチェックボックスを使用する代わりに使用できます。</p><h2>例: 完全な登録フォーム</h2> <form action="/signup" method="POST"> <p> <label>訴える</label> <label> <input type="radio" name="title" value="氏">氏</label> <label> <input type="radio" name="title" value="夫人">夫人</label> </p> <p> <label>名前</label> <input type="text" name="first_name"> </p> <p> <label>姓</label> <input type="text" name="last_name"> </p> <p> <label>Eメール</label> <input type="email" name="email"> </p> <p> <label>電話</label> <input type="tel" name="phone"> </p> <p> <label>パスワード</label> <input type="password" name="password"> </p> <p> <label>パスワードを確認してください</label> <input type="password" name="password_confirm"> </p> <p> <label>国</label> <select name="country"> <option>カナダ</option> <option>フランス</option> <option>ドイツ</option> <option>イタリア</option> <option>日本</option> <option>ロシア</option> <option>イギリス</option> <option>アメリカ合衆国</option> </select> </p> <p> <label> <input type="checkbox" name="terms">利用規約に同意します</label> </p> <p> <button>登録する</button> </p> </form> <p>他のフォーム要素も利用できますが、最もよく使用されるものを取り上げました。</p> <p>基本的な HTML タグを考慮すると、フォームなどの重要な要素に触れずにはいられません。 Web ページではフィードバックが必要になることがよくあります。たとえば、サイト上のフォームへの記入、登録、承認、コメントなどです。これらすべての場合において、ユーザーはページ上の特別な領域 (フォームフィールド) に入力し、その後データがサーバーに送信されます。フォームはフィードバックを作成するために使用されます。フォームは、ユーザー入力を目的とした HTML ドキュメントの一部です。</p><p>図は、教育機関の Web サイトにある学生登録フォームを示しています。</p><p>コンテナはフォームの作成に使用されます <form></form> action 属性を使用して、フォームから送信されたデータを処理するサーバー上のページを指定します。</p><p>最も単純な形式の構造:</p><p><formaction="адрес страницы обработчика формы"><br>フォーム要素... <br></form></p><p>各フォームには、フォームに記入した後にデータを送信するための送信ボタンも必要です。</p><p>ボタンの構造:</p><p><input type="submit" name="имя кнопки" value="表示名"></p><p>したがって、ほぼすべてのフォーム要素を記録するには、タグが使用されます <input>type 属性を使用します。フォームからすべてのデータをリセットするボタンを作成するには、次の構造を使用します。</p><p><input type="reset" name="имя кнопки" value="表示名"></p><p>テキストフィールドを作成するには、テキストパラメータがあります。次のパラメータが使用されます: name - フィールド名。サイズ – シンボル内のフィールドの場合。 maxlength – フィールド内の最大文字数。 value – デフォルトでフォームに表示される情報</p><p>2 つのテキストフィールドがあるフォームエントリの例:</p><p><form action="obrabotka.php"><br>あなたの名前を入力してください： <br><br><input type="text" name="name" size=”15” maxlength=”20” value="" ><br><br>姓を入力してください: <br><br><input type="text" name="surname" size=”20” maxlength=”25” value="" ><br><br><input type="submit" name="otpravit" value="送信"><br><input type="reset" name="ochistit" value="クリア"><br></form></p><p>フォームの結果を図に示します。</p><p><img src='https://i2.wp.com/webriz.ru/information/userfiles/1/saiti/1/forms/forma-html-primer.jpg.png' width="100%" loading=lazy loading=lazy></p><p>コメントなどのテキストフィールドに大量の情報を入力する必要がある場合は、タグを使用して作成されるテキストエリアフォームを使用します。 <textarea>次の属性を持ちます: name – エリアの名前。 Cols – エリア列の数。 rows – 行数。 Wrap – 行を折り返す方法 (on – 行を折り返す、off – 行を折り返さない)。</p><p>上記のコードにテキストエリアフィールドを追加しましょう。</p><p>コメント： <br><textarea name="area" cols=”25” rows=”5” wrap=”on”>

テキスト領域を操作するコードの結果を図に示します。

フォームの次の要素はリストで、これを使用すると、提示された値のセットから選択できます。タグを使用するとリストフォームを作成できます

ページの読み込み時に要素が強調表示されるようにするには、タグ内で

同様の選択方法は、チェックボックスとラジオボタンのフォーム要素です。これらの要素の違いは、チェックボックスでは複数の選択ができるのに対し、ラジオボタンでは 1 つの選択しかできないことです。

チェックボックスとラジオボタンエントリの構造:

文章

ラジオボタン：

文章

構造体で指定された要素では、チェックボックスとラジオボタンを強調表示するために、checked 属性がデフォルトで使用されます。チェックボックス、ラジオボタン、HTML コードの使用例を図に示します。

もう 1 つのフォーム要素はボタンで、type タグ属性を使用して指定されます。値ボタンを使用して:

ボタンを作成するために指定されたコードには、onclick パラメーターがあり、通常、このボタンがクリックされたときに特定のアクションを実行するコードをプログラミング言語で指定します。

特別なウィンドウにメッセージを表示するには、JavaScript コマンド aler を使用します。例の結果を図に示します。

ボタンに画像を挿入するには、次の例に示すコードを使用します。

Web サイトに登録してログインするとき、非表示のテストを持つフィールドが使用され、星印で表示されます。これはパスワードフォーム要素です。

サイトへの登録は複数のページに分かれていることが多く、後続の各ページには前のページの情報が含まれている必要があります。送信された情報を非表示にするために、hidden form 要素が使用されます。

非表示のフォーム要素はブラウザウィンドウには表示されません。

ファイルをサーバーにアップロードするために、フォームには file 要素があります。ファイルをサーバーにアップロードするコードの例を以下に示します。

そこで、このトピックでは、さまざまな HTML ページを作成するためのフォーム要素について説明しました。これらの要素をコンピューターまたはサーバー上のスクリプトハンドラーと組み合わせて使用すると、本格的な Web アプリケーションを開発できます。

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)。データは収集されませんが、この章の本文に戻るだけです。

例 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> <script type="text/javascript">  </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <div class="single-popular"> <div class="single-popular-tit col-lg-12">カテゴリ内で人気のあるもの:</div> <div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="single-popular-item-wrp"> <img width="150" height="120" src="/uploads/5be8b76667696c4cd63a8c38979b50af.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Photoshop でレイヤーを 1 つに結合する、またはグループに結合する方法 Photoshop で複数のレイヤーを結合する方法"/ loading=lazy loading=lazy> <div class="single-popular-item-tit">Photoshop でレイヤーを 1 つに結合したり、グループに結合したりする方法...</div> <a href="https://innovakon.ru/ja/settings/sposoby-obedineniya-sloev-v-fotoshope-kak-obedinit-sloi-v-fotoshope-v.html" rel="bookmark" title="Photoshop でレイヤーを 1 つに結合する、またはグループに結合する方法 Photoshop で複数のレイヤーを結合する方法">読む</a> <div class="clr"> </div> </div> </div> <div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="single-popular-item-wrp"> <img width="150" height="120" src="/uploads/33b72e60e1d3066a9663f391221dc014.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="新しい Android スマートフォンに連絡先を転送する"/ loading=lazy loading=lazy> <div class="single-popular-item-tit">新しい Android スマートフォンに連絡先を転送する</div> <a href="https://innovakon.ru/ja/phone/perenos-kontaktov-na-novyi-telefon-android-android-prilozheniya.html" rel="bookmark" title="新しい Android スマートフォンに連絡先を転送する">読む</a> <div class="clr"> </div> </div> </div> <div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="single-popular-item-wrp"> <img width="150" height="120" src="/uploads/ff504b14456f4702a94368a161811b1d.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Samsung Galaxy が勝手に再起動する - 解決策 Galaxy note 4 が勝手に再起動する"/ loading=lazy loading=lazy> <div class="single-popular-item-tit">Samsung Galaxy が自動的に再起動する - Galaxy note ソリューション...</div> <a href="https://innovakon.ru/ja/internet/esli-xiaomi-postoyanno-perezagruzhaetsya-samsung-galaksi-perezagruzhaetsya-sam-po.html" rel="bookmark" title="Samsung Galaxy が勝手に再起動する - 解決策 Galaxy note 4 が勝手に再起動する">読む</a> <div class="clr"> </div> </div> </div> <div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="single-popular-item-wrp"> <img width="150" height="120" src="/uploads/242e09224609f2b7cbd6b5b9f2adc411.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Kaspersky Rescue Disk の主な機能"/ loading=lazy loading=lazy> <div class="single-popular-item-tit">Kaspersky Rescue Disk の主な機能</div> <a href="https://innovakon.ru/ja/rates/skachat-zagruzochnyi-disk-kasperskogo-osnovnye-vozmozhnosti-kaspersky-rescue.html" rel="bookmark" title="Kaspersky Rescue Disk の主な機能">読む</a> <div class="clr"> </div> </div> </div> <div class="clr"></div> </div> </div> <div class="sidebar col-lg-3 col-md-4 col-sm-12"> <div class="sidebar-wrp"> <div class="sidebar-wrp-title">最新記事</div> <div class="sidebar-wrp-des"> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/d93303aadea847492ee52538b585df87.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">MacBook が Wi-Fi に接続しない MacBook が表示されない...</div> <div class="clr"></div> <a href="https://innovakon.ru/ja/phone/macbook-ne-podklyuchaetsya-k-wifi-avtomaticheski-makbuk-ne-podklyuchaetsya-k-wifi-makbuk-ne-vidit-vai-fai.html">読む</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/094fe0c598853f299be65e8611b45d60.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">WebMoneyでお金を稼ぐ方法</div> <div class="clr"></div> <a href="https://innovakon.ru/ja/internet/kak-zarabotat-rubli-na-webmoney-kak-zarabotat-na-webmoney-proverennye.html">読む</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/280d369c9d1e343119c3d855af4b9c4d.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">「スープラ」タブレット：カスタマーレビュー</div> <div class="clr"></div> <a href="https://innovakon.ru/ja/rates/planshet-podelka-est-takoi-supra-firma-supra-planshet-otzyvy-pokupatelei-plyusy-i-minusy.html">読む</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/b1724f08fa52145089eaa72f836127ee.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">リアルタイムの船の位置</div> <div class="clr"></div> <a href="https://innovakon.ru/ja/settings/voennye-korabli-v-realnom-vremeni-onlain-mestonahozhdeniya-sudov-v.html">読む</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/534951a61241c179a7c060b9fe1143c8.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Android に最適なプログラム...からの通話を録音します。</div> <div class="clr"></div> <a href="https://innovakon.ru/ja/rates/prilozheniya-dlya-android-obuchayushchie-programmy-dlya-detei-luchshie.html">読む</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/e280b0808c5e749938522ba1df2a41ec.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Twitter でフォロワー以外を削除する</div> <div class="clr"></div> <a href="https://innovakon.ru/ja/services/kak-udalit-ne-vzaimnyh-chitatelei-v-twitter-udalyaem-ne-chitatelei-v.html">読む</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/229610355b0a27a465c73ddb25664556.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">ラップトップでのインターネット接続: すべての可能性...</div> <div class="clr"></div> <a href="https://innovakon.ru/ja/phone/kak-vklyuchit-internet-na-kompyutere-ispolzuya-mobilnyi-telefon.html">読む</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/5399be52c80b405fedf00779a6136b42.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Samsung Galaxy S IV は新しいフラッグシップです...</div> <div class="clr"></div> <a href="https://innovakon.ru/ja/phone/samsung-galaxy-s4-vtoroi-vzglyad-samsung-galaxy-s-iv-novyi-flagman-galakticheskogo-masshtaba-galak.html">読む</a> </div> <div class="clr"></div> </div> </div> <div id="text-4" class="widget widget_text sidebar-wrp"> <div class="textwidget"> </div> </div> <div id="ketena1" style="height:500px;width:260px;" align="center"></div> <div class="clr"></div> </div> </div> </div> </div> <div id="footer"> <div class="container"> <div class="row"> <div class="footer-contacts col-lg-6 col-md-6 col-sm-12 col-xs-12"> <img src="/logo/logo.png" loading=lazy loading=lazy> <div class="footer-contacts-tit">innovakon.ru <br>携帯電話と通信</div> <div class="footer-soc"> <div class="footer-soc-wrp"> <div class="soc_w"> <a href="#" class="soc-link vk" target="_blank"></a> <a href="#" class="soc-link fb" target="_blank"></a> </div> </div> </div> </div> <div class="footer-links col-lg-4 col-md-6 col-sm-12 col-xs-12"> </div> <div class="footer-links col-lg-4 col-md-4 col-sm-4 col-xs-4" style="display: block;"> <ul> <li><a href="">プロジェクト編集部</a></li> <li><a href="">ウェブサイト上の広告</a></li> </ul> <ul> <li><a href="https://innovakon.ru/ja/feedback.html">連絡先</a></li> <li><a href="https://innovakon.ru/ja/sitemap.xml">サイトマップ</a></li> </ul> </div> </div> </div> <div class="copyright">© 2024 携帯電話と通信</div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://innovakon.ru/wp-content/themes/trudinsp/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://innovakon.ru/wp-content/themes/trudinsp/js/SmoothScroll.js"></script> <a id="scroll-to-top" href="#" title="トップにスクロールします">上</a> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.4.1'></script> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/jquery-smooth-scroll/js/jss-script.min.js?ver=4.8.3'></script> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='/wp-includes/js/jquery/ui/effect.min.js?ver=1.11.4'></script> <script type='text/javascript' src='/wp-includes/js/jquery/ui/effect-blind.min.js?ver=1.11.4'></script> <script type='text/javascript'> /* <![CDATA[ */ var stbUserOptions = { "mode":"css","cssOptions":{ "roundedCorners":false,"mbottom":20,"imgHide":"http:\/\/innovakon.ru\/wp-content\/plugins\/wp-special-textboxes\/themes\/stb-metro\/minus.png","imgShow":"http:\/\/innovakon.ru\/wp-content\/plugins\/wp-special-textboxes\/themes\/stb-metro\/plus.png","strHide":"\u0421\u043a\u0440\u044b\u0442\u044c","strShow":"\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c"} }; /* ]]> */ </script> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/wp-special-textboxes/js/wstb.min.js?ver=5.5.101'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.8.3'></script> <script type="text/javascript" id="slb_context">/* <![CDATA[ */if ( !!window.jQuery ) { (function($){ $(document).ready(function(){ if ( !!window.SLB ) { { $.extend(SLB, { "context":["public","user_guest"]} );} } })} )(jQuery);} /* ]]> */</script> <script type="text/javascript">  </script><br> <br> </body> </html>

マッスルでHTML登録フォームを作成する方法。 CSS フォーム。 登録パネルの作成