Cara mengakses elemen html di php

Template membuat web berputar. Sintesis data dan struktur menjadi konten. Ini adalah kekuatan super paling keren kami sebagai pengembang — ambil beberapa data, lalu buat itu berfungsi untuk kami, dalam presentasi apa pun yang kami butuhkan. Array objek bisa menjadi tabel, daftar kartu, bagan, atau apa pun yang menurut kami paling berguna bagi pengguna. Apakah datanya adalah posting blog kita sendiri dalam file Markdown, atau nilai tukar global saat itu juga, markup dan UX yang dihasilkan terserah kita sebagai pengembang front-end

PHP adalah bahasa yang luar biasa untuk templating, menyediakan banyak cara untuk menggabungkan data dengan markup. Mari masuk ke contoh penggunaan data untuk membuat formulir HTML di pos ini

Ingin tangan Anda langsung kotor?

Di PHP, kita dapat memasukkan variabel ke dalam literal string yang menggunakan tanda kutip ganda, jadi jika kita memiliki variabel $p = $dom->createElement('p');0, kita dapat menulis $p = $dom->createElement('p');1, dan mencetak $p = $dom->createElement('p');2 yang diharapkan. Untuk pembuatan templat yang lebih kompleks, kami selalu dapat menggabungkan string, seperti. $p = $dom->createElement('p');_3

Untuk anak-anak sekolah tua, ada $p = $dom->createElement('p');4. Untuk string multiline, Anda dapat menggunakan Heredoc (yang dimulai seperti $p = $dom->createElement('p');5). Dan, yang tak kalah pentingnya, kita bisa menaburkan variabel PHP di dalam HTML, seperti $p = $dom->createElement('p');6

Semua opsi ini bagus, tetapi hal-hal bisa menjadi berantakan ketika banyak logika inline diperlukan. Jika kita perlu membangun string HTML majemuk, katakanlah formulir atau navigasi, kompleksitasnya berpotensi tidak terbatas, karena elemen HTML dapat bersarang di dalam satu sama lain

Apa yang kami coba hindari

Sebelum kita melanjutkan dan melakukan hal yang ingin kita lakukan, ada baiknya meluangkan waktu sebentar untuk mempertimbangkan apa yang tidak ingin kita lakukan. Pertimbangkan petikan ringkasan berikut dari tulisan suci WordPress Core, $p = $dom->createElement('p');7, ayat 170-270

<?php // class-walker-nav-menu.php // ... $output .= $indent . '<li' . $id . $class_names . '>'; // ... $item_output = $args->before; $item_output .= '<a' . $attributes . '>'; $item_output .= $args->link_before . $title . $args->link_after; $item_output .= '</a>'; $item_output .= $args->after; // ... $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); // ... $output .= "</li>{$n}";_

Untuk membangun navigasi $p = $dom->createElement('p');_8 dalam fungsi ini, kami menggunakan variabel, $p = $dom->createElement('p');9, yang merupakan string yang sangat panjang yang terus kami tambahkan. Jenis kode ini memiliki urutan operasi yang sangat spesifik dan terbatas. Jika kami ingin menambahkan atribut ke $p->setAttribute('class', 'headline');_0, kami harus memiliki akses ke $p->setAttribute('class', 'headline');1 sebelum ini berjalan. Dan jika kita ingin membuat sarang $p->setAttribute('class', 'headline');2 atau $p->setAttribute('class', 'headline');3 di dalam $p->setAttribute('class', 'headline');0, kita perlu membuat blok kode baru yang akan menggantikan bagian tengah baris 7 dengan sekitar 4-10 baris baru, tergantung pada apa sebenarnya yang kita inginkan . Sekarang bayangkan Anda perlu menambahkan $p->setAttribute('class', 'headline');2 secara opsional, lalu menambahkan $p->setAttribute('class', 'headline');3 secara opsional, baik di dalam $p->setAttribute('class', 'headline');2 atau setelahnya. Itu saja adalah tiga pernyataan $p->setAttribute('class', 'headline');_8, membuat kodenya semakin tidak terbaca

Sangat mudah untuk berakhir dengan spageti string saat digabungkan seperti ini, yang menyenangkan untuk dikatakan sekaligus menyakitkan untuk mempertahankannya.

Inti dari masalahnya adalah ketika kita mencoba bernalar tentang elemen HTML, kita tidak memikirkan tentang string. Kebetulan string adalah apa yang dikonsumsi browser dan keluaran PHP. Tapi model mental kita lebih seperti DOM — elemen disusun menjadi pohon, dan setiap node memiliki banyak potensi atribut, properti, dan turunan

Bukankah lebih bagus jika ada cara yang terstruktur dan ekspresif untuk membangun pohon kita?

Memasuki…

Kelas $p->setAttribute('class', 'headline');_9

PHP 5 menambahkan modul $span = $dom->createElement('span', 'This is a headline'); // The 2nd argument populates the element's textContent $p->appendChild($span);_0 ke dalam daftar tipe Not So Strictly Typed™. Titik masuk utamanya adalah kelas $p->setAttribute('class', 'headline');_9, yang sengaja mirip dengan JavaScript API Web $span = $dom->createElement('span', 'This is a headline'); // The 2nd argument populates the element's textContent $p->appendChild($span);0. Jika Anda pernah menggunakan $span = $dom->createElement('span', 'This is a headline'); // The 2nd argument populates the element's textContent $p->appendChild($span);3 atau, bagi kita pada usia tertentu, sintaks $span = $dom->createElement('span', 'This is a headline'); // The 2nd argument populates the element's textContent $p->appendChild($span);4 jQuery, ini mungkin akan terasa cukup familiar

Kita mulai dengan menginisialisasi $p->setAttribute('class', 'headline');9 baru

$dom = new DOMDocument();

Sekarang kita dapat menambahkan $span = $dom->createElement('span', 'This is a headline'); // The 2nd argument populates the element's textContent $p->appendChild($span);_6 ke dalamnya

$p = $dom->createElement('p');

String $span = $dom->createElement('span', 'This is a headline'); // The 2nd argument populates the element's textContent $p->appendChild($span);_7 mewakili jenis elemen yang kita inginkan, jadi string valid lainnya adalah $span = $dom->createElement('span', 'This is a headline'); // The 2nd argument populates the element's textContent $p->appendChild($span);8, $span = $dom->createElement('span', 'This is a headline'); // The 2nd argument populates the element's textContent $p->appendChild($span);9 , dll

Setelah kami memiliki elemen, kami dapat mengatur atributnya

$p->setAttribute('class', 'headline');

Kita bisa menambahkan anak ke dalamnya

$span = $dom->createElement('span', 'This is a headline'); // The 2nd argument populates the element's textContent $p->appendChild($span);

Dan terakhir, dapatkan string HTML lengkap sekaligus

$dom->appendChild($p); $htmlString = $dom->saveHTML(); echo $htmlString;

Perhatikan bagaimana gaya pengkodean ini membuat kode kita tertata sesuai dengan model mental kita — sebuah dokumen memiliki elemen; . Seluruh bagian "HTML is just a string" muncul di bagian akhir, setelah struktur kita terpasang

"Dokumen" di sini sedikit berbeda dari DOM yang sebenarnya, karena tidak perlu mewakili seluruh dokumen, hanya satu blok HTML. Faktanya, jika Anda perlu membuat dua elemen serupa, Anda dapat menyimpan string HTML menggunakan $dom->appendChild($p); $htmlString = $dom->saveHTML(); echo $htmlString;0, memodifikasi "dokumen" DOM ​​lagi, lalu menyimpan string HTML baru dengan memanggil $dom->appendChild($p); $htmlString = $dom->saveHTML(); echo $htmlString;0 lagi

Mendapatkan data dan mengatur struktur

Katakanlah kita perlu membuat formulir di server menggunakan data dari penyedia CRM dan markup kita sendiri. Tanggapan API dari CRM terlihat seperti ini

{ "submit_button_label": "Submit now!", "fields": [ { "id": "first-name", "type": "text", "label": "First name", "required": true, "validation_message": "First name is required.", "max_length": 30 }, { "id": "category", "type": "multiple_choice", "label": "Choose all categories that apply", "required": false, "field_metadata": { "multi_select": true, "values": [ { "value": "travel", "label": "Travel" }, { "value": "marketing", "label": "Marketing" } ] } } ] }

Contoh ini tidak menggunakan struktur data yang tepat dari CRM tertentu, tetapi lebih representatif

Dan misalkan kita ingin markup kita terlihat seperti ini

<form> <label class="field"> <input type="text" name="first-name" id="first-name" placeholder=" " required> <span class="label">First name</span> <em class="validation" hidden>First name is required.</em> </label> <label class="field checkbox-group"> <fieldset> <div class="choice"> <input type="checkbox" value="travel" id="category-travel" name="category"> <label for="category-travel">Travel</label> </div> <div class="choice"> <input type="checkbox" value="marketing" id="category-marketing" name="category"> <label for="category-marketing">Marketing</label> </div> </fieldset> <span class="label">Choose all categories that apply</span> </label> </form>

Apa itu $dom->appendChild($p); $htmlString = $dom->saveHTML(); echo $htmlString;_2? . Selama inputnya kosong, itu cocok dengan $dom->appendChild($p); $htmlString = $dom->saveHTML(); echo $htmlString;3, tetapi pengguna tidak melihat teks placeholder yang terlihat. Hal yang dapat Anda lakukan saat kami mengontrol markup

Sekarang kita tahu apa hasil yang kita inginkan, inilah rencana permainannya

1. Dapatkan definisi bidang dan konten lainnya dari API
2. Inisialisasi $p->setAttribute('class', 'headline');_9
3. Ulangi bidang dan bangun masing-masing sesuai kebutuhan
4. Dapatkan keluaran HTML

Jadi, mari hentikan proses kita dan singkirkan beberapa hal teknis

<?php function renderForm ($endpoint) { // Get the data from the API and convert it to a PHP object $formResult = file_get_contents($endpoint); $formContent = json_decode($formResult); $formFields = $formContent->fields; // Start building the DOM $dom = new DOMDocument(); $form = $dom->createElement('form'); // Iterate over the fields and build each one foreach ($formFields as $field) { // TODO: Do something with the field data } // Get the HTML output $dom->appendChild($form); $htmlString = $dom->saveHTML(); echo $htmlString; }

Sejauh ini, kami telah mendapatkan data dan menguraikannya, menginisialisasi $p->setAttribute('class', 'headline');9 kami dan menggemakan hasilnya. Apa yang ingin kita lakukan untuk setiap bidang?

<?php // ... // Iterate over the fields and build each one foreach ($formFields as $field) { // Build the container `<label>` $element = $dom->createElement('label'); $element->setAttribute('class', 'field'); // Reset input values $label = null; // Add a `<span>` for the label if it is set if ($field->label) { $label = $dom->createElement('span', $field->label); $label->setAttribute('class', 'label'); } // Add the label to the `<label>` if ($label) $element->appendChild($label); }

Karena kita berada dalam satu lingkaran, dan PHP tidak memasukkan variabel dalam lingkaran, kita mengatur ulang elemen $dom->appendChild($p); $htmlString = $dom->saveHTML(); echo $htmlString;8 pada setiap iterasi. Kemudian, jika bidang tersebut memiliki label, kami membuat elemen tersebut. Pada akhirnya, kami menambahkannya ke elemen wadah

Perhatikan bahwa kita menetapkan kelas menggunakan metode $dom->appendChild($p); $htmlString = $dom->saveHTML(); echo $htmlString;9. Berbeda dengan Web API, sayangnya tidak ada penyerahan khusus daftar kelas. Mereka hanyalah atribut lain. Jika kita memiliki logika kelas yang sangat kompleks, karena It's Just PHP™, kita dapat membuat larik dan kemudian meledakkannya
{ "submit_button_label": "Submit now!", "fields": [ { "id": "first-name", "type": "text", "label": "First name", "required": true, "validation_message": "First name is required.", "max_length": 30 }, { "id": "category", "type": "multiple_choice", "label": "Choose all categories that apply", "required": false, "field_metadata": { "multi_select": true, "values": [ { "value": "travel", "label": "Travel" }, { "value": "marketing", "label": "Marketing" } ] } } ] }0

Input tunggal

Karena kita tahu bahwa API hanya akan mengembalikan jenis bidang tertentu, kita dapat mengganti jenis dan menulis kode khusus untuk masing-masing bidang

$dom = new DOMDocument();_0

Sekarang mari kita tangani area teks, kotak centang tunggal, dan bidang tersembunyi

$dom = new DOMDocument();_1

Perhatikan sesuatu yang baru yang kami lakukan untuk kotak centang dan kasing tersembunyi? . Untuk bidang kotak centang tunggal kami ingin memodifikasi kelas wadah, sehingga kami dapat menyelaraskan kotak centang dan label secara horizontal;

Sekarang jika kita hanya merangkai string, tidak mungkin untuk mengubahnya pada saat ini. Kami harus menambahkan banyak pernyataan $p->setAttribute('class', 'headline');8 tentang jenis elemen dan metadatanya di bagian atas blok. Atau, mungkin lebih buruk, kita memulai { "submit_button_label": "Submit now!", "fields": [ { "id": "first-name", "type": "text", "label": "First name", "required": true, "validation_message": "First name is required.", "max_length": 30 }, { "id": "category", "type": "multiple_choice", "label": "Choose all categories that apply", "required": false, "field_metadata": { "multi_select": true, "values": [ { "value": "travel", "label": "Travel" }, { "value": "marketing", "label": "Marketing" } ] } } ] }5 lebih awal, lalu salin-tempel banyak kode umum di antara setiap cabang

Dan inilah keindahan nyata menggunakan pembuat seperti $p->setAttribute('class', 'headline');9 — sampai kita mencapai $dom->appendChild($p); $htmlString = $dom->saveHTML(); echo $htmlString;0 itu, semuanya masih dapat diedit, dan semuanya masih terstruktur

Elemen perulangan bersarang

Mari tambahkan logika untuk { "submit_button_label": "Submit now!", "fields": [ { "id": "first-name", "type": "text", "label": "First name", "required": true, "validation_message": "First name is required.", "max_length": 30 }, { "id": "category", "type": "multiple_choice", "label": "Choose all categories that apply", "required": false, "field_metadata": { "multi_select": true, "values": [ { "value": "travel", "label": "Travel" }, { "value": "marketing", "label": "Marketing" } ] } } ] }8 elemen

$dom = new DOMDocument();_2

Oke, jadi ada banyak hal yang terjadi di sini, tetapi logika dasarnya sama. Setelah mengatur { "submit_button_label": "Submit now!", "fields": [ { "id": "first-name", "type": "text", "label": "First name", "required": true, "validation_message": "First name is required.", "max_length": 30 }, { "id": "category", "type": "multiple_choice", "label": "Choose all categories that apply", "required": false, "field_metadata": { "multi_select": true, "values": [ { "value": "travel", "label": "Travel" }, { "value": "marketing", "label": "Marketing" } ] } } ] }8 luar, kami membuat array <form> <label class="field"> <input type="text" name="first-name" id="first-name" placeholder=" " required> <span class="label">First name</span> <em class="validation" hidden>First name is required.</em> </label> <label class="field checkbox-group"> <fieldset> <div class="choice"> <input type="checkbox" value="travel" id="category-travel" name="category"> <label for="category-travel">Travel</label> </div> <div class="choice"> <input type="checkbox" value="marketing" id="category-marketing" name="category"> <label for="category-marketing">Marketing</label> </div> </fieldset> <span class="label">Choose all categories that apply</span> </label> </form>0s untuk ditambahkan di dalamnya

Kami juga melakukan tipuan khusus { "submit_button_label": "Submit now!", "fields": [ { "id": "first-name", "type": "text", "label": "First name", "required": true, "validation_message": "First name is required.", "max_length": 30 }, { "id": "category", "type": "multiple_choice", "label": "Choose all categories that apply", "required": false, "field_metadata": { "multi_select": true, "values": [ { "value": "travel", "label": "Travel" }, { "value": "marketing", "label": "Marketing" } ] } } ] }_8 di sini. Jika tidak ada opsi yang dipilih sebelumnya, kami menambahkan opsi placeholder kosong yang sudah dipilih, tetapi tidak dapat dipilih oleh pengguna. Tujuannya adalah untuk menempatkan <form> <label class="field"> <input type="text" name="first-name" id="first-name" placeholder=" " required> <span class="label">First name</span> <em class="validation" hidden>First name is required.</em> </label> <label class="field checkbox-group"> <fieldset> <div class="choice"> <input type="checkbox" value="travel" id="category-travel" name="category"> <label for="category-travel">Travel</label> </div> <div class="choice"> <input type="checkbox" value="marketing" id="category-marketing" name="category"> <label for="category-marketing">Marketing</label> </div> </fieldset> <span class="label">Choose all categories that apply</span> </label> </form>_2 kita sebagai "placeholder" menggunakan CSS, tetapi teknik ini dapat berguna untuk semua jenis desain. Dengan menambahkannya ke <form> <label class="field"> <input type="text" name="first-name" id="first-name" placeholder=" " required> <span class="label">First name</span> <em class="validation" hidden>First name is required.</em> </label> <label class="field checkbox-group"> <fieldset> <div class="choice"> <input type="checkbox" value="travel" id="category-travel" name="category"> <label for="category-travel">Travel</label> </div> <div class="choice"> <input type="checkbox" value="marketing" id="category-marketing" name="category"> <label for="category-marketing">Marketing</label> </div> </fieldset> <span class="label">Choose all categories that apply</span> </label> </form>_3 sebelum menambahkan opsi lain, kami memastikan itu adalah opsi pertama di markup

Sekarang mari kita tangani <form> <label class="field"> <input type="text" name="first-name" id="first-name" placeholder=" " required> <span class="label">First name</span> <em class="validation" hidden>First name is required.</em> </label> <label class="field checkbox-group"> <fieldset> <div class="choice"> <input type="checkbox" value="travel" id="category-travel" name="category"> <label for="category-travel">Travel</label> </div> <div class="choice"> <input type="checkbox" value="marketing" id="category-marketing" name="category"> <label for="category-marketing">Marketing</label> </div> </fieldset> <span class="label">Choose all categories that apply</span> </label> </form>_4 tombol radio dan kotak centang

$dom = new DOMDocument();_3

Jadi, pertama-tama kami menentukan apakah set bidang harus untuk kotak centang atau tombol radio. Kemudian kami mengatur kelas container sesuai, dan membangun <form> <label class="field"> <input type="text" name="first-name" id="first-name" placeholder=" " required> <span class="label">First name</span> <em class="validation" hidden>First name is required.</em> </label> <label class="field checkbox-group"> <fieldset> <div class="choice"> <input type="checkbox" value="travel" id="category-travel" name="category"> <label for="category-travel">Travel</label> </div> <div class="choice"> <input type="checkbox" value="marketing" id="category-marketing" name="category"> <label for="category-marketing">Marketing</label> </div> </fieldset> <span class="label">Choose all categories that apply</span> </label> </form>4. Setelah itu, kita mengulangi pilihan yang tersedia dan membuat <form> <label class="field"> <input type="text" name="first-name" id="first-name" placeholder=" " required> <span class="label">First name</span> <em class="validation" hidden>First name is required.</em> </label> <label class="field checkbox-group"> <fieldset> <div class="choice"> <input type="checkbox" value="travel" id="category-travel" name="category"> <label for="category-travel">Travel</label> </div> <div class="choice"> <input type="checkbox" value="marketing" id="category-marketing" name="category"> <label for="category-marketing">Marketing</label> </div> </fieldset> <span class="label">Choose all categories that apply</span> </label> </form>6 untuk masing-masing pilihan dengan { "submit_button_label": "Submit now!", "fields": [ { "id": "first-name", "type": "text", "label": "First name", "required": true, "validation_message": "First name is required.", "max_length": 30 }, { "id": "category", "type": "multiple_choice", "label": "Choose all categories that apply", "required": false, "field_metadata": { "multi_select": true, "values": [ { "value": "travel", "label": "Travel" }, { "value": "marketing", "label": "Marketing" } ] } } ] }1 dan $dom->appendChild($p); $htmlString = $dom->saveHTML(); echo $htmlString;6

Perhatikan kita menggunakan interpolasi string PHP biasa untuk menyetel kelas penampung pada baris 21 dan untuk membuat ID unik untuk setiap pilihan pada baris 30

Fragmen

Satu tipe terakhir yang harus kita tambahkan sedikit lebih rumit dari kelihatannya. Banyak formulir menyertakan bidang instruksi, yang bukan merupakan masukan tetapi hanya beberapa HTML yang perlu kita cetak di antara bidang lainnya

Kita harus menggunakan metode $p->setAttribute('class', 'headline');_9 lainnya, <?php function renderForm ($endpoint) { // Get the data from the API and convert it to a PHP object $formResult = file_get_contents($endpoint); $formContent = json_decode($formResult); $formFields = $formContent->fields; // Start building the DOM $dom = new DOMDocument(); $form = $dom->createElement('form'); // Iterate over the fields and build each one foreach ($formFields as $field) { // TODO: Do something with the field data } // Get the HTML output $dom->appendChild($form); $htmlString = $dom->saveHTML(); echo $htmlString; }0. Ini memungkinkan kami untuk menambahkan HTML sewenang-wenang tanpa menggunakan penataan DOM

$dom = new DOMDocument();_4

Pada titik ini Anda mungkin bertanya-tanya bagaimana kami menemukan diri kami dengan objek yang disebut <form> <label class="field"> <input type="text" name="first-name" id="first-name" placeholder=" " required> <span class="label">First name</span> <em class="validation" hidden>First name is required.</em> </label> <label class="field checkbox-group"> <fieldset> <div class="choice"> <input type="checkbox" value="travel" id="category-travel" name="category"> <label for="category-travel">Travel</label> </div> <div class="choice"> <input type="checkbox" value="marketing" id="category-marketing" name="category"> <label for="category-marketing">Marketing</label> </div> </fieldset> <span class="label">Choose all categories that apply</span> </label> </form>3, yang sebenarnya mewakili elemen statis <?php function renderForm ($endpoint) { // Get the data from the API and convert it to a PHP object $formResult = file_get_contents($endpoint); $formContent = json_decode($formResult); $formFields = $formContent->fields; // Start building the DOM $dom = new DOMDocument(); $form = $dom->createElement('form'); // Iterate over the fields and build each one foreach ($formFields as $field) { // TODO: Do something with the field data } // Get the HTML output $dom->appendChild($form); $htmlString = $dom->saveHTML(); echo $htmlString; }2. Tujuannya adalah untuk menggunakan nama variabel umum untuk setiap iterasi loop bidang, sehingga pada akhirnya kita selalu dapat menambahkannya menggunakan <?php function renderForm ($endpoint) { // Get the data from the API and convert it to a PHP object $formResult = file_get_contents($endpoint); $formContent = json_decode($formResult); $formFields = $formContent->fields; // Start building the DOM $dom = new DOMDocument(); $form = $dom->createElement('form'); // Iterate over the fields and build each one foreach ($formFields as $field) { // TODO: Do something with the field data } // Get the HTML output $dom->appendChild($form); $htmlString = $dom->saveHTML(); echo $htmlString; }3 terlepas dari jenis bidang sebenarnya. Jadi, ya, menamai sesuatu itu sulit

Validasi

API yang kami gunakan dengan ramah memberikan pesan validasi individual untuk setiap bidang yang diperlukan. Jika ada kesalahan pengiriman, kami dapat menampilkan kesalahan sebaris dengan bidang, daripada pesan umum "oops, your bad" di bagian bawah

Mari tambahkan teks validasi ke setiap elemen

$dom = new DOMDocument();_5

Hanya itu yang diperlukan. Tidak perlu mengutak-atik logika jenis bidang — cukup buat elemen untuk setiap bidang secara kondisional

Menyatukan semuanya

Jadi apa yang terjadi setelah kita membangun semua elemen lapangan? . Kami juga dapat menggunakan kesempatan untuk menambahkan atribut umum, seperti <?php function renderForm ($endpoint) { // Get the data from the API and convert it to a PHP object $formResult = file_get_contents($endpoint); $formContent = json_decode($formResult); $formFields = $formContent->fields; // Start building the DOM $dom = new DOMDocument(); $form = $dom->createElement('form'); // Iterate over the fields and build each one foreach ($formFields as $field) { // TODO: Do something with the field data } // Get the HTML output $dom->appendChild($form); $htmlString = $dom->saveHTML(); echo $htmlString; }7. Kemudian kami akan menambahkan tombol kirim, yang terpisah dari bidang di API ini

$dom = new DOMDocument();_6

Mengapa kami memeriksa apakah <form> <label class="field"> <input type="text" name="first-name" id="first-name" placeholder=" " required> <span class="label">First name</span> <em class="validation" hidden>First name is required.</em> </label> <label class="field checkbox-group"> <fieldset> <div class="choice"> <input type="checkbox" value="travel" id="category-travel" name="category"> <label for="category-travel">Travel</label> </div> <div class="choice"> <input type="checkbox" value="marketing" id="category-marketing" name="category"> <label for="category-marketing">Marketing</label> </div> </fieldset> <span class="label">Choose all categories that apply</span> </label> </form>3 benar?

Hai presto, formulir HTML khusus

Poin bonus. baris dan kolom

Seperti yang Anda ketahui, banyak pembuat formulir memungkinkan penulis mengatur baris dan kolom untuk bidang. Misalnya, sebuah baris mungkin berisi bidang nama depan dan nama belakang, masing-masing dalam satu kolom dengan lebar 50%. Jadi bagaimana kita akan mengimplementasikan ini, Anda bertanya?

Tanggapan API kami menyertakan data grid seperti ini

$dom = new DOMDocument();_7

Kami berasumsi bahwa menambahkan atribut <?php // ... // Iterate over the fields and build each one foreach ($formFields as $field) { // Build the container `<label>` $element = $dom->createElement('label'); $element->setAttribute('class', 'field'); // Reset input values $label = null; // Add a `<span>` for the label if it is set if ($field->label) { $label = $dom->createElement('span', $field->label); $label->setAttribute('class', 'label'); } // Add the label to the `<label>` if ($label) $element->appendChild($label); }_1 sudah cukup untuk menata lebar, tetapi setiap baris harus menjadi elemennya sendiri (i. e. tidak ada kisi CSS)

Sebelum kita menyelami, mari pikirkan apa yang kita perlukan untuk menambahkan baris. Logika dasar berjalan seperti ini

1. Lacak baris terbaru yang ditemui
2. Jika baris saat ini lebih besar, i. e. kami telah melompat ke baris berikutnya, membuat elemen baris baru dan mulai menambahkannya, bukan yang sebelumnya

Sekarang, bagaimana kita melakukan ini jika kita menggabungkan string? . "String HTML terbalik" semacam ini selalu membingungkan saya, jadi saya hanya bisa membayangkan bagaimana rasanya IDE saya. Dan ceri di atas adalah bahwa berkat tag terbuka penutup otomatis browser, satu kesalahan ketik akan menghasilkan trilyun <form> <label class="field"> <input type="text" name="first-name" id="first-name" placeholder=" " required> <span class="label">First name</span> <em class="validation" hidden>First name is required.</em> </label> <label class="field checkbox-group"> <fieldset> <div class="choice"> <input type="checkbox" value="travel" id="category-travel" name="category"> <label for="category-travel">Travel</label> </div> <div class="choice"> <input type="checkbox" value="marketing" id="category-marketing" name="category"> <label for="category-marketing">Marketing</label> </div> </fieldset> <span class="label">Choose all categories that apply</span> </label> </form>6 bersarang. Sama seperti menyenangkan, tapi sebaliknya

Jadi apa cara terstruktur untuk menangani ini? . Pertama, mari tambahkan pelacakan baris sebelum loop kita dan buat elemen penampung baris tambahan. Kemudian kami akan memastikan untuk menambahkan setiap wadah <?php // ... // Iterate over the fields and build each one foreach ($formFields as $field) { // Build the container `<label>` $element = $dom->createElement('label'); $element->setAttribute('class', 'field'); // Reset input values $label = null; // Add a `<span>` for the label if it is set if ($field->label) { $label = $dom->createElement('span', $field->label); $label->setAttribute('class', 'label'); } // Add the label to the `<label>` if ($label) $element->appendChild($label); }4 ke <?php // ... // Iterate over the fields and build each one foreach ($formFields as $field) { // Build the container `<label>` $element = $dom->createElement('label'); $element->setAttribute('class', 'field'); // Reset input values $label = null; // Add a `<span>` for the label if it is set if ($field->label) { $label = $dom->createElement('span', $field->label); $label->setAttribute('class', 'label'); } // Add the label to the `<label>` if ($label) $element->appendChild($label); }5 daripada langsung ke <?php // ... // Iterate over the fields and build each one foreach ($formFields as $field) { // Build the container `<label>` $element = $dom->createElement('label'); $element->setAttribute('class', 'field'); // Reset input values $label = null; // Add a `<span>` for the label if it is set if ($field->label) { $label = $dom->createElement('span', $field->label); $label->setAttribute('class', 'label'); } // Add the label to the `<label>` if ($label) $element->appendChild($label); }6

$dom = new DOMDocument();_8

Sejauh ini kami baru saja menambahkan <form> <label class="field"> <input type="text" name="first-name" id="first-name" placeholder=" " required> <span class="label">First name</span> <em class="validation" hidden>First name is required.</em> </label> <label class="field checkbox-group"> <fieldset> <div class="choice"> <input type="checkbox" value="travel" id="category-travel" name="category"> <label for="category-travel">Travel</label> </div> <div class="choice"> <input type="checkbox" value="marketing" id="category-marketing" name="category"> <label for="category-marketing">Marketing</label> </div> </fieldset> <span class="label">Choose all categories that apply</span> </label> </form>6 lainnya di sekitar bidang. Mari buat elemen baris baru untuk setiap baris di dalam loop

$dom = new DOMDocument();_9

Yang perlu kita lakukan hanyalah menimpa objek <?php // ... // Iterate over the fields and build each one foreach ($formFields as $field) { // Build the container `<label>` $element = $dom->createElement('label'); $element->setAttribute('class', 'field'); // Reset input values $label = null; // Add a `<span>` for the label if it is set if ($field->label) { $label = $dom->createElement('span', $field->label); $label->setAttribute('class', 'label'); } // Add the label to the `<label>` if ($label) $element->appendChild($label); }5 sebagai elemen DOM baru, dan PHP memperlakukannya sebagai objek unik baru. Jadi, di akhir setiap loop, kami hanya menambahkan apa pun <?php // ... // Iterate over the fields and build each one foreach ($formFields as $field) { // Build the container `<label>` $element = $dom->createElement('label'); $element->setAttribute('class', 'field'); // Reset input values $label = null; // Add a `<span>` for the label if it is set if ($field->label) { $label = $dom->createElement('span', $field->label); $label->setAttribute('class', 'label'); } // Add the label to the `<label>` if ($label) $element->appendChild($label); }5 saat ini — jika masih sama dengan iterasi sebelumnya, maka formulir diperbarui;

Kemana kita pergi dari sini?

Formulir adalah kasus penggunaan yang bagus untuk templating berorientasi objek. Dan memikirkan cuplikan dari WordPress Core itu, argumen mungkin dibuat bahwa menu bersarang juga merupakan kasus penggunaan yang baik. Tugas apa pun di mana markup mengikuti logika kompleks menjadi kandidat yang baik untuk pendekatan ini. $p->setAttribute('class', 'headline');_9 dapat menghasilkan XML apa pun, jadi Anda juga dapat menggunakannya untuk membuat umpan RSS dari data kiriman

Inilah seluruh cuplikan kode untuk formulir kami. Jangan ragu untuk mengadaptasinya ke API bentuk apa pun yang Anda hadapi. Inilah dokumentasi resmi, yang bagus untuk memahami API yang tersedia

Kami bahkan tidak menyebutkan $p->setAttribute('class', 'headline');_9 dapat mengurai HTML dan XML yang ada. Anda kemudian dapat mencari elemen menggunakan API XPath, yang agak mirip dengan $dom = new DOMDocument();02, atau $dom = new DOMDocument();03 di Node. js. Ada sedikit kurva pembelajaran, tetapi ini adalah API yang sangat kuat untuk menangani konten eksternal

Fakta menyenangkan(?). File Microsoft Office yang diakhiri dengan $dom = new DOMDocument();_04 (mis. g. $dom = new DOMDocument();_05) adalah file XML. Jangan beri tahu departemen pemasaran, tetapi mungkin untuk mem-parsing dokumen Word dan menampilkan HTML di server

Yang paling penting adalah mengingat bahwa template adalah kekuatan super. Mampu membangun markup yang tepat untuk situasi yang tepat bisa menjadi kunci UX yang hebat

Bagaimana cara menggunakan HTML dengan PHP?

Bisakah PHP berinteraksi dengan HTML?