コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > domdocumentを使用してPHPでフォームを構築します

domdocumentを使用してPHPでフォームを構築します

Christopher Nolan
リリース： 2025-03-20 11:01:12
オリジナル
953 人が閲覧しました

domdocumentを使用してPHPでフォームを構築します

ネットワークを機能させるためのテンプレート。データと構造の合成コンテンツ。開発者にとって、これは私たちの最もクールな超大国です。いくつかのデータを取得し、それを私たちのために機能させ、必要な形でそれをレンダリングします。オブジェクトの配列は、テーブル、カードのリスト、チャート、またはユーザーにとって最も便利だと思うものに変えることができます。データが独自のマークダウンファイルのブログ投稿であろうと最新のグローバル為替レートであろうと、マークアップと最終的なユーザーエクスペリエンスは、フロントエンド開発者次第です。

PHPは、データをタグとマージする多くの方法を提供するテンプレートの強力な言語です。データを使用してHTMLフォームを構築する例を見てみましょう。

今すぐ始めたいですか？実装セクションにジャンプします。

PHPでは、二重引用符を使用して変数を文字列リテラルにインライン化できます。そのため、変数$name = 'world'がある場合はecho "Hello, {$name}"を書くことができます。より複雑なテンプレートについては、たとえばecho "Hello, " . $name . "."です。

古いプログラマーには、 printf("Hello, %s", $name)もあります。マルチライン文字列の場合、Heredocを使用できます（ Hello, = $name ?> ）。これらのオプションはすべて素晴らしいですが、多くのインラインロジックが必要な場合、物事は乱雑になる可能性があります。 FormsやNavigationなどの複合HTML文字列を構築する必要がある場合、HTML要素を互いにネストできるため、複雑さは無限である可能性があります。

私たちが避けようとしていること

やりたいことをやり続ける前に、やりたくないことを考えるのはちょっと価値があります。 WordPress Core Code class-walker-nav-menu.phpの170〜270行目からの抜粋を考えてみましょう。

  ';
// ...
$ item_output = $ args-> before;
$ item_output。= ' <a .="">';
$ item_output。
$ item_output。= '</a> ';
$ item_output。= $ args-> after;
// ...
$ output。= apply_filters（ 'walker_nav_menu_start_el'、$ item_output、$ item、$ depth、$ args）;
// ...
$ output。= "{$ n}";
ログイン後にコピー

ナビゲーションを構築するには、この関数では、非常に長い文字列である変数$outputを使用し、コンテンツを追加し続けます。このタイプのコードには、非常に具体的で限られた操作順序があります。したいなら<a></a>実行する前に$attributesにアクセスする必要があるプロパティを追加します。したいなら<a></a>オプションで1つをネストします<span></span>またはa<img alt="domdocumentを使用してPHPでフォームを構築します" > 、新しいコードブロックを作成する必要があります。これは、追加したいものに応じて、7行目の中央部分を約4〜10本の新しいコードに置き換えます。ここで、オプションで追加する必要があると想像してください<span></span>、オプションで追加します<img alt="domdocumentを使用してPHPでフォームを構築します" >、またはで<span></span>内部または後で追加します。これ自体は3つのIFステートメントであり、コードの読み取りが難しくなります。このような文字列を連結すると、ストリングパスタで簡単に終わることができます。

問題の本質は、HTML要素を推測しようとするとき、文字列について考えていないということです。ブラウザは文字列を消費するだけで、PHPは文字列を出力します。しかし、私たちのメンタルモデルはDOMのようなものです。エレメントは木のような構造に配置されており、各ノードには多くの潜在的な特性、特性、子ノードがあります。

木を構築するための構造化された非常に表現力のある方法があれば、それは素晴らしいことではないでしょうか？

入力……

domdocumentクラス

PHP 5は、DOMモジュールを非厳密に型付けされたラインナップに追加します。その主なエントリポイントは、Web APIのJavaScript Domに似ていることを目的としたDomdocumentクラスです。 document.createElementを使用したことがある場合、または私たちの年齢の一部にjqueryの$('こんにちは！

'）構文、非常に馴染みがあるかもしれません。最初に新しいdomdocumentを初期化します：
 $ dom = new domdocument（）;
ログイン後にコピー

これでドメレメントを追加できます。

 $ p = $ dom-> createElement（ 'p'）;
ログイン後にコピー

文字列「p」は、必要な要素タイプを表しているため、他の有効な文字列は「div」、「img」などです。

要素が得られたら、そのプロパティを設定できます。

 $ p-> setattribute（ 'class'、 'headline'）;
ログイン後にコピー

子ノードを追加できます。

 $ span = $ dom-> createElement（ 'span'、 'これは見出しです'）;
$ p-> appendChild（$ span）;
ログイン後にコピー

最後に、完全なHTML文字列を一度に取得します。

 $ dom-> appendChild（$ p）;
$ htmlstring = $ dom-> savehtml（）;
echo $ htmlstring;
ログイン後にコピー

このコーディングスタイルにより、コードはメンタルモデルに従って編成されます。要素には、互いに互いにネストできます。 「HTMLは文字列です」部分は、構造が整ったら最後に表示されます。 「ドキュメント」は、ドキュメント全体を表す必要はなく、HTMLブロックにすぎないため、実際のDOMとはわずかに異なります。実際、2つの類似した要素を作成する必要がある場合は、 saveHTML()を使用してHTML文字列を保存し、dom "document"をさらに変更し、 saveHTML()を再度呼び出して新しいHTML文字列を保存できます。

データを取得し、構造を設定します

CRMプロバイダーと独自のタグからのデータを使用して、サーバー上にフォームを構築する必要があるとします。 CRMからのAPI応答は次のようになります：

 {
  「submit_button_label」：「今すぐ送信！」、
  「フィールド」：[
    {
      「ID」：「ファーストネーム」、
      「タイプ」：「テキスト」、
      「ラベル」：「名」、
      「必須」：本当、
      「validation_message」：「名が必要です。」、
      「max_length」：30
    }、
    {
      「ID」：「カテゴリ」、
      「タイプ」：「multiple_choice」、
      「ラベル」：「適用されるすべてのカテゴリを選択」、
      「必須」：偽、
      「field_metadata」：{
        「multi_select」：本当、
        「価値」：[
          {"Value"： "Travel"、 "Label"： "Travel"}、
          {"Value"： "Marketing"、 "Label"： "Marketing"}
        ]
      }
    }
  ]
}
ログイン後にコピー

この例は、特定のCRMの正確なデータ構造を使用していませんが、非常に代表的です。

そして、私たちのタグを次のようにしたいとします：

<label>
  <input type="text" placeholder=" " id="first-name" required maxlength="30">
  ファーストネーム
  <em>名が必要です。</em>
</label>
<label>
  </label>
    <div>
      <input type="checkbox" value="travel" id="category-travel" name="category">
      <label for="category-travel">旅行</label>
    </div>
    <div>
      <input type="checkbox" value="marketing" id="category-marketing" name="category">
      <label for="category-marketing">マーケティング</label>
    </div>
  
  適用されるすべてのカテゴリを選択します
ログイン後にコピー

プレースホルダーとは何ですか？これは、JavaScriptを使用せずにCSSでフィールドが空であるかどうかを追跡できる小さなトリックです。入力が空である限り、それはinput:placeholder-shownですが、ユーザーは目に見えるプレースホルダーテキストが表示されません。これは、マークアップを制御するときにできることです！

私たちが達成したいことがわかったので、ここにゲームプランがあります。

  1. APIからフィールド定義やその他のコンテンツを取得します
  2. domdocumentを初期化します
  3. フィールドを繰り返し、必要に応じて各フィールドを構築します
  4. HTML出力を取得します

それでは、プロセスを構築し、いくつかの技術的な問題を解決しましょう。

  fields;

  // domの構築を開始します
  $ dom = new domdocument（）;
  $ form = $ dom-> createElement（ 'form'）;

  //フィールドを繰り返して、各フィールドを構築します（$ formfieldsとして$ field）{
    // TODO：フィールドデータでいくつかの操作を実行する}

  // html出力$ dom-> appendChild（$ form）を取得します。
  $ htmlstring = $ dom-> savehtml（）;
  echo $ htmlstring;
}
ログイン後にコピー

これまでのところ、データを取得して解析し、Domdocumentを初期化し、その出力をエコーし​​ました。各フィールドで何をしたいですか？まず、私たちの例では、コンテナ要素を構築しましょう。<label></label> 、およびすべてのフィールドタイプに共通するタグ：

 container```を作成します<label>
  $ element = $ dom-> createElement（ 'label'）;
  $ element-> setAttribute（ 'class'、 'field'）;

  //入力値をリセット$ label = null;

  //タグが設定されている場合は、 `` <span>`</span>を追加します<span>
  if（$ field-> label）{
    $ label = $ dom-> createElement（ 'span'、$ field-> label）;
    $ label-> setAttribute（ 'class'、 'label'）;
  }

  //タグを `` <label>`</label>に追加します<label>
  if（$ label）$ element-> appendChild（$ label）;
}</label></span></label><p>私たちはループにあり、PHPはループ内の変数をスコープしないため、各反復で<code>$label</code>要素をリセットします。次に、フィールドにラベルがある場合、要素を構築します。最後に、コンテナ要素に追加します。</p><p> <code>setAttribute</code>メソッドを使用してクラスを設定してください。残念ながら、Web APIとは異なり、クラスリストの特別な扱いはありません。それらは単なる別の属性です。 PHP™であるため、非常に複雑なクラスロジック<code>$label->setAttribute('class', implode($labelClassList))</code>ある場合、配列を作成してインラインできます。</p><h3>単一の入力</h3><p>APIは特定のフィールドタイプのみを返すことがわかっているため、各タイプのタイプを切り替えて特定のコードを記述できます。</p><pre class="brush:php;toolbar:false"> container```を作成します<label>
  $ element = $ dom-> createElement（ 'label'）;
  $ element-> setAttribute（ 'class'、 'field'）;

  //入力値をリセット$ input = null;
  $ label = null;

  //タグが設定されている場合は、 `` <span>`</span>を追加します<span>
  // ...

  //入力要素スイッチをビルド（$ field-> type）{
    ケース「テキスト」：
    ケース「電子メール」：
    ケース「電話」：
      $ input = $ dom-> createElement（ 'input'）;
      $ input-> setAttribute（ 'Placeholder'、 ''）;
      if（$ field-> type === 'email'）$ input-> setAttribute（ 'type'、 'email'）;
      if（$ field-> type === '電話'）$ input-> setAttribute（ 'type'、 'tel'）;
      壊す;
  }
}</span></label><p>次に、テキスト領域、単一のチェックボックス、および非表示フィールドに対処しましょう。</p><pre class="brush:php;toolbar:false"> container```を作成します<label>
  $ element = $ dom-> createElement（ 'label'）;
  $ element-> setAttribute（ 'class'、 'field'）;

  //入力値をリセット$ input = null;
  $ label = null;

  //タグが設定されている場合は、 `` <span>`</span>を追加します<span>
  // ...

  //入力要素スイッチをビルド（$ field-> type）{
    // ...
    ケース 'text_area'：
      $ input = $ dom-> createElement（ 'textarea'）;
      $ input-> setAttribute（ 'Placeholder'、 ''）;
      if（$ rows = $ field-> field_metadata-> rows）$ input-> setattribute（ 'rows'、$ rows）;
      壊す;

    ケース「チェックボックス」：
      $ element-> setAttribute（ 'class'、 'フィールドシングルチェックボックス'）;
      $ input = $ dom-> createElement（ 'input'）;
      $ input-> setAttribute（ 'type'、 'チェックボックス'）;
      if（$ field-> field_metadata-> itally_checked === true）$ input-> setAttribute（ 'checked'、 'checked'）;
      壊す;

    ケース「隠された」：
      $ input = $ dom-> createElement（ 'input'）;
      $ input-> setAttribute（ 'type'、 'hidden'）;
      $ input-> setAttribute（ 'value'、$ field-> field_metadata-> value）;
      $ element-> setAttribute（ 'hidden'、 'hidden'）;
      $ element-> setAttribute（ 'style'、 'display：none;'）;
      $ label-> textContent = '';
      壊す;
  }
}</span></label><p>チェックボックスと隠された状況で行ったいくつかの新しいアクションに注目してください。作成しただけではありません<code><input></code><em>要素</em><code><label></label></code>要素！単一のチェックボックスフィールドの場合、チェックボックスとラベルを水平に整列できるように、コンテナのクラスを変更する必要があります。<code><label></label></code>コンテナも完全に隠されている必要があります。</p><p>ここで、文字列を接続するだけで、この時点で変更することはできません。ブロックの上部にある要素タイプとそのメタデータに関するIFステートメントの束を追加する必要があります。または、おそらくさらに悪いことに、私たちは以前に切り替えを開始し、各ブランチ間で多くのパブリックコードをコピーします。</p><p>そして、それはdomdocumentのようなビルダーを使用することの本当の利点です - すべてがまだ編集可能であり、 <code>saveHTML()</code>クリックするまですべてがまだ構成されています。</p><h3>ネストされたループ要素</h3><p>追加しましょう<code><select></select></code>要素の論理：</p><pre class="brush:php;toolbar:false"> container```を作成します<label>
  $ element = $ dom-> createElement（ 'label'）;
  $ element-> setAttribute（ 'class'、 'field'）;

  //入力値をリセット$ input = null;
  $ label = null;

  //タグが設定されている場合は、 `` <span>`</span>を追加します<span>
  // ...

  //入力要素スイッチをビルド（$ field-> type）{
    // ...
    ケース「選択」：
      $ element-> setAttribute（ 'class'、 'field select'）;
      $ input = $ dom-> createElement（ 'select'）;
      $ input-> setAttribute（ 'required'、 'reby'）;
      if（$ field-> field_metadata-> multi_select === true）
        $ input-> setAttribute（ 'multiple'、 'multiple'）;

      $ options = [];

      //事前に選択されたオプションがあるかどうかを追跡します$ optionSelected = false;

      foreach（$ field-> field_metadata-> values as $ value）{
        $ option = $ dom-> createElement（ 'option'、htmlspecialchars（$ value-> label））;

        //値がない場合は、（！$ value-> value）継続する場合はスキップします。

        //事前に選択されたオプションを設定するif（$ value-> selected === true）{
          $ option-> setAttribute（ 'selected'、 'selected'）;
          $ optionSelected = true;
        }
        $ option-> setAttribute（ 'value'、$ value-> value）;
        $ options [] = $ option;
      }

      //事前に選択されたオプションがない場合は、空のプレースホルダーオプションを作成する場合（$ optionselected === false）{
        $ emptyoption = $ dom-> createElement（ 'option'）;

        // $属性として非表示、無効、およびforeach（['hidden'、 'disabled'、 'selected']を選択するオプションを設定します）
          $ emptyoption-> setAttribute（$ aTtribute、$ aTtribute）;
        $ input-> appendChild（$ emptyoption）;
      }

      //配列内のオプションを ` <select>`</select>に追加します<select>
      foreach（$ options as $ option）{
        $ input-> appendChild（$ option）;
      }
      壊す;
  }
}</select></span></label><p>わかりました、ここにはやることがたくさんありますが、根底にあるロジックは同じです。外部設定<code><label></label></code>その後、aを作成します<code><option></option></code>配列、それに加えてください。</p><p>ここでもいくつかやった<code><select></select></code>特別なトリック：事前選択オプションがない場合は、すでに選択されている空のプレースホルダーオプションを追加しますが、ユーザーはそれを選択できません。目標は、CSSを使用して転送することです<code><label></label></code>「プレースホルダー」としてですが、このテクノロジーはさまざまな設計で使用できます。他のオプションを追加する前に<code>$input</code>に追加することにより、タグの最初のオプションであることを確認します。</p><p>今それに対処しましょう<code><fieldset></fieldset></code>ラジオボタンとチェックボックス：</p><pre class="brush:php;toolbar:false"> container```を作成します<label>
  $ element = $ dom-> createElement（ 'label'）;
  $ element-> setAttribute（ 'class'、 'field'）;

  //入力値をリセット$ input = null;
  $ label = null;

  //タグが設定されている場合は、 `` <span>`</span>を追加します<span>
  // ...

  //入力要素スイッチをビルド（$ field-> type）{
    // ...
    ケース 'multiple_choice'：
      $ choiCeType = $ field-> field_metadata-> multi_select === 'Checkbox'： 'Radio';
      $ element-> setAttribute（ 'class'、 "field {$ choiceType} -group"）;
      $ input = $ dom-> createElement（ 'fieldset'）;

      // fieldsetの各オプションの選択を作成する ``</span></label>
      foreach（$ field-> field_metadata->値として$ choicevalue）{
        $ ChoiceField = $ dom-> createElement（ 'div'）;
        $ Choicefield-> setAttribute（ 'class'、 'C​​hoice'）;

        //フィールドIDを使用してIDを選択して一意のIDを設定します
        $ ChoiceId = "{$ field-> id}  -  {$ ChoiceValue-> value}";

        // build`<input> `要素$ choice = $ dom-> createElement（ 'input'）;
        $ choice-> setAttribute（ 'type'、$ choiceType）;
        $ choice-> setAttribute（ 'value'、$ choicevalue-> value）;
        $ choice-> setAttribute（ 'id'、$ choceid）;
        $ choice-> setAttribute（ 'name'、$ field-> id）;
        $ ChoiceField-> AppendChild（$ choice）;

        // ` <label>` `要素$ choicelabel = $ dom-> createElement（ 'label'、$ choicevalue-> label）;
        $ Choicelabel-> setAttribute（ 'for'、$ ChoiceID）;
        $ ChoiceField-> AppendChild（$ Choicelabel）;

        $ input-> appendChild（$ ChoiceField）;
      }
      壊す;
  }
}</label><p>したがって、最初に、フィールドセットがチェックボックスまたはラジオボタンであるかどうかを判断します。次に、コンテナクラスをそれに応じて設定して構築します<code><fieldset></fieldset></code>。その後、利用可能なオプションを反復し、各オプションに1つを作成します<code><div>、それを含む<code><input></code>そして1つ<code><label></label></code>。通常のPHP文字列補間を使用して、21行目にコンテナクラスを設定し、各オプションに対して30行目に一意のIDを作成することに注意してください。<h3>断片</h3>
<p>追加しなければならない最後のタイプは、見た目よりも少し複雑です。多くのフォームには、入力ではなく、他のフィールド間で印刷する必要があるHTMLだけの説明フィールドが含まれています。</p>
<p>別のdomdocumentメソッド<code>createDocumentFragment()</code>使用する必要があります。これにより、DOM構造を使用せずに任意のHTMLを追加できます。</p>
<pre class="brush:php;toolbar:false"> container```を作成します<label>
  $ element = $ dom-> createElement（ 'label'）;
  $ element-> setAttribute（ 'class'、 'field'）;

  //入力値をリセット$ input = null;
  $ label = null;

  //タグが設定されている場合は、 `` <span>`</span>を追加します<span>
  // ...

  //入力要素スイッチをビルド（$ field-> type）{
    // ...
    ケース「指示」：
      $ element-> setAttribute（ 'class'、 'field text'）;
      $ fragment = $ dom-> createdocumentfragment（）;
      $ fragment-> appendxml（$ field-> text）;
      $ input = $ dom-> createElement（ 'p'）;
      $ input-> appendChild（$ fragment）;
      壊す;
  }
}</span></label><p>この時点で、実際に静的を表す<code>$input</code>という名前のオブジェクトをどのように取得するか疑問に思うかもしれません<code><p>要素。目標は、フィールドループの各反復に対して共通の変数名を使用することです。そのため、最終的には、実際のフィールドタイプに関係なく<code>$element->appendChild($input)</code>でいつでも追加できます。だから、はい、物事を命名するのは難しいです。</p>
<h3>確認する</h3>
<p>使用しているAPIは、必要な各フィールドに個別の検証メッセージを提供します。コミットエラーが発生した場合、一般的な「oops、間違った」メッセージを下部に表示する代わりに、フィールドとインラインなエラーを表示できます。</p>
<p>各要素に検証テキストを追加しましょう。</p>
<pre class="brush:php;toolbar:false"> container```を作成します<label>
  $ element = $ dom-> createElement（ 'label'）;
  $ element-> setAttribute（ 'class'、 'field'）;

  //入力値をリセット$ input = null;
  $ label = null;
  $ validation = null;

  //タグが設定されている場合は、 `` <span>`</span>を追加します<span>
  // ...

  //検証メッセージが設定されている場合は、 `` <em>``</em>を追加します<em>
  if（ISSET（$ field-> validation_message））{
    $ validation = $ dom-> createElement（ 'em'）;
    $ fragment = $ dom-> createdocumentfragment（）;
    $ fragment-> appendxml（$ field-> validation_message）;
    $ validation-> appendChild（$ fragment）;
    $ validation-> setAttribute（ 'class'、 'validation-message'）;
    $ validation-> setattribute（ 'hidden'、 'hidden'）;

  //入力要素スイッチをビルド（$ field-> type）{
    // ...
  }
}</em></span></label><p>それだけです！フィールドタイプのロジックに対処する必要はありません。各フィールドに1つの要素を条件付きで構築するだけです。</p><h3>すべてのコンテンツを統合します</h3><p>では、すべてのフィールド要素を構築した後はどうなりますか？構築しているDOMツリーに<code>$input</code> 、 <code>$label</code> 、 <code>$validation</code>オブジェクトを追加する必要があります。また、この機会を利用して、 <code>required</code>に応じて公共の財産を追加することもできます。次に、このAPIのフィールドとは別の送信ボタンを追加します。</p><pre class="brush:php;toolbar:false">  createElement（ 'form'）;

  //フィールドを繰り返して、各フィールドを構築します（$ formfieldsとして$ field）{
    // <label>container```</label>を作成します<label>
    $ element = $ dom-> createElement（ 'label'）;
    $ element-> setAttribute（ 'class'、 'field'）;

    //入力値をリセット$ input = null;
    $ label = null;
    $ validation = null;

    //タグが設定されている場合は、 `` <span>`</span>を追加します<span>
    // ...

    //検証メッセージが設定されている場合は、 `` <em>``</em>を追加します<em>
    // ...

    //入力要素スイッチをビルド（$ field-> type）{
      // ...
    }

    //入力要素を追加するif（$ input）{
      $ input-> setAttribute（ 'id'、$ field-> id）;
      if（$ field->必須）
        $ input-> setAttribute（ 'required'、 'reby'）;
      if（ISSET（$ field-> max_length））
        $ input-> setAttribute（ 'maxlength'、$ field-> max_length）;
      $ element-> appendChild（$ input）;

      if（$ label）
        $ element-> appendChild（$ label）;

      if（$ validation）
        $ element-> appendChild（$ validation）;

      $ form-> appendChild（$ element）;
    }
  }

  //送信ボタンをビルド$ submitbuttonlabel = $ formcontent-> submit_button_label;
  $ submitbuttonfield = $ dom-> createElement（ 'div'）;
  $ submitbuttonfield-> setattribute（ 'class'、 'field submit'）;
  $ submitbutton = $ dom-> createElement（ 'button'、$ submitbuttonlabel）;
  $ submitbuttonfield-> appendChild（$ submitbutton）;
  $ form-> appendChild（$ submitbuttonfield）;

  // html出力$ dom-> appendChild（$ form）を取得します。
  $ htmlstring = $ dom-> savehtml（）;
  echo $ htmlstring;
}</em></span></label><p> <code>$input</code>真であるかどうかを確認するのはなぜですか？ループの上部でnullにリセットし、型が予想されるスイッチケースと一致する場合にのみビルドするため、これにより、コードが正しく処理できない予期しない要素が誤って含まれないことが保証されます。</p><p>見て、カスタムHTMLフォーム！</p><h3>追加コンテンツ：行と列</h3><p>ご存知のように、多くのフォームビルダーにより、著者はフィールドに行と列を設定できます。たとえば、行には、それぞれ別々の50％幅列にある最初の名前のフィールドと姓フィールドの両方が含まれる場合があります。それで、あなたは尋ねるかもしれません、どうすればこれを達成できますか？もちろん、例を挙げて、domdocumentのループフレンドリーを説明しましょう！</p><p>以下に示すように、API応答にはグリッドデータが含まれています。</p><pre class="brush:php;toolbar:false"> {
  「submit_button_label」：「今すぐ送信！」、
  「フィールド」：[
    {
      「ID」：「ファーストネーム」、
      「タイプ」：「テキスト」、
      「ラベル」：「名」、
      「必須」：本当、
      「validation_message」：「名が必要です。」、
      「max_length」：30、
      「row」：1、
      「列」：1
    }、
    {
      「ID」：「カテゴリ」、
      「タイプ」：「multiple_choice」、
      「ラベル」：「適用されるすべてのカテゴリを選択」、
      「必須」：偽、
      「field_metadata」：{
        「multi_select」：本当、
        「価値」：[
          {"Value"： "Travel"、 "Label"： "Travel"}、
          {"Value"： "Marketing"、 "Label"： "Marketing"}
        ]
      }、
      「row」：2、
      「列」：1
    }
  ]
}
ログイン後にコピー

data-columnプロパティを追加するだけで幅を設定するのに十分であると仮定しますが、各行には独自の要素が必要です（つまり、CSSグリッドがありません）。

深く掘り下げる前に、行を追加するために必要なものを考えてみましょう。基本的なロジックは次のとおりです。

  1. 遭遇した最新の行を追跡します。
  2. 現在の行が大きい場合、つまり、次の行にジャンプし、新しい行要素を作成し、コンテンツを前の行に追加するのではなく、コンテンツの追加を開始します。

さて、文字列を連結している場合はどうすればよいですか？おそらく、新しいラインに到達するたびに' <div>'</div>に似た文字列を追加します。この「リバースHTML文字列」は常に私にとって非常に混乱しているので、私のIDEであると感じていることしか想像できません。最も重要なことは、ブラウザがオープンタグを自動的に閉じるため、シンプルなタイプミスは無数のネストにつながる可能性があることです<div>。楽しいようなものですが、反対です。それでは、この問題に対処するための構造化されたアプローチは何ですか？ご質問ありがとうございます。まず、ループの前に行のトレースを追加し、追加の行コンテナ要素を構築しましょう。次に、 <code>$formに直接追加するのではなく、各コンテナ$elementを$rowElementに追加するようにします。

  createElement（ 'form'）;

  //行を初期化します$ row = 0;
  $ Rowelement = $ dom-> createElement（ 'div'）;
  $ Rowelement-> setAttribute（ 'class'、 'field-row'）;

  //フィールドを繰り返して、各フィールドを構築します（$ formfieldsとして$ field）{
    // <label>container```</label>を作成します<label>
    $ element = $ dom-> createElement（ 'label'）;
    $ element-> setAttribute（ 'class'、 'field'）;
    $ element-> setattribute（ 'data-row'、$ field-> row）;
    $ element-> setattribute（ 'data-column'、$ field-> column）;

    // [$ input）{（$ input）{lineに入力要素を追加します
      // ...
      $ Rowelement-> AppendChild（$ element）;
      $ form-> appendchild（$ rowelement）;
    }
  }
  // ...
}</label><p>これまでのところ、フィールドの周りに別のものを追加しました<code><div>。ループ内の各行の<em>新しい</em>行要素を作成しましょう。<pre class="brush:php;toolbar:false">  createElement（ 'div'）;
$ Rowelement-> setAttribute（ 'class'、 'field-row'）;

//フィールドを繰り返して、各フィールドを構築します（$ formfieldsとして$ field）{
  // ...
  //新しい行に到達した場合、新しい$ rownementを作成します
  if（$ field-> row> $ row）{
    $ row = $ field-> row;
    $ Rowelement = $ dom-> createElement（ 'div'）;
    $ Rowelement-> setAttribute（ 'class'、 'field-row'）;
  }

  //入力要素スイッチをビルド（$ field-> type）{
    // ...
    // [$ input）{（$ input）{lineに入力要素を追加します
      // ...
      $ Rowelement-> AppendChild（$ element）;

      //自動的に額面$ form-> appendChild（$ rowelement）;
    }
  }
}
ログイン後にコピー

PHPが新しい一意のオブジェクトとして扱う新しいDOM要素として$rowElementオブジェクトを上書きするだけです。したがって、各ループの終わりに、現在の$rowElementを追加します。これは、以前の反復と同じ要素である場合、新しい要素である場合、最後に追加されます。

次のステップ

フォームは、オブジェクト指向のテンプレートの優れたユースケースです。 WordPressコアコードのスニペットを考えると、ネストされたメニューも良いユースケースであると考えることができます。マークを記録するタスクは、複雑なロジックに従うことは、このアプローチの適切な候補です。 Domdocumentは任意のXMLを出力できるため、それを使用してPOSTデータからRSSフィードを構築することもできます。

これがフォームの完全なコードスニペットです。自分が取り組んでいる任意のフォームAPIに自由に調整してください。これは公式のドキュメントであり、利用可能なAPIを理解することが役立ちます。

domdocumentが既存のHTMLとXMLを解析できることさえ述べていません。その後、Xpath APIを使用して要素を見つけることができます。これは、 document.querySelectorまたはnode.jsのcheerioに多少似ています。学習曲線は少し急ですが、外部コンテンツを処理するための非常に強力なAPIです。

楽しい事実： Xで終わるMicrosoft Officeファイル（.xlsxなど）はXMLファイルです。マーケティング部門に伝えないでくださいが、サーバー上の単語文書を解析し、HTMLを出力できます。

最も重要なことは、テンプレートが超大国であることを覚えておくことです。適切な状況に合った適切なマークアップを構築できることが、優れたユーザーエクスペリエンスを得るための鍵となります。

以上がdomdocumentを使用してPHPでフォームを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

前の記事：「追放された追い風」 次の記事：Webコンポーネントを備えた組み込みの要素をスーパーチャージする」は、あなたが思っているよりも簡単です
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート