フォームHTMLのセット。 HTML フォーム。複数行のテキストフィールド - タグ

ブログサイトの読者の皆さん、こんにちは。研究を続けて、フォームとその属性 () を備えた入力タグについて検討します。これを使用すると、サイトにさまざまなフォームを作成できます。

特定の Web リソースのトピックやコンテンツが何であれ、テキストフィールド、ドロップダウンメニュー、さまざまなボタンやスイッチなどのフォームが含まれる可能性が高くなります。ところで、私はすでに出版物の1つで、フォームの多様化に役立つ要素について話しました。

考えられるさまざまな形式の実際的な目的は何でしょうか? まず、特別に作成されたスクリプト (ハンドラー) を使用してさらに処理するために、ユーザーが入力したデータをサーバーに送信するために必要です。

HTML フォーム - フォームと入力を使用してフォームがどのように作成されるか

冒頭で述べたように、多かれ少なかれ開発された Web サイトには、何らかの Web フォーム、または同時に複数の Web フォームが存在する必要があります。 Web リソースが最新の要件に準拠しているという観点から、それらがどれほど重要であるかを理解するには、form タグと input タグに基づいてフォームを使用する 3 つのオブジェクトをざっと挙げるだけで十分です。これらのオブジェクトは、その名前だけで、何らかの方向性のプロジェクトの必要性:

たとえば、フィードバックの作成に関する記事 (すべてのユーザーがサイト管理者にメッセージを送信できるようにする) へのリンクをたどると、開口部 (

）一部：

ここで、Web フォームのインストールを開始するフォームが重要な役割を果たします。それ自体は Web ページ上の領域を表示しませんが、他のタグを含むコンテナとして機能します。

私たちの場合 (上のスクリーンショットを参照)、これらにはいくつかのものが含まれます。入力(この HTML タグは単一です。つまり、終了コンポーネントがありません)、また テキストエリア、さまざまな属性セットを持ちます。それぞれが、フォームに含まれる独自の要素を定義します。

16. オートフォーカス(パラメーターなし) は、Web ページが読み込まれるとすぐにフィールドにフォーカスを設定する論理属性です。その結果、フィールドをクリックせずにデータを入力できます。 input type="hidden" のみには適用できません。

17. 無効(値なし) - 追加されたフォーム要素をユーザーに対して無効にします。ほとんどの場合、スクリプトと組み合わせて使用され、アクセスできない要素がアクティブになる条件が指定されます。

18. 形状— 要素がコンテナの外にある場合、要素をフォームに関連付けます

。リンクするには、form タグにグローバル id 属性を追加し、input タグに form 属性を追加します。その値は同じです (例: id="data" と form="data")。。

19. 複数(パラメータなし) - セット 多肢選択オプションユーザー用であり、type="file" および type="email" と組み合わせてのみ使用されます。

ファイルアップロードフィールドを使用する場合は、Ctrl キーまたは Shift キーを使用して、コンピュータから複数のファイルを一度に選択できます。電子メールアドレスを入力するフィールドが表示される場合 (type="email")、電子メールをカンマで区切って入力する必要があります。

20. 必須(値なし) – ユーザーによるデータ入力の要件を有効にします。したがって、必須フィールドが空のままの場合、ブラウザは Web フォームの送信をブロックし、フィールドに入力する必要があることを示す対応するメッセージを表示します。

この属性は、グラフィックボタンや標準ボタン (type="button | image")、および非表示の入力フィールド (type="hidden") には使用されません。

input タグの次の 4 つの属性 (22 ～ 25) は、とほぼ同じ機能を持ちますが、完全を期すために、それらについても簡単に説明します。

23. 最小長さ— テキスト領域に入力する必要がある最小文字数に制限を課します。少ない文字数のデータを送信しようとすると、フォームの内容を補足する必要があることを示す短いメッセージが表示され、入力済みの文字数が表示されます。利用規約はmaxlengthの場合と全く同じです。

24. プレースホルダー— ヒント (パラメーターとして機能します) をテキストフィールドに直接配置できます。ヒントは、ユーザーが文字を入力し始めるとすぐに消えます。パラメータを使用して形成されたフィールドのみ 電子メール、パスワード、検索、テキスト、電話番号、URL inputタグのtype属性。

25. 読み取り専用(パラメーターなし) - フィールドに以前に入力されたテキストが読み取りとコピーのみに使用できることを示します。通常、これはスクリプトと組み合わせて使用され、条件が満たされた場合にこのフォーム要素をアクティブ化できるように指定されます。

最後に、さまざまなフォーム要素の機能を補完する属性をさらにいくつか紹介します。

26. パターン— その値として、情報入力ルールの設定に基づいて正規表現が反映されます。この場合、グローバルタイトル属性を追加することをお勧めします。この属性のパラメータとして、ユーザーがフィールドに入力するのに役立つ説明テキストを追加できます。パターンは、電子メール、パスワード、検索、テキスト、電話番号、URL 要素にのみ適用されます。例を挙げて理解しましょう。簡略化された登録フォーム ( 付き) のコードは次のとおりです。

ログイン

パスワード

ログインフィールド (type="text") には、正規表現 (5,) がパターン値として指定されており、ラテン文字の使用を暗示しており、少なくとも 5 文字を入力する必要があります。

パスワードのテキスト領域 (type="password") に関しては、値は (8,) に設定されます。これは、数字だけでなく、大文字と小文字のラテン文字のみを入力することを指定します。すべての文字の合計数は 8 つ以上でなければなりません。

指定された入力条件に違反すると、ブラウザーはデータの送信を許可せず、適切な警告を表示します。

27. 送信元— グラフィックボタン「イメージ」を表示するためのイメージへのパス (URL、その値) を定義します (上記の入力タイプパラメーターの表を参照)。

任意の整数または小数をパラメータとして受け取ることができます。 デフォルトのステップ = "1"。最終的な入力範囲を設定するには、前述の min 属性と max 属性を再度使用します。わかりやすくするために、テストフォームには 2 つの要素 type="number" を含めます。最初の場合は step="2" を設定し、2 番目の場合は step="0,1" を設定します。

-10 ～ 10 の値を入力します。

0 から 1 までの値を入力します。

29. 価値— ハンドラーに渡されるフォーム要素の値を設定します。名前とパラメーターのペアがサーバーに送信され、名前は input タグの name 属性によって決定され、パラメーターは value 属性によって決定されます。さらに、さまざまなフォーム要素に対して 値はさまざまな役割を果たします:

type="button |reset |submit" の場合 - ボタンにテキストラベルを設定します。
for type="checkbox | radio | image" - サーバー上でデータを送信および処理するときに、各チェックボックス、スイッチ、またはグラフィックボタンを識別します。
type="password | text" の場合 - フォームを読み込むとすぐにフィールドに予備テキストが表示されますが、ユーザーはこれを変更したり完全に削除したりできます。
for type="file" (ファイルのアップロード) は、この要素に影響しないため、適用されません。

上記の各オプションの使用例:

CMS を選択します。 W.P. ジョームラ

ここ 値の属性値各要素の次のコンポーネントを定義します。フィールド type="text" (「あなたの名前」) のテキストフラグメントを表示し、type="radio" を使用して設定された各ラジオボタン (「1」および「2」) を識別します。また、ボタン (「送信」) の碑文もアクティブ化します。

美しい HTML フォームの作成例

次に、サンプル Web フォームを紹介します。そのコードには、標準のテキストフィールドとボタンを形成するさまざまな値を持つ入力タイプの組み合わせだけでなく、たとえば、次のことに焦点を当て始めることができます。マウスを直接クリックするだけでなく、テキストをクリックすることによっても要素を追加できます。

独自のデザインを取得するために、個別のフォームコンポーネントが次のセットで配置されることに注意してください。

戻る (最大幅:350px; マージン:50px 自動 0; パディング:20px; 背景:#f3ebe1; font-family:"Oswald", sans-serif;) .form-1、.form-2、.form-3 、.form-4 (padding:15px; border:4px double #909090) .form-1、.form-2、.form-3 (border-bottom:none) .form-1 input (display:block; margin- Bottom:10px; width:100%).in (padding-left:40px) .in input (width:100%) ..png) no-repeat;background-position:10px 10px) ..png) no-repeat;背景位置:10px 10px) .form-4 input (表示:ブロック; 高さ:50px; フォントサイズ:24px; 幅:100%; カーソル:ポインタ)

その結果、このような Web フォームは次のような概要になります。

この特定のフォームの作成に関する詳細については、次の URL を参照してください。 このページ(ちなみに、そこではデータを入力して個々のテキスト領域の機能をテストできるだけでなく、HTML コードや CSS プロパティを編集して Web フォームの外観を完全または部分的に変更して実験することもできます)。

私の目標は、type 属性と form タグのさまざまな値を使用してサイト上にさまざまな HTML フォームを作成するためのアルゴリズムを紹介することでした。任務が完了することを願っています。いずれにせよ、この多様なトピックについてコメントであなたの考えを共有してください。

当然のことながら、今後の出版物でも引き続きハイパーテキストマークアップの主要なタグについて説明していきますので、電子メールでブログの更新を購読することを忘れないでください。また、これを強化するために、問い合わせフォームの作成に関する Evgeniy Popov による別のレッスンを見てください。

説明

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 サイト内を移動するとき、ユーザーはほとんどの場合、単にクリックするだけです。 リンク 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><b>サイト上の HTML フォームを定義する HTML タグ</b></p> <p><b>インターネット上でウェブサイトや個別ページを制作します。</b>訪問者とのコミュニケーションのため。</p> <p><b>HTMLフォーム</b>サイトへの訪問者を登録したり、インタラクティブなアンケートや投票を行ったり、メッセージの送信や購入などを行うために使用されます。 <b>HTML</b>このフォームは 1 つの目的のために作成されます。それは、ソフトウェアスクリプトまたは電子メールで処理するための情報を収集し、その後送信することです。</p> <i> </i><h2>HTML フォームの例 | サイトに入る</h2> <p>タグ、属性、値</p> <ul><li><form> </form>- 形状を決定します。</li> <li>name="" - フォームの名前を定義します。</li> <li>Method="" - フォームからデータを送信する方法を定義します。値: "get" (デフォルト) および "post" 。「ポスト」方式は、大量のデータを転送できるため、よく使用されます。</li> <li>action="" - データが処理のために送信される URL を定義します。私たちの場合 - enter_data.php ..</li> <li><input />- ボタン、スイッチ、データ入力用のテキストフィールドなどのフォーム要素を定義します。</li> <li>type="text" - データ入力用のテキストフィールドを定義します。</li> <li>type="password" - パスワードを入力するフィールドを定義します。テキストはアスタリスクまたは丸の形式で表示されます。</li> <li>type="checkbox" - ラジオボタンを定義します。</li> <li>type="hidden" - 追加情報をサーバーに転送するために使用される、非表示のフォーム要素を定義します。</li> <li>size="25" - テキストフィールドの文字数。</li> <li>maxlength="30" - 入力できる最大文字数。</li> <li>value="" - ラジオボタンまたはスイッチに関連する場合に、処理のために送信される値を定義します。テキストフィールドまたはボタンの一部としてのこの属性の値は、たとえば、上の例では Vasya または Login として表示されます。</li> </ul><h2>HTML フォームの例 | サイトへのコメント</h2> <table class="jsexam"><tr><td> <span> <title>HTMLフォームの例</title><br> </head><br> <body><br> <form action="http://сайт/comments.php" method="post" name="commentform" id="commentform"><br> <p><input type="text" name="author" id="author" value="" size="25" /><br> <small>名前</small><br></p><br> <p><input type="text" name="email" id="email" value="" size="25" /><br> <small>郵便</small><br></p><br> <p><textarea name="comment" id="comment" cols="48" rows="8">

タグ、属性、値

action="http://site/comments.php" - フォームからのデータの送信先となる URL を定義します。
id="" - フォーム要素の名前と識別子を定義します。
name="" - フォーム要素の名前を定義します。
- フォームの一部としてテキストフィールドを定義します。
Cols="" - フォームのテキストフィールドの列数を決定します。
rows="" - フォームのテキストフィールドの行数を定義します。

間の場合テキストを配置すると、簡単に削除できる例としてフィールド内に表示されます。

HTML フォームの例 | ドロップダウンリスト

HTMLフォーム

タグ、属性、値

- 選択する位置を含むリストを定義します。
size="" - 表示されるリストの位置の数を決定します。値が 1 の場合、ドロップダウンリストを扱います。
- リストの位置 (項目) を決定します。
value="" - 処理のためにフォームによって指定された URL に送信される値が含まれます。
selected="selected" - 例としてリスト項目を強調表示します。

HTML フォームの例 | スクロールバー付きリスト

size="" 属性の値を増やすと、スクロールバー付きのリストが表示されます。

HTMLフォーム

このオプションでは、multiple="multiple" フラグを使用します。これにより、複数の位置を選択できるようになります。これが存在しない場合は、項目を 1 つだけ選択できます。

type="submit" - ボタンを定義します。

type="reset" - リセットボタンを定義します。

value="" - ボタンのラベルを定義します。

さらに以下を参照してください。

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」が選択されています。ハンドラーには選択変数が渡され、その値はオプション 1 (デフォルト)、オプション 2、またはオプション 3 になります。</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> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast?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="data"> <div class="data__top clearfix"> <div class="data__print"> <a href='javascript:window.print(); void 0;'>シール</a> </div> </div> <div class="data__bottom clearfix"> <div class="data__share"> <script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script> <script src="//yastatic.net/share2/share.js"></script> <div class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,moimir,gplus,twitter,evernote,whatsapp,skype"></div> </div> </div> </div> <div class="navi"> <a href="https://comuedu.ru/ja/solutions/kakoi-teg-ispolzuetsya-dlya-sozdaniya-spiska-opredelenii-html-numerovannyi-i.html" class="navi__prev"></a>  <a href="https://comuedu.ru/ja/windows/chto-takoe-promokod-i-kak-on-rabotaet-kak-ispolzovat-promokody.html" class="navi__next"></a>  </div> </div> </div> <div class="news-blocks clearfix"> <div class="news-block"> <div class="papers"> <div class="papers__title">こちらも興味深い:</div> <div class="papers__items"> <style> </style> <div class="papers__item"> <div class="papers__img"> <a href="https://comuedu.ru/ja/different/zavis-kompyuter-vyklyuchaetsya-chto-delat-kompyuter-zavis-i-ne-vyklyuchaetsya-chto-delat-nevernaya-nastr.html"><img src="/uploads/47a8b0c63b5d7d41dae62f903c3445ed.jpg" style="width:70px; height:70px;" / loading=lazy loading=lazy></a> </div> <div class="papers__ovh"> <div class="papers__name"> <a href="https://comuedu.ru/ja/different/zavis-kompyuter-vyklyuchaetsya-chto-delat-kompyuter-zavis-i-ne-vyklyuchaetsya-chto-delat-nevernaya-nastr.html">パソコンがフリーズして電源が切れない！</a> </div> <div class="papers__category"> </div> </div> </div> <div class="papers__item"> <div class="papers__img"> <a href="https://comuedu.ru/ja/modems/nabor-form-html-html-formy-mnogostrochnoe-tekstovoe-pole--.html"><img src="/uploads/1b9deb911f7578d1d24d1e331a9c77b0.jpg" style="width:70px; height:70px;" / loading=lazy loading=lazy></a> </div> <div class="papers__ovh"> <div class="papers__name"> <a href="https://comuedu.ru/ja/modems/nabor-form-html-html-formy-mnogostrochnoe-tekstovoe-pole--.html">フォームHTMLのセット。 HTML フォーム。複数行のテキストフィールド - タグ</a> </div> <div class="papers__category"> </div> </div> </div> <div class="papers__item"> <div class="papers__img"> <a href="https://comuedu.ru/ja/network/kak-otsledit-iphone-sposoby-i-sekrety-poisk-aifona-po-geolokacii-cherez.html"><img src="/uploads/5ba9fc4720f22a8cffa65ea0124c7f62.jpg" style="width:70px; height:70px;" / loading=lazy loading=lazy></a> </div> <div class="papers__ovh"> <div class="papers__name"> <a href="https://comuedu.ru/ja/network/kak-otsledit-iphone-sposoby-i-sekrety-poisk-aifona-po-geolokacii-cherez.html">アプリケーション、EMEI、または特別なプログラムを使用してコンピュータ経由で地理位置情報に基づいて iPhone を検索するプログラムを使用して iPhone を見つける方法</a> </div> <div class="papers__category"> </div> </div> </div> </div> </div> </div> <div class="news-block"> <div class="papers"> <div class="papers__title">以下を読むことをお勧めします。</div> <div class="papers__items"> <div class="papers__item"> <div class="papers__img"> <a href="https://comuedu.ru/ja/android/lg-l9-proshivka-sposoby-razblokirovki-zagruzchika-lg-optimus-l9.html"> <img width="50" height="50" src="/uploads/a6f2668d462935c90eca1f95be2c93c4.jpg" class="attachment-50 size-50 wp-post-image" alt="LG Optimus L9 ブートローダーのロックを解除する方法" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a> </div> <div class="papers__ovh"> <div class="papers__date">2024-02-12 00:09:57</div> <div class="papers__name"> <a href="https://comuedu.ru/ja/android/lg-l9-proshivka-sposoby-razblokirovki-zagruzchika-lg-optimus-l9.html">LG Optimus L9 ブートローダーのロックを解除する方法</a> </div> </div> </div> <div class="papers__item"> <div class="papers__img"> <a href="https://comuedu.ru/ja/operating-systems/adb-devices-ne-vidit-esli-ddms-ne-vidit-adb-devices-v-eclipse-chto-delat.html"> <img width="50" height="50" src="/uploads/f0fe4f4dabdcbe2f5385bb26f5892ded.jpg" class="attachment-50 size-50 wp-post-image" alt="DDMS が Eclipse で adb デバイスを認識しない場合" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a> </div> <div class="papers__ovh"> <div class="papers__date">2024-02-12 00:09:57</div> <div class="papers__name"> <a href="https://comuedu.ru/ja/operating-systems/adb-devices-ne-vidit-esli-ddms-ne-vidit-adb-devices-v-eclipse-chto-delat.html">DDMS が Eclipse で adb デバイスを認識しない場合</a> </div> </div> </div> <div class="papers__item"> <div class="papers__img"> <a href="https://comuedu.ru/ja/android/skachat-rasshirenie-yandeks-dlya-gugl-hrom-rasshireniya-dlya-yandeks-brauzera.html"> <img width="50" height="50" src="/uploads/f0263e6ce1e6116bcd0c2a00fd22e721.jpg" class="attachment-50 size-50 wp-post-image" alt="Google Chrome 用の Yandex 拡張機能をダウンロード" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a> </div> <div class="papers__ovh"> <div class="papers__date">2024-02-11 00:06:50</div> <div class="papers__name"> <a href="https://comuedu.ru/ja/android/skachat-rasshirenie-yandeks-dlya-gugl-hrom-rasshireniya-dlya-yandeks-brauzera.html">Google Chrome 用の Yandex 拡張機能をダウンロード</a> </div> </div> </div> </div> </div> </div> </div> <div class="rate clearfix"> <div class="papers__title">トピックの続き:</div> </div> <div class="rate clearfix"> <div class="rate__img"> <a href="https://comuedu.ru/ja/modems/kak-proshit-kastomnoi-proshivkoi-sony-xperia-p-pereproshivaem-sony-xperia-s-pomoshchyu.html"> <img width="150" height="150" src="/uploads/e149928eac5d2cbd8430b0a446131638.jpg" class="attachment-alm-thumbnail size-alm-thumbnail wp-post-image" alt="Flashtoolを使用してSony Xperiaをフラッシュする" sizes="(max-width: 150px) 100vw, 150px" / loading=lazy loading=lazy> </a> </div> <div class="rate__ovh"> <div class="rate__label"> <span>モデム</span> </div> <div class="rate__name"> <a href="https://comuedu.ru/ja/modems/kak-proshit-kastomnoi-proshivkoi-sony-xperia-p-pereproshivaem-sony-xperia-s-pomoshchyu.html">Flashtoolを使用してSony Xperiaをフラッシュする</a> </div> <div class="rate__description"> <p>Sony Xperia Pは、Android 2.3を搭載した日本のブランドのスマートフォンです。ここでは、ファームウェアの検索、設定のリセット、手順、および入手方法に関する情報も提供しています。</p> </div> </div> </div>  </div> <div class="button-menu"></div> <div class="page__right"> <div class="menu"> <div class="menu__exit">×</div> <ul> <li><a href="https://comuedu.ru/ja/category/wi-fi/" class="link-catalog">Wi-Fi</a> </li> <li><a href="https://comuedu.ru/ja/category/linux/" class="link-catalog">Linux</a> </li> <li><a href="https://comuedu.ru/ja/category/windows/" class="link-catalog">ウィンドウズ</a> </li> <li><a href="https://comuedu.ru/ja/category/different/" class="link-catalog">その他</a> </li> <li><a href="https://comuedu.ru/ja/category/network/" class="link-catalog">ネットワーク</a> </li> <li><a href="https://comuedu.ru/ja/category/smart-tv/" class="link-catalog">スマートテレビ</a> </li> <li><a href="https://comuedu.ru/ja/category/solutions/" class="link-catalog">ソリューション</a> </li> <li><a href="https://comuedu.ru/ja/category/android/" class="link-catalog">アンドロイド</a> </li> </ul> </div> <div id="husevi1" style="height:400px;width:290px;" align="center"></div> <div class="page__hidden-mobile"> <div class="papers"> <div class="papers__tabs"> <div class="active" data-eq="0">新しい記事</div> <span>/</span> <div data-eq="1">人気のある</div> </div> <div class="papers__blocks"> <div class="papers__block active"> <div class="papers__items"> <div class="papers__item"> <div class="papers__img"> <a href="https://comuedu.ru/ja/internet/novogodnii-million-bilain-kupi-telefon-vyigrai-million-akciya-ot.html"> <img width="50" height="50" src="/uploads/04932c51bfe08e9fdcfb781eeffe2e8e.jpg" class="attachment-50 size-50 wp-post-image" alt="ビーラインからのプロモーション『新春ミリオン！" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a> </div> <div class="papers__ovh"> <div class="papers__date">2024-02-11 00:06:50</div> <div class="papers__name"> <a href="https://comuedu.ru/ja/internet/novogodnii-million-bilain-kupi-telefon-vyigrai-million-akciya-ot.html">ビーラインからのプロモーション『新春ミリオン！</a> </div> <div class="papers__category"> <a href="https://comuedu.ru/ja/category/internet/">インターネット</a> </div> </div> </div> <div class="papers__item"> <div class="papers__img"> <a href="https://comuedu.ru/ja/computer/kakaya-antenna-dlya-interneta-ot-iota-luchshe-delaem-vneshnyuyu.html"> <img width="50" height="50" src="/uploads/dd132e75729aec098e23a064d5cef1f9.jpg" class="attachment-50 size-50 wp-post-image" alt="Yota信号を強化するための外部アンテナを自分の手で作る 3g yota用の自作アンテナ" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a> </div> <div class="papers__ovh"> <div class="papers__date">2024-02-11 00:06:50</div> <div class="papers__name"> <a href="https://comuedu.ru/ja/computer/kakaya-antenna-dlya-interneta-ot-iota-luchshe-delaem-vneshnyuyu.html">Yota信号を強化するための外部アンテナを自分の手で作る 3g yota用の自作アンテナ</a> </div> <div class="papers__category"> <a href="https://comuedu.ru/ja/category/computer/">コンピューター</a> </div> </div> </div> <div class="papers__item"> <div class="papers__img"> <a href="https://comuedu.ru/ja/android/kak-vosstanovit-akkaunt-gugl-na-androide-esli-zabyl-parol-kak.html"> <img width="50" height="50" src="/uploads/cdb8356d55d23e54b94048e54f1a9681.jpg" class="attachment-50 size-50 wp-post-image" alt="Google アカウントを回復する方法 (Google) - 完全な手順" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a> </div> <div class="papers__ovh"> <div class="papers__date">2024-02-10 00:09:22</div> <div class="papers__name"> <a href="https://comuedu.ru/ja/android/kak-vosstanovit-akkaunt-gugl-na-androide-esli-zabyl-parol-kak.html">Google アカウントを回復する方法 (Google) - 完全な手順</a> </div> <div class="papers__category"> <a href="https://comuedu.ru/ja/category/android/">アンドロイド</a> </div> </div> </div> <div class="papers__item"> <div class="papers__img"> <a href="https://comuedu.ru/ja/apple/kak-vosstanovit-vse-fotografii-na-kompyutere-mozhno-li.html"> <img width="50" height="50" src="/uploads/520825e53e5658bab3098fc7bb764887.jpg" class="attachment-50 size-50 wp-post-image" alt="削除した写真を復元することは可能ですか?" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a> </div> <div class="papers__ovh"> <div class="papers__date">2024-02-10 00:09:22</div> <div class="papers__name"> <a href="https://comuedu.ru/ja/apple/kak-vosstanovit-vse-fotografii-na-kompyutere-mozhno-li.html">削除した写真を復元することは可能ですか?</a> </div> <div class="papers__category"> <a href="https://comuedu.ru/ja/category/apple/">りんご</a> </div> </div> </div> <div class="papers__item"> <div class="papers__img"> <a href="https://comuedu.ru/ja/computer/narisovat-sebe-avatarku-kak-sdelat-avatarku-dlya-gruppy.html"> <img width="50" height="50" src="/uploads/38f3edbcca49643308b2c6a9833215e8.jpg" class="attachment-50 size-50 wp-post-image" alt="VKontakte グループのアバターを作成するにはどうすればよいですか?" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a> </div> <div class="papers__ovh"> <div class="papers__date">2024-02-10 00:09:22</div> <div class="papers__name"> <a href="https://comuedu.ru/ja/computer/narisovat-sebe-avatarku-kak-sdelat-avatarku-dlya-gruppy.html">VKontakte グループのアバターを作成するにはどうすればよいですか?</a> </div> <div class="papers__category"> <a href="https://comuedu.ru/ja/category/computer/">コンピューター</a> </div> </div> </div> <div class="papers__item"> <div class="papers__img"> <a href="https://comuedu.ru/ja/modems/perekodirovka-pulta-dlya-shlagbauma-kak-zaprogrammirovat-pult-ot.html"> <img width="50" height="50" src="/uploads/c9e93d7c8fe8c0646d6cfeec57f543b2.jpg" class="attachment-50 size-50 wp-post-image" alt="ゲートリモコンのプログラム方法" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a> </div> <div class="papers__ovh"> <div class="papers__date">2024-02-10 00:09:22</div> <div class="papers__name"> <a href="https://comuedu.ru/ja/modems/perekodirovka-pulta-dlya-shlagbauma-kak-zaprogrammirovat-pult-ot.html">ゲートリモコンのプログラム方法</a> </div> <div class="papers__category"> <a href="https://comuedu.ru/ja/category/modems/">モデム</a> </div> </div> </div> </div> </div> <div class="papers__block"> <div class="papers__items"> <div class="papers__item"> <div class="papers__img"><a href="https://comuedu.ru/ja/operating-systems/kak-perenesti-sistemu-na-novyi-disk-perenos-sistemy-na-drugoi.html"> <img width="50" height="50" src="/uploads/814fae98f39e5c932bd32e78a073a9b8.jpg" class="attachment-50x50 size-50x50 wp-post-image" alt="システムを別のまたは新しいハードドライブに転送する" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a></div> <div class="papers__ovh"> <div class="papers__name"> <a href="https://comuedu.ru/ja/operating-systems/kak-perenesti-sistemu-na-novyi-disk-perenos-sistemy-na-drugoi.html">システムを別のまたは新しいハードドライブに転送する</a> </div> <div class="papers__category"><a href="https://comuedu.ru/ja/category/operating-systems/" rel="tag">OS</a></div> </div> </div> <div class="papers__item"> <div class="papers__img"><a href="https://comuedu.ru/ja/internet/kak-rabotat-v-ehele-sozdanie-formul-v-excel-ispolzovanie-teksta-v.html"> <img width="50" height="50" src="/uploads/4a4d0a6e568856d8bdd138d76af988ed.jpg" class="attachment-50x50 size-50x50 wp-post-image" alt="Excel での作業方法。 Excelで数式を作成します。数式でのテキストの使用" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a></div> <div class="papers__ovh"> <div class="papers__name"> <a href="https://comuedu.ru/ja/internet/kak-rabotat-v-ehele-sozdanie-formul-v-excel-ispolzovanie-teksta-v.html">Excel での作業方法。 Excelで数式を作成します。数式でのテキストの使用</a> </div> <div class="papers__category"><a href="https://comuedu.ru/ja/category/internet/" rel="tag">インターネット</a></div> </div> </div> <div class="papers__item"> <div class="papers__img"><a href="https://comuedu.ru/ja/windows/osobennosti-plagina-savefrom-net-dlya-yandex-obozrevatelya-pochemu-ne.html"> <img width="50" height="50" src="/uploads/ee92051e0a9939d97de495d81bdc2bfe.jpg" class="attachment-50x50 size-50x50 wp-post-image" alt="ワンキーを使用して YouTube からビデオをダウンロードする方法 Savefrom 公式" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a></div> <div class="papers__ovh"> <div class="papers__name"> <a href="https://comuedu.ru/ja/windows/osobennosti-plagina-savefrom-net-dlya-yandex-obozrevatelya-pochemu-ne.html">ワンキーを使用して YouTube からビデオをダウンロードする方法 Savefrom 公式</a> </div> <div class="papers__category"><a href="https://comuedu.ru/ja/category/windows/" rel="tag">ウィンドウズ</a></div> </div> </div> <div class="papers__item"> <div class="papers__img"><a href="https://comuedu.ru/ja/computer/stoit-li-udalyat-zashchitnik-windows-10-kak-polnostyu-otklyuchit-zashchitnik.html"> <img width="50" height="50" src="/uploads/d1578f551a01fcae7a7d695c6b12c017.jpg" class="attachment-50x50 size-50x50 wp-post-image" alt="Windows Defender (Microsoft Defender) を完全に無効にする方法" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a></div> <div class="papers__ovh"> <div class="papers__name"> <a href="https://comuedu.ru/ja/computer/stoit-li-udalyat-zashchitnik-windows-10-kak-polnostyu-otklyuchit-zashchitnik.html">Windows Defender (Microsoft Defender) を完全に無効にする方法</a> </div> <div class="papers__category"><a href="https://comuedu.ru/ja/category/computer/" rel="tag">コンピューター</a></div> </div> </div> <div class="papers__item"> <div class="papers__img"><a href="https://comuedu.ru/ja/wi-fi/krasivye-znachki-na-rabochii-stol-gde-skachat-ikonki-dlya-papok-i-kak-ih.html"> <img width="50" height="50" src="/uploads/dbf75d872069880ad883f776070eb592.jpg" class="attachment-50x50 size-50x50 wp-post-image" alt="フォルダーのアイコンをダウンロードする場所とインストール方法" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a></div> <div class="papers__ovh"> <div class="papers__name"> <a href="https://comuedu.ru/ja/wi-fi/krasivye-znachki-na-rabochii-stol-gde-skachat-ikonki-dlya-papok-i-kak-ih.html">フォルダーのアイコンをダウンロードする場所とインストール方法</a> </div> <div class="papers__category"><a href="https://comuedu.ru/ja/category/wi-fi/" rel="tag">Wi-Fi</a></div> </div> </div> <div class="papers__item"> <div class="papers__img"><a href="https://comuedu.ru/ja/solutions/kakoi-teg-ispolzuetsya-dlya-sozdaniya-spiska-opredelenii-html-numerovannyi-i.html"> <img width="50" height="50" src="/uploads/8361afa2938822c4cbec12cc776b53d6.jpg" class="attachment-50x50 size-50x50 wp-post-image" alt="HTML: 番号付き箇条書きリスト" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a></div> <div class="papers__ovh"> <div class="papers__name"> <a href="https://comuedu.ru/ja/solutions/kakoi-teg-ispolzuetsya-dlya-sozdaniya-spiska-opredelenii-html-numerovannyi-i.html">HTML: 番号付き箇条書きリスト</a> </div> <div class="papers__category"><a href="https://comuedu.ru/ja/category/solutions/" rel="tag">ソリューション</a></div> </div> </div> </div> </div> </div> </div> <div class="comments"> <div id="husevi2" class="husevi-sticky" style="height:500px;width:254px;" align="center"></div> </div> </div> </div> </div> </div> </div> <div class="footer"> <div class="footer__top"> <div class="cnt"> <div class="footer__nav"> <ul> <li><a href="https://comuedu.ru/ja/feedback.html">連絡先</a></li> <li><a href="">広告</a></li> <li><a href="">サイトについて</a></li> </ul> </div> <div class="footer__counter"> </div> <div class="footer__logo1" align="right"> <img style="max-height:60px;" src="/assets/logo.png" alt="" loading=lazy loading=lazy> </div> </div> </div> <div class="footer__bottom"> <div class="cnt"> <div class="footer__copyright">© comuedu.ru 2024 コンピューター技術に関するウェブサイト</div> </div> </div> </div> <a href="#top" class="up"></a> </div> <script src="https://comuedu.ru/wp-content/themes/tehnika-expert/js/jquery-1.12.0.js"></script> <script src="https://comuedu.ru/wp-content/themes/tehnika-expert/js/owl.carousel.min.js"></script> <script src="https://comuedu.ru/wp-content/themes/tehnika-expert/js/mousewheel.js"></script> <script src="https://comuedu.ru/wp-content/themes/tehnika-expert/js/jscrollpane.min.js"></script> <script src="https://comuedu.ru/wp-content/themes/tehnika-expert/js/scripts.js?v=8"></script>  <script type='text/javascript' src='https://comuedu.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='https://comuedu.ru/wp-content/plugins/wp-ajaxify-comments/js/wp-ajaxify-comments.min.js?ver=1.5.0'></script> <script type='text/javascript' src='https://comuedu.ru/wp-content/plugins/wp-polls/polls-js.js?ver=2.73.8'></script> <script type='text/javascript' src='https://comuedu.ru/wp-content/plugins/wp-postratings/js/postratings-js.js?ver=1.85'></script> <script type='text/javascript' src='https://comuedu.ru/wp-content/plugins/wp_testme/js/testme.js?ver=1.1'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.9'></script> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "sidebar-2", "margin_top" : 10, "margin_bottom" : 112, "stop_id" : "", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['cb_widget-2'] } ; </script> <script type='text/javascript' src='https://comuedu.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9'></script> </body> </html>

フォームHTMLのセット。 HTML フォーム。 複数行のテキストフィールド - タグ