From bdcaabd36b079b2e4dbaf3e362d19338ac9dad32 Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Tue, 22 Oct 2024 12:06:48 +0200
Subject: [PATCH 01/21] Create unique form field id for templating

---
 src/Tags/Concerns/RendersForms.php | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Tags/Concerns/RendersForms.php b/src/Tags/Concerns/RendersForms.php
index cedf943d6f..47ca921fc5 100644
--- a/src/Tags/Concerns/RendersForms.php
+++ b/src/Tags/Concerns/RendersForms.php
@@ -142,6 +142,7 @@ protected function getRenderableField($field, $errorBag = 'default', $manipulate
             ->filter()->all();
 
         $data = array_merge($configDefaults, $field->toArray(), [
+            'id' => $field->form()->handle().'-form-' . $field->handle().'-field',
             'instructions' => $field->instructions(),
             'error' => $errors->first($field->handle()) ?: null,
             'default' => $field->value() ?? $field->defaultValue(),

From 5b3126927c773e6cf4c26a6debec30009cef833c Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Tue, 22 Oct 2024 12:07:53 +0200
Subject: [PATCH 02/21] Add id attributes to form fields and labels

---
 resources/views/extend/forms/fields.antlers.html            | 2 +-
 resources/views/extend/forms/fields/assets.antlers.html     | 1 +
 resources/views/extend/forms/fields/default.antlers.html    | 1 +
 resources/views/extend/forms/fields/dictionary.antlers.html | 1 +
 resources/views/extend/forms/fields/files.antlers.html      | 1 +
 resources/views/extend/forms/fields/select.antlers.html     | 1 +
 resources/views/extend/forms/fields/text.antlers.html       | 1 +
 resources/views/extend/forms/fields/textarea.antlers.html   | 1 +
 resources/views/extend/forms/fields/toggle.antlers.html     | 1 +
 9 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/resources/views/extend/forms/fields.antlers.html b/resources/views/extend/forms/fields.antlers.html
index 751f9e0d3d..a337282246 100644
--- a/resources/views/extend/forms/fields.antlers.html
+++ b/resources/views/extend/forms/fields.antlers.html
@@ -1,6 +1,6 @@
 {{ fields }}
     <div class="p-4">
-        <label>{{ display }}</label>
+        <label for="{{ id }}">{{ display }}</label>
         <div class="p-2">{{ field }}</div>
         {{ if error }}
             <p class="text-gray-500">{{ error }}</p>
diff --git a/resources/views/extend/forms/fields/assets.antlers.html b/resources/views/extend/forms/fields/assets.antlers.html
index 0f0aa3c0c4..6563a55336 100644
--- a/resources/views/extend/forms/fields/assets.antlers.html
+++ b/resources/views/extend/forms/fields/assets.antlers.html
@@ -1,6 +1,7 @@
 <input
     type="file"
     name="{{ handle }}{{ if max_files !== 1 }}[]{{ /if }}"
+    id="{{ id }}"
     {{ if js_driver }}{{ js_attributes }}{{ /if }}
     {{ if max_files !== 1 }}multiple{{ /if }}
     {{ if validate|contains:required }}required{{ /if }}
diff --git a/resources/views/extend/forms/fields/default.antlers.html b/resources/views/extend/forms/fields/default.antlers.html
index 44c28b9ba0..87b2d545fa 100644
--- a/resources/views/extend/forms/fields/default.antlers.html
+++ b/resources/views/extend/forms/fields/default.antlers.html
@@ -2,6 +2,7 @@
     type="{{ input_type ?? 'text' }}"
     name="{{ handle }}"
     value="{{ value }}"
+    id="{{ id }}"
     {{ if placeholder }}placeholder="{{ placeholder }}"{{ /if }}
     {{ if character_limit }}maxlength="{{ character_limit }}"{{ /if }}
     {{ if js_driver }}{{ js_attributes }}{{ /if }}
diff --git a/resources/views/extend/forms/fields/dictionary.antlers.html b/resources/views/extend/forms/fields/dictionary.antlers.html
index b093f6a026..a6a5d74777 100644
--- a/resources/views/extend/forms/fields/dictionary.antlers.html
+++ b/resources/views/extend/forms/fields/dictionary.antlers.html
@@ -1,5 +1,6 @@
 <select
     name="{{ handle }}{{ multiple ?= "[]" }}"
+    id="{{ id }}"
     {{ if js_driver }}{{ js_attributes }}{{ /if }}
     {{ if multiple }}multiple{{ /if }}
     {{ if validate|contains:required }}required{{ /if }}
diff --git a/resources/views/extend/forms/fields/files.antlers.html b/resources/views/extend/forms/fields/files.antlers.html
index 0f0aa3c0c4..6563a55336 100644
--- a/resources/views/extend/forms/fields/files.antlers.html
+++ b/resources/views/extend/forms/fields/files.antlers.html
@@ -1,6 +1,7 @@
 <input
     type="file"
     name="{{ handle }}{{ if max_files !== 1 }}[]{{ /if }}"
+    id="{{ id }}"
     {{ if js_driver }}{{ js_attributes }}{{ /if }}
     {{ if max_files !== 1 }}multiple{{ /if }}
     {{ if validate|contains:required }}required{{ /if }}
diff --git a/resources/views/extend/forms/fields/select.antlers.html b/resources/views/extend/forms/fields/select.antlers.html
index b093f6a026..a6a5d74777 100644
--- a/resources/views/extend/forms/fields/select.antlers.html
+++ b/resources/views/extend/forms/fields/select.antlers.html
@@ -1,5 +1,6 @@
 <select
     name="{{ handle }}{{ multiple ?= "[]" }}"
+    id="{{ id }}"
     {{ if js_driver }}{{ js_attributes }}{{ /if }}
     {{ if multiple }}multiple{{ /if }}
     {{ if validate|contains:required }}required{{ /if }}
diff --git a/resources/views/extend/forms/fields/text.antlers.html b/resources/views/extend/forms/fields/text.antlers.html
index 327eed416f..eec2d8f30d 100644
--- a/resources/views/extend/forms/fields/text.antlers.html
+++ b/resources/views/extend/forms/fields/text.antlers.html
@@ -2,6 +2,7 @@
     type="{{ input_type ?? 'text' }}"
     name="{{ handle }}"
     value="{{ value }}"
+    id="{{ id }}"
     {{ if placeholder }}placeholder="{{ placeholder }}"{{ /if }}
     {{ if character_limit }}maxlength="{{ character_limit }}"{{ /if }}
     {{ if autocomplete }}autocomplete="{{ autocomplete }}"{{ /if }}
diff --git a/resources/views/extend/forms/fields/textarea.antlers.html b/resources/views/extend/forms/fields/textarea.antlers.html
index 12ee900d0e..883e18d2a5 100644
--- a/resources/views/extend/forms/fields/textarea.antlers.html
+++ b/resources/views/extend/forms/fields/textarea.antlers.html
@@ -1,6 +1,7 @@
 <textarea
     name="{{ handle }}"
     rows="5"
+    id="{{ id }}"
     {{ if placeholder }}placeholder="{{ placeholder }}"{{ /if }}
     {{ if character_limit }}maxlength="{{ character_limit }}"{{ /if }}
     {{ if js_driver }}{{ js_attributes }}{{ /if }}
diff --git a/resources/views/extend/forms/fields/toggle.antlers.html b/resources/views/extend/forms/fields/toggle.antlers.html
index 943bb307e2..170b1a66a4 100644
--- a/resources/views/extend/forms/fields/toggle.antlers.html
+++ b/resources/views/extend/forms/fields/toggle.antlers.html
@@ -4,6 +4,7 @@
         type="checkbox"
         name="{{ handle }}"
         value="1"
+        id="{{ id }}"
         {{ if js_driver }}{{ js_attributes }}{{ /if }}
         {{ if value && value !== '0' }}checked{{ /if }}
         {{ if validate|contains:required }}required{{ /if }}

From 8898ef65937503a53332bd985a77dc8fe49a132c Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Tue, 22 Oct 2024 12:11:26 +0200
Subject: [PATCH 03/21] Add unique ids to multi-select inputs

---
 resources/views/extend/forms/fields/checkboxes.antlers.html | 6 ++++++
 resources/views/extend/forms/fields/radio.antlers.html      | 6 ++++++
 2 files changed, 12 insertions(+)

diff --git a/resources/views/extend/forms/fields/checkboxes.antlers.html b/resources/views/extend/forms/fields/checkboxes.antlers.html
index d709da4ead..b14f95400e 100644
--- a/resources/views/extend/forms/fields/checkboxes.antlers.html
+++ b/resources/views/extend/forms/fields/checkboxes.antlers.html
@@ -5,9 +5,15 @@
             type="checkbox"
             name="{{ handle }}[]"
             value="{{ option }}"
+            id="{{ id }}-{{ option | slugify }}-option"
             {{ if js_driver }}{{ js_attributes }}{{ /if }}
             {{ if value|in_array:option }}checked{{ /if }}
             {{ if validate|contains:required }}required{{ /if }}
+            {{ if error }}
+                aria-invalid="true" aria-describedby="{{ id }}-error"
+            {{ elseif instructions }}
+                aria-describedby="{{ id }}-instructions"
+            {{ /if }}
         >
         {{ label !== null ? label : option }}
     </label>
diff --git a/resources/views/extend/forms/fields/radio.antlers.html b/resources/views/extend/forms/fields/radio.antlers.html
index b43998f239..dbd1c4972f 100644
--- a/resources/views/extend/forms/fields/radio.antlers.html
+++ b/resources/views/extend/forms/fields/radio.antlers.html
@@ -4,9 +4,15 @@
             type="radio"
             name="{{ handle }}"
             value="{{ option }}"
+            id="{{ id }}-{{ option | slugify }}-option"
             {{ if js_driver }}{{ js_attributes }}{{ /if }}
             {{ if value == option }}checked{{ /if }}
             {{ if validate|contains:required }}required{{ /if }}
+            {{ if error }}
+                aria-invalid="true" aria-describedby="{{ id }}-error"
+            {{ elseif instructions }}
+                aria-describedby="{{ id }}-instructions"
+            {{ /if }}
         >
         {{ label !== null ? label : option }}
     </label>

From 0da35ea9346203d2accf4cfbe1994d440108d598 Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Tue, 22 Oct 2024 12:12:12 +0200
Subject: [PATCH 04/21] Display field instructions

---
 resources/views/extend/forms/fields.antlers.html | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/resources/views/extend/forms/fields.antlers.html b/resources/views/extend/forms/fields.antlers.html
index a337282246..eed8e0a182 100644
--- a/resources/views/extend/forms/fields.antlers.html
+++ b/resources/views/extend/forms/fields.antlers.html
@@ -2,6 +2,9 @@
     <div class="p-4">
         <label for="{{ id }}">{{ display }}</label>
         <div class="p-2">{{ field }}</div>
+        {{ if instructions }}
+            <p class="text-gray-500" id="{{ id }}-instructions">{{ instructions }}</p>
+        {{ /if }}
         {{ if error }}
             <p class="text-gray-500">{{ error }}</p>
         {{ /if }}

From 06957284c4de28653379b00ae73283cf2b4446ff Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Tue, 22 Oct 2024 12:12:24 +0200
Subject: [PATCH 05/21] Render field error with id and in red

---
 resources/views/extend/forms/fields.antlers.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/views/extend/forms/fields.antlers.html b/resources/views/extend/forms/fields.antlers.html
index eed8e0a182..84de2fab6e 100644
--- a/resources/views/extend/forms/fields.antlers.html
+++ b/resources/views/extend/forms/fields.antlers.html
@@ -6,7 +6,7 @@
             <p class="text-gray-500" id="{{ id }}-instructions">{{ instructions }}</p>
         {{ /if }}
         {{ if error }}
-            <p class="text-gray-500">{{ error }}</p>
+            <p class="text-red-700" id="{{ id }}-error">{{ error }}</p>
         {{ /if }}
     </div>
 {{ /fields }}

From 2c397e0de3c279a9890a7919a92037918ee19d95 Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Tue, 22 Oct 2024 12:12:42 +0200
Subject: [PATCH 06/21] Link fields with instructions and error messages

---
 resources/views/extend/forms/fields/assets.antlers.html     | 5 +++++
 resources/views/extend/forms/fields/default.antlers.html    | 5 +++++
 resources/views/extend/forms/fields/dictionary.antlers.html | 5 +++++
 resources/views/extend/forms/fields/files.antlers.html      | 5 +++++
 resources/views/extend/forms/fields/select.antlers.html     | 5 +++++
 resources/views/extend/forms/fields/text.antlers.html       | 5 +++++
 resources/views/extend/forms/fields/textarea.antlers.html   | 5 +++++
 resources/views/extend/forms/fields/toggle.antlers.html     | 5 +++++
 8 files changed, 40 insertions(+)

diff --git a/resources/views/extend/forms/fields/assets.antlers.html b/resources/views/extend/forms/fields/assets.antlers.html
index 6563a55336..d3a3a6ba30 100644
--- a/resources/views/extend/forms/fields/assets.antlers.html
+++ b/resources/views/extend/forms/fields/assets.antlers.html
@@ -5,4 +5,9 @@
     {{ if js_driver }}{{ js_attributes }}{{ /if }}
     {{ if max_files !== 1 }}multiple{{ /if }}
     {{ if validate|contains:required }}required{{ /if }}
+    {{ if error }}
+        aria-invalid="true" aria-describedby="{{ id }}-error"
+    {{ elseif instructions }}
+        aria-describedby="{{ id }}-instructions"
+    {{ /if }}
 >
diff --git a/resources/views/extend/forms/fields/default.antlers.html b/resources/views/extend/forms/fields/default.antlers.html
index 87b2d545fa..79ceb4864c 100644
--- a/resources/views/extend/forms/fields/default.antlers.html
+++ b/resources/views/extend/forms/fields/default.antlers.html
@@ -7,4 +7,9 @@
     {{ if character_limit }}maxlength="{{ character_limit }}"{{ /if }}
     {{ if js_driver }}{{ js_attributes }}{{ /if }}
     {{ if validate|contains:required }}required{{ /if }}
+    {{ if error }}
+        aria-invalid="true" aria-describedby="{{ id }}-error"
+    {{ elseif instructions }}
+        aria-describedby="{{ id }}-instructions"
+    {{ /if }}
 >
diff --git a/resources/views/extend/forms/fields/dictionary.antlers.html b/resources/views/extend/forms/fields/dictionary.antlers.html
index a6a5d74777..244aea45c5 100644
--- a/resources/views/extend/forms/fields/dictionary.antlers.html
+++ b/resources/views/extend/forms/fields/dictionary.antlers.html
@@ -4,6 +4,11 @@
     {{ if js_driver }}{{ js_attributes }}{{ /if }}
     {{ if multiple }}multiple{{ /if }}
     {{ if validate|contains:required }}required{{ /if }}
+    {{ if error }}
+        aria-invalid="true" aria-describedby="{{ id }}-error"
+    {{ elseif instructions }}
+        aria-describedby="{{ id }}-instructions"
+    {{ /if }}
 >
     {{ unless multiple }}
         <option value>
diff --git a/resources/views/extend/forms/fields/files.antlers.html b/resources/views/extend/forms/fields/files.antlers.html
index 6563a55336..d3a3a6ba30 100644
--- a/resources/views/extend/forms/fields/files.antlers.html
+++ b/resources/views/extend/forms/fields/files.antlers.html
@@ -5,4 +5,9 @@
     {{ if js_driver }}{{ js_attributes }}{{ /if }}
     {{ if max_files !== 1 }}multiple{{ /if }}
     {{ if validate|contains:required }}required{{ /if }}
+    {{ if error }}
+        aria-invalid="true" aria-describedby="{{ id }}-error"
+    {{ elseif instructions }}
+        aria-describedby="{{ id }}-instructions"
+    {{ /if }}
 >
diff --git a/resources/views/extend/forms/fields/select.antlers.html b/resources/views/extend/forms/fields/select.antlers.html
index a6a5d74777..244aea45c5 100644
--- a/resources/views/extend/forms/fields/select.antlers.html
+++ b/resources/views/extend/forms/fields/select.antlers.html
@@ -4,6 +4,11 @@
     {{ if js_driver }}{{ js_attributes }}{{ /if }}
     {{ if multiple }}multiple{{ /if }}
     {{ if validate|contains:required }}required{{ /if }}
+    {{ if error }}
+        aria-invalid="true" aria-describedby="{{ id }}-error"
+    {{ elseif instructions }}
+        aria-describedby="{{ id }}-instructions"
+    {{ /if }}
 >
     {{ unless multiple }}
         <option value>
diff --git a/resources/views/extend/forms/fields/text.antlers.html b/resources/views/extend/forms/fields/text.antlers.html
index eec2d8f30d..2ae072024a 100644
--- a/resources/views/extend/forms/fields/text.antlers.html
+++ b/resources/views/extend/forms/fields/text.antlers.html
@@ -8,4 +8,9 @@
     {{ if autocomplete }}autocomplete="{{ autocomplete }}"{{ /if }}
     {{ if js_driver }}{{ js_attributes }}{{ /if }}
     {{ if validate|contains:required }}required{{ /if }}
+    {{ if error }}
+        aria-invalid="true" aria-describedby="{{ id }}-error"
+    {{ elseif instructions }}
+        aria-describedby="{{ id }}-instructions"
+    {{ /if }}
 >
diff --git a/resources/views/extend/forms/fields/textarea.antlers.html b/resources/views/extend/forms/fields/textarea.antlers.html
index 883e18d2a5..b946f2f580 100644
--- a/resources/views/extend/forms/fields/textarea.antlers.html
+++ b/resources/views/extend/forms/fields/textarea.antlers.html
@@ -6,6 +6,11 @@
     {{ if character_limit }}maxlength="{{ character_limit }}"{{ /if }}
     {{ if js_driver }}{{ js_attributes }}{{ /if }}
     {{ if validate|contains:required }}required{{ /if }}
+    {{ if error }}
+        aria-invalid="true" aria-describedby="{{ id }}-error"
+    {{ elseif instructions }}
+        aria-describedby="{{ id }}-instructions"
+    {{ /if }}
 >
     {{ value }}
 </textarea>
diff --git a/resources/views/extend/forms/fields/toggle.antlers.html b/resources/views/extend/forms/fields/toggle.antlers.html
index 170b1a66a4..b7f717adf0 100644
--- a/resources/views/extend/forms/fields/toggle.antlers.html
+++ b/resources/views/extend/forms/fields/toggle.antlers.html
@@ -8,6 +8,11 @@
         {{ if js_driver }}{{ js_attributes }}{{ /if }}
         {{ if value && value !== '0' }}checked{{ /if }}
         {{ if validate|contains:required }}required{{ /if }}
+        {{ if error }}
+            aria-invalid="true" aria-describedby="{{ id }}-error"
+        {{ elseif instructions }}
+            aria-describedby="{{ id }}-instructions"
+        {{ /if }}
     >
     {{ if inline_label }}
         {{ inline_label }}

From de1617d354109078dbe768bfc5fc9810862de73e Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Tue, 22 Oct 2024 12:15:56 +0200
Subject: [PATCH 07/21] Mark up required fields with aria label

---
 resources/views/extend/forms/fields.antlers.html | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/resources/views/extend/forms/fields.antlers.html b/resources/views/extend/forms/fields.antlers.html
index 84de2fab6e..140c41c90a 100644
--- a/resources/views/extend/forms/fields.antlers.html
+++ b/resources/views/extend/forms/fields.antlers.html
@@ -1,6 +1,11 @@
 {{ fields }}
     <div class="p-4">
-        <label for="{{ id }}">{{ display }}</label>
+        <label for="{{ id }}">
+            {{ display }}
+            {{ if validate | contains:required }}
+                <sup aria-label="{{ trans:Required }}">*</sup>
+            {{ /if }}
+        </label>
         <div class="p-2">{{ field }}</div>
         {{ if instructions }}
             <p class="text-gray-500" id="{{ id }}-instructions">{{ instructions }}</p>

From 3f90cdf87214c4aafb553842a34c8a6fe2889e22 Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Tue, 22 Oct 2024 17:57:45 +0200
Subject: [PATCH 08/21] Collect errors with field handles

---
 src/Tags/Concerns/GetsFormSession.php | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/src/Tags/Concerns/GetsFormSession.php b/src/Tags/Concerns/GetsFormSession.php
index 8bd6c443b3..93258d6656 100644
--- a/src/Tags/Concerns/GetsFormSession.php
+++ b/src/Tags/Concerns/GetsFormSession.php
@@ -19,6 +19,7 @@ protected function getFormSession($formName = 'default')
         $data['errors'] = $errors ? $errors->all() : [];
         $data['error'] = $errors ? $this->getFirstErrorForEachField($errors) : [];
         $data['success'] = $this->getFromFormSession($formName, 'success');
+        $data['field_errors'] = $errors ? $this->getErrorsWithFieldHandles($errors) : [];
 
         // Only include this boolean if it's actually passed in session;
         // It will be for form submissions, but not for user login/register submissions.
@@ -51,6 +52,27 @@ protected function getFromFormSession($formName, $key)
         );
     }
 
+    /**
+     * Get errors, associated with the field name for templating.
+     *
+     * @param  \Illuminate\Support\MessageBag  $messageBag
+     * @return array
+     */
+    protected function getErrorsWithFieldHandles($messageBag)
+    {
+        return collect($messageBag->messages())
+            ->map(function ($errors, $field) {
+                return collect($errors)
+                    ->map(fn ($error) => [
+                        'field' => $field,
+                        'value' => $error,
+                    ])
+                    ->all();
+            })
+            ->flatten(1)
+            ->all();
+    }
+
     /**
      * Get first error for each field.
      *

From 69617f918a58d09ed6c1ef5d9d16482c1fb3e2bc Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Tue, 22 Oct 2024 18:16:17 +0200
Subject: [PATCH 09/21] Account for fields without forms

---
 src/Tags/Concerns/RendersForms.php | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/Tags/Concerns/RendersForms.php b/src/Tags/Concerns/RendersForms.php
index 47ca921fc5..b1bfc66a49 100644
--- a/src/Tags/Concerns/RendersForms.php
+++ b/src/Tags/Concerns/RendersForms.php
@@ -142,7 +142,7 @@ protected function getRenderableField($field, $errorBag = 'default', $manipulate
             ->filter()->all();
 
         $data = array_merge($configDefaults, $field->toArray(), [
-            'id' => $field->form()->handle().'-form-' . $field->handle().'-field',
+            'id' => $this->generateFieldId($field->form()?->handle(), $field->handle()),
             'instructions' => $field->instructions(),
             'error' => $errors->first($field->handle()) ?: null,
             'default' => $field->value() ?? $field->defaultValue(),
@@ -175,4 +175,12 @@ protected function minifyFieldHtml($html)
 
         return $html;
     }
+
+    /**
+     * Generate a field id to associate input with label.
+     */
+    protected function generateFieldId(?string $formName, ?string $fieldHandle): string
+    {
+        return $formName.'-form-'.$fieldHandle.'-field';
+    }
 }

From 69a80519150c9c4d1d905546ab2ef16e1ebcf42d Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Tue, 22 Oct 2024 18:16:38 +0200
Subject: [PATCH 10/21] Render form errors with additional context

---
 src/Forms/Tags.php | 27 +++++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/Forms/Tags.php b/src/Forms/Tags.php
index aeab4fdd24..af8093b365 100644
--- a/src/Forms/Tags.php
+++ b/src/Forms/Tags.php
@@ -68,6 +68,8 @@ public function create()
 
         $jsDriver = $this->parseJsParamDriverAndOptions($this->params->get('js'), $form);
 
+        $data['errors'] = $this->getErrors();
+
         $data['form_config'] = ($configFields = Form::extraConfigFor($form->handle()))
             ? Blueprint::makeFromTabs($configFields)->fields()->addValues($form->data()->all())->values()->all()
             : [];
@@ -142,18 +144,31 @@ public function create()
      */
     public function errors()
     {
-        $sessionHandle = $this->sessionHandle();
-
-        $errors = $this->getFormSession($sessionHandle)['errors'];
+        $errors = $this->getErrors();
 
         // If this is a single tag just output a boolean.
         if ($this->content === '') {
             return ! empty($errors);
         }
 
-        return $this->parseLoop(collect($errors)->map(function ($error) {
-            return ['value' => $error];
-        }));
+        return $this->parseLoop($errors);
+    }
+
+    /**
+     * Get errors for the current submission, with field name and id.
+     *
+     * @return array
+     */
+    public function getErrors()
+    {
+        $formHandle = $this->getForm();
+        $sessionHandle = $this->sessionHandle();
+
+        $errors = $this->getFormSession($sessionHandle)['field_errors'];
+
+        return collect($errors)
+            ->map(fn ($error) => [...$error, 'id' => $this->generateFieldId($formHandle, $error['field'])])
+            ->all();
     }
 
     /**

From b7caca747a5e5c0eb06aa2ae6b1a95069b9a243b Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Tue, 22 Oct 2024 18:31:33 +0200
Subject: [PATCH 11/21] Remove error rendering additions

---
 src/Forms/Tags.php                    | 27 ++++++---------------------
 src/Tags/Concerns/GetsFormSession.php | 22 ----------------------
 2 files changed, 6 insertions(+), 43 deletions(-)

diff --git a/src/Forms/Tags.php b/src/Forms/Tags.php
index af8093b365..aeab4fdd24 100644
--- a/src/Forms/Tags.php
+++ b/src/Forms/Tags.php
@@ -68,8 +68,6 @@ public function create()
 
         $jsDriver = $this->parseJsParamDriverAndOptions($this->params->get('js'), $form);
 
-        $data['errors'] = $this->getErrors();
-
         $data['form_config'] = ($configFields = Form::extraConfigFor($form->handle()))
             ? Blueprint::makeFromTabs($configFields)->fields()->addValues($form->data()->all())->values()->all()
             : [];
@@ -144,31 +142,18 @@ public function create()
      */
     public function errors()
     {
-        $errors = $this->getErrors();
+        $sessionHandle = $this->sessionHandle();
+
+        $errors = $this->getFormSession($sessionHandle)['errors'];
 
         // If this is a single tag just output a boolean.
         if ($this->content === '') {
             return ! empty($errors);
         }
 
-        return $this->parseLoop($errors);
-    }
-
-    /**
-     * Get errors for the current submission, with field name and id.
-     *
-     * @return array
-     */
-    public function getErrors()
-    {
-        $formHandle = $this->getForm();
-        $sessionHandle = $this->sessionHandle();
-
-        $errors = $this->getFormSession($sessionHandle)['field_errors'];
-
-        return collect($errors)
-            ->map(fn ($error) => [...$error, 'id' => $this->generateFieldId($formHandle, $error['field'])])
-            ->all();
+        return $this->parseLoop(collect($errors)->map(function ($error) {
+            return ['value' => $error];
+        }));
     }
 
     /**
diff --git a/src/Tags/Concerns/GetsFormSession.php b/src/Tags/Concerns/GetsFormSession.php
index 93258d6656..8bd6c443b3 100644
--- a/src/Tags/Concerns/GetsFormSession.php
+++ b/src/Tags/Concerns/GetsFormSession.php
@@ -19,7 +19,6 @@ protected function getFormSession($formName = 'default')
         $data['errors'] = $errors ? $errors->all() : [];
         $data['error'] = $errors ? $this->getFirstErrorForEachField($errors) : [];
         $data['success'] = $this->getFromFormSession($formName, 'success');
-        $data['field_errors'] = $errors ? $this->getErrorsWithFieldHandles($errors) : [];
 
         // Only include this boolean if it's actually passed in session;
         // It will be for form submissions, but not for user login/register submissions.
@@ -52,27 +51,6 @@ protected function getFromFormSession($formName, $key)
         );
     }
 
-    /**
-     * Get errors, associated with the field name for templating.
-     *
-     * @param  \Illuminate\Support\MessageBag  $messageBag
-     * @return array
-     */
-    protected function getErrorsWithFieldHandles($messageBag)
-    {
-        return collect($messageBag->messages())
-            ->map(function ($errors, $field) {
-                return collect($errors)
-                    ->map(fn ($error) => [
-                        'field' => $field,
-                        'value' => $error,
-                    ])
-                    ->all();
-            })
-            ->flatten(1)
-            ->all();
-    }
-
     /**
      * Get first error for each field.
      *

From 5a5272cd2cc1660f0e6e0ce0c1bbf394c80a45d5 Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Tue, 22 Oct 2024 18:34:09 +0200
Subject: [PATCH 12/21] Display id first

---
 resources/views/extend/forms/fields/assets.antlers.html     | 2 +-
 resources/views/extend/forms/fields/checkboxes.antlers.html | 2 +-
 resources/views/extend/forms/fields/default.antlers.html    | 2 +-
 resources/views/extend/forms/fields/dictionary.antlers.html | 2 +-
 resources/views/extend/forms/fields/files.antlers.html      | 2 +-
 resources/views/extend/forms/fields/radio.antlers.html      | 2 +-
 resources/views/extend/forms/fields/select.antlers.html     | 2 +-
 resources/views/extend/forms/fields/text.antlers.html       | 2 +-
 resources/views/extend/forms/fields/textarea.antlers.html   | 2 +-
 resources/views/extend/forms/fields/toggle.antlers.html     | 2 +-
 10 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/resources/views/extend/forms/fields/assets.antlers.html b/resources/views/extend/forms/fields/assets.antlers.html
index d3a3a6ba30..3b5e1d1ea5 100644
--- a/resources/views/extend/forms/fields/assets.antlers.html
+++ b/resources/views/extend/forms/fields/assets.antlers.html
@@ -1,7 +1,7 @@
 <input
+    id="{{ id }}"
     type="file"
     name="{{ handle }}{{ if max_files !== 1 }}[]{{ /if }}"
-    id="{{ id }}"
     {{ if js_driver }}{{ js_attributes }}{{ /if }}
     {{ if max_files !== 1 }}multiple{{ /if }}
     {{ if validate|contains:required }}required{{ /if }}
diff --git a/resources/views/extend/forms/fields/checkboxes.antlers.html b/resources/views/extend/forms/fields/checkboxes.antlers.html
index b14f95400e..0da954838d 100644
--- a/resources/views/extend/forms/fields/checkboxes.antlers.html
+++ b/resources/views/extend/forms/fields/checkboxes.antlers.html
@@ -2,10 +2,10 @@
 {{ foreach:options as="option|label" }}
     <label>
         <input
+            id="{{ id }}-{{ option | slugify }}-option"
             type="checkbox"
             name="{{ handle }}[]"
             value="{{ option }}"
-            id="{{ id }}-{{ option | slugify }}-option"
             {{ if js_driver }}{{ js_attributes }}{{ /if }}
             {{ if value|in_array:option }}checked{{ /if }}
             {{ if validate|contains:required }}required{{ /if }}
diff --git a/resources/views/extend/forms/fields/default.antlers.html b/resources/views/extend/forms/fields/default.antlers.html
index 79ceb4864c..3dca941586 100644
--- a/resources/views/extend/forms/fields/default.antlers.html
+++ b/resources/views/extend/forms/fields/default.antlers.html
@@ -1,8 +1,8 @@
 <input
+    id="{{ id }}"
     type="{{ input_type ?? 'text' }}"
     name="{{ handle }}"
     value="{{ value }}"
-    id="{{ id }}"
     {{ if placeholder }}placeholder="{{ placeholder }}"{{ /if }}
     {{ if character_limit }}maxlength="{{ character_limit }}"{{ /if }}
     {{ if js_driver }}{{ js_attributes }}{{ /if }}
diff --git a/resources/views/extend/forms/fields/dictionary.antlers.html b/resources/views/extend/forms/fields/dictionary.antlers.html
index 244aea45c5..c248b565d8 100644
--- a/resources/views/extend/forms/fields/dictionary.antlers.html
+++ b/resources/views/extend/forms/fields/dictionary.antlers.html
@@ -1,6 +1,6 @@
 <select
-    name="{{ handle }}{{ multiple ?= "[]" }}"
     id="{{ id }}"
+    name="{{ handle }}{{ multiple ?= "[]" }}"
     {{ if js_driver }}{{ js_attributes }}{{ /if }}
     {{ if multiple }}multiple{{ /if }}
     {{ if validate|contains:required }}required{{ /if }}
diff --git a/resources/views/extend/forms/fields/files.antlers.html b/resources/views/extend/forms/fields/files.antlers.html
index d3a3a6ba30..3b5e1d1ea5 100644
--- a/resources/views/extend/forms/fields/files.antlers.html
+++ b/resources/views/extend/forms/fields/files.antlers.html
@@ -1,7 +1,7 @@
 <input
+    id="{{ id }}"
     type="file"
     name="{{ handle }}{{ if max_files !== 1 }}[]{{ /if }}"
-    id="{{ id }}"
     {{ if js_driver }}{{ js_attributes }}{{ /if }}
     {{ if max_files !== 1 }}multiple{{ /if }}
     {{ if validate|contains:required }}required{{ /if }}
diff --git a/resources/views/extend/forms/fields/radio.antlers.html b/resources/views/extend/forms/fields/radio.antlers.html
index dbd1c4972f..797e53ea5d 100644
--- a/resources/views/extend/forms/fields/radio.antlers.html
+++ b/resources/views/extend/forms/fields/radio.antlers.html
@@ -1,10 +1,10 @@
 {{ foreach:options as="option|label" }}
     <label>
         <input
+            id="{{ id }}-{{ option | slugify }}-option"
             type="radio"
             name="{{ handle }}"
             value="{{ option }}"
-            id="{{ id }}-{{ option | slugify }}-option"
             {{ if js_driver }}{{ js_attributes }}{{ /if }}
             {{ if value == option }}checked{{ /if }}
             {{ if validate|contains:required }}required{{ /if }}
diff --git a/resources/views/extend/forms/fields/select.antlers.html b/resources/views/extend/forms/fields/select.antlers.html
index 244aea45c5..c248b565d8 100644
--- a/resources/views/extend/forms/fields/select.antlers.html
+++ b/resources/views/extend/forms/fields/select.antlers.html
@@ -1,6 +1,6 @@
 <select
-    name="{{ handle }}{{ multiple ?= "[]" }}"
     id="{{ id }}"
+    name="{{ handle }}{{ multiple ?= "[]" }}"
     {{ if js_driver }}{{ js_attributes }}{{ /if }}
     {{ if multiple }}multiple{{ /if }}
     {{ if validate|contains:required }}required{{ /if }}
diff --git a/resources/views/extend/forms/fields/text.antlers.html b/resources/views/extend/forms/fields/text.antlers.html
index 2ae072024a..2e84daaae0 100644
--- a/resources/views/extend/forms/fields/text.antlers.html
+++ b/resources/views/extend/forms/fields/text.antlers.html
@@ -1,8 +1,8 @@
 <input
+    id="{{ id }}"
     type="{{ input_type ?? 'text' }}"
     name="{{ handle }}"
     value="{{ value }}"
-    id="{{ id }}"
     {{ if placeholder }}placeholder="{{ placeholder }}"{{ /if }}
     {{ if character_limit }}maxlength="{{ character_limit }}"{{ /if }}
     {{ if autocomplete }}autocomplete="{{ autocomplete }}"{{ /if }}
diff --git a/resources/views/extend/forms/fields/textarea.antlers.html b/resources/views/extend/forms/fields/textarea.antlers.html
index b946f2f580..6f3a2ca8d0 100644
--- a/resources/views/extend/forms/fields/textarea.antlers.html
+++ b/resources/views/extend/forms/fields/textarea.antlers.html
@@ -1,7 +1,7 @@
 <textarea
+    id="{{ id }}"
     name="{{ handle }}"
     rows="5"
-    id="{{ id }}"
     {{ if placeholder }}placeholder="{{ placeholder }}"{{ /if }}
     {{ if character_limit }}maxlength="{{ character_limit }}"{{ /if }}
     {{ if js_driver }}{{ js_attributes }}{{ /if }}
diff --git a/resources/views/extend/forms/fields/toggle.antlers.html b/resources/views/extend/forms/fields/toggle.antlers.html
index b7f717adf0..3711fba821 100644
--- a/resources/views/extend/forms/fields/toggle.antlers.html
+++ b/resources/views/extend/forms/fields/toggle.antlers.html
@@ -1,10 +1,10 @@
 <label>
     <input type="hidden" name="{{ handle }}" value="0">
     <input
+        id="{{ id }}"
         type="checkbox"
         name="{{ handle }}"
         value="1"
-        id="{{ id }}"
         {{ if js_driver }}{{ js_attributes }}{{ /if }}
         {{ if value && value !== '0' }}checked{{ /if }}
         {{ if validate|contains:required }}required{{ /if }}

From a0de4d0a4a272e49bacc9ba7e7ee6ef7d8619efb Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Tue, 22 Oct 2024 19:02:37 +0200
Subject: [PATCH 13/21] Use session handle as fallback form handle

---
 src/Tags/Concerns/RendersForms.php | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/Tags/Concerns/RendersForms.php b/src/Tags/Concerns/RendersForms.php
index b1bfc66a49..58141c0069 100644
--- a/src/Tags/Concerns/RendersForms.php
+++ b/src/Tags/Concerns/RendersForms.php
@@ -141,8 +141,9 @@ protected function getRenderableField($field, $errorBag = 'default', $manipulate
             ->map->get('default')
             ->filter()->all();
 
+        $formHandle = $field->form()?->handle() ?? Str::slug($errorBag);
         $data = array_merge($configDefaults, $field->toArray(), [
-            'id' => $this->generateFieldId($field->form()?->handle(), $field->handle()),
+            'id' => $this->generateFieldId($formHandle, $field->handle()),
             'instructions' => $field->instructions(),
             'error' => $errors->first($field->handle()) ?: null,
             'default' => $field->value() ?? $field->defaultValue(),

From 354660f9ff90ba9b905e93b1b02acd982269b298 Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Wed, 23 Oct 2024 17:38:57 +0200
Subject: [PATCH 14/21] Reorder params of field id helper

---
 src/Tags/Concerns/RendersForms.php | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Tags/Concerns/RendersForms.php b/src/Tags/Concerns/RendersForms.php
index 58141c0069..2386ee64be 100644
--- a/src/Tags/Concerns/RendersForms.php
+++ b/src/Tags/Concerns/RendersForms.php
@@ -143,7 +143,7 @@ protected function getRenderableField($field, $errorBag = 'default', $manipulate
 
         $formHandle = $field->form()?->handle() ?? Str::slug($errorBag);
         $data = array_merge($configDefaults, $field->toArray(), [
-            'id' => $this->generateFieldId($formHandle, $field->handle()),
+            'id' => $this->generateFieldId($field->handle(), $formHandle),
             'instructions' => $field->instructions(),
             'error' => $errors->first($field->handle()) ?: null,
             'default' => $field->value() ?? $field->defaultValue(),
@@ -180,8 +180,8 @@ protected function minifyFieldHtml($html)
     /**
      * Generate a field id to associate input with label.
      */
-    protected function generateFieldId(?string $formName, ?string $fieldHandle): string
+    protected function generateFieldId(string $fieldHandle, ?string $formName = null): string
     {
-        return $formName.'-form-'.$fieldHandle.'-field';
+        return ($formName ?? 'default').'-form-'.$fieldHandle.'-field';
     }
 }

From 08e8984a466dbe9201ca2bb0fff5b004c12e99ce Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Wed, 23 Oct 2024 17:39:17 +0200
Subject: [PATCH 15/21] Update form render test markup

---
 tests/Tags/Form/FormCreateAlpineTest.php | 44 ++++++-------
 tests/Tags/Form/FormCreateTest.php       | 82 ++++++++++++------------
 2 files changed, 63 insertions(+), 63 deletions(-)

diff --git a/tests/Tags/Form/FormCreateAlpineTest.php b/tests/Tags/Form/FormCreateAlpineTest.php
index 2e50cb9ec7..5af7e50592 100644
--- a/tests/Tags/Form/FormCreateAlpineTest.php
+++ b/tests/Tags/Form/FormCreateAlpineTest.php
@@ -297,8 +297,8 @@ public function it_dynamically_renders_text_field_x_model()
             ],
         ];
 
-        $this->assertFieldRendersHtml(['<input type="text" name="name" value="" x-model="name">'], $config, [], ['js' => 'alpine']);
-        $this->assertFieldRendersHtml(['<input type="text" name="name" value="" x-model="my_form.name">'], $config, [], ['js' => 'alpine:my_form']);
+        $this->assertFieldRendersHtml(['<input id="default-form-name-field" type="text" name="name" value="" x-model="name">'], $config, [], ['js' => 'alpine']);
+        $this->assertFieldRendersHtml(['<input id="default-form-name-field" type="text" name="name" value="" x-model="my_form.name">'], $config, [], ['js' => 'alpine:my_form']);
     }
 
     #[Test]
@@ -311,8 +311,8 @@ public function it_dynamically_renders_textarea_field_x_model()
             ],
         ];
 
-        $this->assertFieldRendersHtml(['<textarea name="comment" rows="5" x-model="comment"></textarea>'], $config, [], ['js' => 'alpine']);
-        $this->assertFieldRendersHtml(['<textarea name="comment" rows="5" x-model="my_form.comment"></textarea>'], $config, [], ['js' => 'alpine:my_form']);
+        $this->assertFieldRendersHtml(['<textarea id="default-form-comment-field" name="comment" rows="5" x-model="comment"></textarea>'], $config, [], ['js' => 'alpine']);
+        $this->assertFieldRendersHtml(['<textarea id="default-form-comment-field" name="comment" rows="5" x-model="my_form.comment"></textarea>'], $config, [], ['js' => 'alpine:my_form']);
     }
 
     #[Test]
@@ -330,13 +330,13 @@ public function it_dynamically_renders_checkboxes_field_x_model()
             ],
         ];
 
-        $this->assertFieldRendersHtml(['<input type="checkbox" name="fav_animals[]" value="cat" x-model="fav_animals">'], $config, [], ['js' => 'alpine']);
-        $this->assertFieldRendersHtml(['<input type="checkbox" name="fav_animals[]" value="rat" x-model="fav_animals">'], $config, [], ['js' => 'alpine']);
-        $this->assertFieldRendersHtml(['<input type="checkbox" name="fav_animals[]" value="armadillo" x-model="fav_animals">'], $config, [], ['js' => 'alpine']);
+        $this->assertFieldRendersHtml(['<input id="default-form-fav_animals-field-cat-option" type="checkbox" name="fav_animals[]" value="cat" x-model="fav_animals">'], $config, [], ['js' => 'alpine']);
+        $this->assertFieldRendersHtml(['<input id="default-form-fav_animals-field-rat-option" type="checkbox" name="fav_animals[]" value="rat" x-model="fav_animals">'], $config, [], ['js' => 'alpine']);
+        $this->assertFieldRendersHtml(['<input id="default-form-fav_animals-field-armadillo-option" type="checkbox" name="fav_animals[]" value="armadillo" x-model="fav_animals">'], $config, [], ['js' => 'alpine']);
 
-        $this->assertFieldRendersHtml(['<input type="checkbox" name="fav_animals[]" value="cat" x-model="my_form.fav_animals">'], $config, [], ['js' => 'alpine:my_form']);
-        $this->assertFieldRendersHtml(['<input type="checkbox" name="fav_animals[]" value="rat" x-model="my_form.fav_animals">'], $config, [], ['js' => 'alpine:my_form']);
-        $this->assertFieldRendersHtml(['<input type="checkbox" name="fav_animals[]" value="armadillo" x-model="my_form.fav_animals">'], $config, [], ['js' => 'alpine:my_form']);
+        $this->assertFieldRendersHtml(['<input id="default-form-fav_animals-field-cat-option" type="checkbox" name="fav_animals[]" value="cat" x-model="my_form.fav_animals">'], $config, [], ['js' => 'alpine:my_form']);
+        $this->assertFieldRendersHtml(['<input id="default-form-fav_animals-field-rat-option" type="checkbox" name="fav_animals[]" value="rat" x-model="my_form.fav_animals">'], $config, [], ['js' => 'alpine:my_form']);
+        $this->assertFieldRendersHtml(['<input id="default-form-fav_animals-field-armadillo-option" type="checkbox" name="fav_animals[]" value="armadillo" x-model="my_form.fav_animals">'], $config, [], ['js' => 'alpine:my_form']);
     }
 
     #[Test]
@@ -354,13 +354,13 @@ public function it_dynamically_renders_radio_field_x_model()
             ],
         ];
 
-        $this->assertFieldRendersHtml(['<input type="radio" name="fav_animal" value="cat" x-model="fav_animal">'], $config, [], ['js' => 'alpine']);
-        $this->assertFieldRendersHtml(['<input type="radio" name="fav_animal" value="rat" x-model="fav_animal">'], $config, [], ['js' => 'alpine']);
-        $this->assertFieldRendersHtml(['<input type="radio" name="fav_animal" value="armadillo" x-model="fav_animal">'], $config, [], ['js' => 'alpine']);
+        $this->assertFieldRendersHtml(['<input id="default-form-fav_animal-field-cat-option" type="radio" name="fav_animal" value="cat" x-model="fav_animal">'], $config, [], ['js' => 'alpine']);
+        $this->assertFieldRendersHtml(['<input id="default-form-fav_animal-field-rat-option" type="radio" name="fav_animal" value="rat" x-model="fav_animal">'], $config, [], ['js' => 'alpine']);
+        $this->assertFieldRendersHtml(['<input id="default-form-fav_animal-field-armadillo-option" type="radio" name="fav_animal" value="armadillo" x-model="fav_animal">'], $config, [], ['js' => 'alpine']);
 
-        $this->assertFieldRendersHtml(['<input type="radio" name="fav_animal" value="cat" x-model="my_form.fav_animal">'], $config, [], ['js' => 'alpine:my_form']);
-        $this->assertFieldRendersHtml(['<input type="radio" name="fav_animal" value="rat" x-model="my_form.fav_animal">'], $config, [], ['js' => 'alpine:my_form']);
-        $this->assertFieldRendersHtml(['<input type="radio" name="fav_animal" value="armadillo" x-model="my_form.fav_animal">'], $config, [], ['js' => 'alpine:my_form']);
+        $this->assertFieldRendersHtml(['<input id="default-form-fav_animal-field-cat-option" type="radio" name="fav_animal" value="cat" x-model="my_form.fav_animal">'], $config, [], ['js' => 'alpine:my_form']);
+        $this->assertFieldRendersHtml(['<input id="default-form-fav_animal-field-rat-option" type="radio" name="fav_animal" value="rat" x-model="my_form.fav_animal">'], $config, [], ['js' => 'alpine:my_form']);
+        $this->assertFieldRendersHtml(['<input id="default-form-fav_animal-field-armadillo-option" type="radio" name="fav_animal" value="armadillo" x-model="my_form.fav_animal">'], $config, [], ['js' => 'alpine:my_form']);
     }
 
     #[Test]
@@ -379,7 +379,7 @@ public function it_dynamically_renders_select_field_x_model()
         ];
 
         $expected = [
-            '<select name="favourite_animal" x-model="favourite_animal">',
+            '<select id="default-form-favourite_animal-field" name="favourite_animal" x-model="favourite_animal">',
             '<option value>Please select...</option>',
             '<option value="cat">Cat</option>',
             '<option value="armadillo">Armadillo</option>',
@@ -390,7 +390,7 @@ public function it_dynamically_renders_select_field_x_model()
         $this->assertFieldRendersHtml($expected, $config, [], ['js' => 'alpine']);
 
         $expectedScoped = [
-            '<select name="favourite_animal" x-model="my_form.favourite_animal">',
+            '<select id="default-form-favourite_animal-field" name="favourite_animal" x-model="my_form.favourite_animal">',
             '<option value>Please select...</option>',
             '<option value="cat">Cat</option>',
             '<option value="armadillo">Armadillo</option>',
@@ -413,8 +413,8 @@ public function it_dynamically_renders_asset_field_x_model()
             ],
         ];
 
-        $this->assertFieldRendersHtml('<input type="file" name="cat_selfie" x-model="cat_selfie">', $config, [], ['js' => 'alpine']);
-        $this->assertFieldRendersHtml('<input type="file" name="cat_selfie" x-model="my_form.cat_selfie">', $config, [], ['js' => 'alpine:my_form']);
+        $this->assertFieldRendersHtml('<input id="default-form-cat_selfie-field" type="file" name="cat_selfie" x-model="cat_selfie">', $config, [], ['js' => 'alpine']);
+        $this->assertFieldRendersHtml('<input id="default-form-cat_selfie-field" type="file" name="cat_selfie" x-model="my_form.cat_selfie">', $config, [], ['js' => 'alpine:my_form']);
     }
 
     #[Test]
@@ -427,8 +427,8 @@ public function it_dynamically_renders_field_with_fallback_to_default_partial_x_
             ],
         ];
 
-        $this->assertFieldRendersHtml('<input type="text" name="custom" value="" x-model="custom">', $config, [], ['js' => 'alpine']);
-        $this->assertFieldRendersHtml('<input type="text" name="custom" value="" x-model="my_form.custom">', $config, [], ['js' => 'alpine:my_form']);
+        $this->assertFieldRendersHtml('<input id="default-form-custom-field" type="text" name="custom" value="" x-model="custom">', $config, [], ['js' => 'alpine']);
+        $this->assertFieldRendersHtml('<input id="default-form-custom-field" type="text" name="custom" value="" x-model="my_form.custom">', $config, [], ['js' => 'alpine:my_form']);
     }
 
     #[Test]
diff --git a/tests/Tags/Form/FormCreateTest.php b/tests/Tags/Form/FormCreateTest.php
index 82d722065c..b4e69d07e8 100644
--- a/tests/Tags/Form/FormCreateTest.php
+++ b/tests/Tags/Form/FormCreateTest.php
@@ -65,9 +65,9 @@ public function it_dynamically_renders_fields_array()
 EOT
         ));
 
-        $this->assertStringContainsString('<label>Full Name</label><input type="text" name="name" value="">', $output);
-        $this->assertStringContainsString('<label>Email Address</label><input type="email" name="email" value="" required>', $output);
-        $this->assertStringContainsString('<label>Message</label><textarea name="message" rows="5" required></textarea>', $output);
+        $this->assertStringContainsString('<label>Full Name</label><input id="contact-form-name-input" type="text" name="name" value="">', $output);
+        $this->assertStringContainsString('<label>Email Address</label><input id="contact-form-email-input" type="email" name="email" value="" required>', $output);
+        $this->assertStringContainsString('<label>Message</label><textarea id="contact-form-message-input" name="message" rows="5" required></textarea>', $output);
 
         preg_match_all('/<label>(.+)<\/label>/U', $output, $fieldOrder);
 
@@ -78,7 +78,7 @@ public function it_dynamically_renders_fields_array()
     public function it_dynamically_renders_text_field()
     {
         $this->assertFieldRendersHtml([
-            '<input type="text" name="favourite_animal" value="">',
+            '<input id="default-form-favourite_animal-field" type="text" name="favourite_animal" value="">',
         ], [
             'handle' => 'favourite_animal',
             'field' => [
@@ -87,7 +87,7 @@ public function it_dynamically_renders_text_field()
         ]);
 
         $this->assertFieldRendersHtml([
-            '<input type="text" name="favourite_animal" value="buffalo">',
+            '<input id="default-form-favourite_animal-field" type="text" name="favourite_animal" value="buffalo">',
         ], [
             'handle' => 'favourite_animal',
             'field' => [
@@ -102,7 +102,7 @@ public function it_dynamically_renders_text_field()
     public function it_dynamically_renders_text_field_with_custom_input_type()
     {
         $this->assertFieldRendersHtml([
-            '<input type="number" name="age" value="">',
+            '<input id="default-form-age-field" type="number" name="age" value="">',
         ], [
             'handle' => 'age',
             'field' => [
@@ -112,7 +112,7 @@ public function it_dynamically_renders_text_field_with_custom_input_type()
         ]);
 
         $this->assertFieldRendersHtml([
-            '<input type="number" name="age" value="24">',
+            '<input id="default-form-age-field" type="number" name="age" value="24">',
         ], [
             'handle' => 'age',
             'field' => [
@@ -128,7 +128,7 @@ public function it_dynamically_renders_text_field_with_custom_input_type()
     public function it_dynamically_renders_textarea_field()
     {
         $this->assertFieldRendersHtml([
-            '<textarea name="comment" rows="5"></textarea>',
+            '<textarea id="default-form-comment-field" name="comment" rows="5"></textarea>',
         ], [
             'handle' => 'comment',
             'field' => [
@@ -137,7 +137,7 @@ public function it_dynamically_renders_textarea_field()
         ]);
 
         $this->assertFieldRendersHtml([
-            '<textarea name="comment" rows="5">Hey hoser!</textarea>',
+            '<textarea id="default-form-comment-field" name="comment" rows="5">Hey hoser!</textarea>',
         ], [
             'handle' => 'comment',
             'field' => [
@@ -152,11 +152,11 @@ public function it_dynamically_renders_textarea_field()
     public function it_dynamically_renders_checkboxes_field()
     {
         $this->assertFieldRendersHtml([
-            '<label><input type="checkbox" name="favourite_animals[]" value="cat">Cat</label>',
+            '<label><input id="default-form-favourite_animals-field-cat-option" type="checkbox" name="favourite_animals[]" value="cat">Cat</label>',
             '<br>',
-            '<label><input type="checkbox" name="favourite_animals[]" value="armadillo">Armadillo</label>',
+            '<label><input id="default-form-favourite_animals-field-armadillo-option" type="checkbox" name="favourite_animals[]" value="armadillo">Armadillo</label>',
             '<br>',
-            '<label><input type="checkbox" name="favourite_animals[]" value="rat">rat</label>',
+            '<label><input id="default-form-favourite_animals-field-rat-option" type="checkbox" name="favourite_animals[]" value="rat">rat</label>',
         ], [
             'handle' => 'favourite_animals',
             'field' => [
@@ -170,11 +170,11 @@ public function it_dynamically_renders_checkboxes_field()
         ]);
 
         $this->assertFieldRendersHtml([
-            '<label><input type="checkbox" name="favourite_animals[]" value="cat" checked>Cat</label>',
+            '<label><input id="default-form-favourite_animals-field-cat-option" type="checkbox" name="favourite_animals[]" value="cat" checked>Cat</label>',
             '<br>',
-            '<label><input type="checkbox" name="favourite_animals[]" value="armadillo">Armadillo</label>',
+            '<label><input id="default-form-favourite_animals-field-armadillo-option" type="checkbox" name="favourite_animals[]" value="armadillo">Armadillo</label>',
             '<br>',
-            '<label><input type="checkbox" name="favourite_animals[]" value="rat" checked>rat</label>',
+            '<label><input id="default-form-favourite_animals-field-rat-option" type="checkbox" name="favourite_animals[]" value="rat" checked>rat</label>',
         ], [
             'handle' => 'favourite_animals',
             'field' => [
@@ -194,9 +194,9 @@ public function it_dynamically_renders_checkboxes_field()
     public function it_dynamically_renders_inline_checkboxes_field()
     {
         $this->assertFieldRendersHtml([
-            '<label><input type="checkbox" name="favourite_animals[]" value="cat">Cat</label>',
-            '<label><input type="checkbox" name="favourite_animals[]" value="armadillo">Armadillo</label>',
-            '<label><input type="checkbox" name="favourite_animals[]" value="rat">rat</label>',
+            '<label><input id="default-form-favourite_animals-field-cat-option" type="checkbox" name="favourite_animals[]" value="cat">Cat</label>',
+            '<label><input id="default-form-favourite_animals-field-armadillo-option" type="checkbox" name="favourite_animals[]" value="armadillo">Armadillo</label>',
+            '<label><input id="default-form-favourite_animals-field-rat-option" type="checkbox" name="favourite_animals[]" value="rat">rat</label>',
         ], [
             'handle' => 'favourite_animals',
             'field' => [
@@ -211,9 +211,9 @@ public function it_dynamically_renders_inline_checkboxes_field()
         ]);
 
         $this->assertFieldRendersHtml([
-            '<label><input type="checkbox" name="favourite_animals[]" value="cat" checked>Cat</label>',
-            '<label><input type="checkbox" name="favourite_animals[]" value="armadillo">Armadillo</label>',
-            '<label><input type="checkbox" name="favourite_animals[]" value="rat" checked>rat</label>',
+            '<label><input id="default-form-favourite_animals-field-cat-option" type="checkbox" name="favourite_animals[]" value="cat" checked>Cat</label>',
+            '<label><input id="default-form-favourite_animals-field-armadillo-option" type="checkbox" name="favourite_animals[]" value="armadillo">Armadillo</label>',
+            '<label><input id="default-form-favourite_animals-field-rat-option" type="checkbox" name="favourite_animals[]" value="rat" checked>rat</label>',
         ], [
             'handle' => 'favourite_animals',
             'field' => [
@@ -234,11 +234,11 @@ public function it_dynamically_renders_inline_checkboxes_field()
     public function it_dynamically_renders_radio_field()
     {
         $this->assertFieldRendersHtml([
-            '<label><input type="radio" name="favourite_animal" value="cat">Cat</label>',
+            '<label><input id="default-form-favourite_animal-field-cat-option" type="radio" name="favourite_animal" value="cat">Cat</label>',
             '<br>',
-            '<label><input type="radio" name="favourite_animal" value="armadillo">Armadillo</label>',
+            '<label><input id="default-form-favourite_animal-field-armadillo-option" type="radio" name="favourite_animal" value="armadillo">Armadillo</label>',
             '<br>',
-            '<label><input type="radio" name="favourite_animal" value="rat">rat</label>',
+            '<label><input id="default-form-favourite_animal-field-rat-option" type="radio" name="favourite_animal" value="rat">rat</label>',
         ], [
             'handle' => 'favourite_animal',
             'field' => [
@@ -252,11 +252,11 @@ public function it_dynamically_renders_radio_field()
         ]);
 
         $this->assertFieldRendersHtml([
-            '<label><input type="radio" name="favourite_animal" value="cat">Cat</label>',
+            '<label><input id="default-form-favourite_animal-field-cat-option" type="radio" name="favourite_animal" value="cat">Cat</label>',
             '<br>',
-            '<label><input type="radio" name="favourite_animal" value="armadillo" checked>Armadillo</label>',
+            '<label><input id="default-form-favourite_animal-field-armadillo-option" type="radio" name="favourite_animal" value="armadillo" checked>Armadillo</label>',
             '<br>',
-            '<label><input type="radio" name="favourite_animal" value="rat">rat</label>',
+            '<label><input id="default-form-favourite_animal-field-rat-option" type="radio" name="favourite_animal" value="rat">rat</label>',
         ], [
             'handle' => 'favourite_animal',
             'field' => [
@@ -276,9 +276,9 @@ public function it_dynamically_renders_radio_field()
     public function it_dynamically_renders_inline_radio_field()
     {
         $this->assertFieldRendersHtml([
-            '<label><input type="radio" name="favourite_animal" value="cat">Cat</label>',
-            '<label><input type="radio" name="favourite_animal" value="armadillo">Armadillo</label>',
-            '<label><input type="radio" name="favourite_animal" value="rat">rat</label>',
+            '<label><input id="default-form-favourite_animal-field-cat-option" type="radio" name="favourite_animal" value="cat">Cat</label>',
+            '<label><input id="default-form-favourite_animal-field-armadillo-option" type="radio" name="favourite_animal" value="armadillo">Armadillo</label>',
+            '<label><input id="default-form-favourite_animal-field-rat-option" type="radio" name="favourite_animal" value="rat">rat</label>',
         ], [
             'handle' => 'favourite_animal',
             'field' => [
@@ -293,9 +293,9 @@ public function it_dynamically_renders_inline_radio_field()
         ]);
 
         $this->assertFieldRendersHtml([
-            '<label><input type="radio" name="favourite_animal" value="cat">Cat</label>',
-            '<label><input type="radio" name="favourite_animal" value="armadillo" checked>Armadillo</label>',
-            '<label><input type="radio" name="favourite_animal" value="rat">rat</label>',
+            '<label><input id="default-form-favourite_animal-field-cat-option" type="radio" name="favourite_animal" value="cat">Cat</label>',
+            '<label><input id="default-form-favourite_animal-field-armadillo-option" type="radio" name="favourite_animal" value="armadillo" checked>Armadillo</label>',
+            '<label><input id="default-form-favourite_animal-field-rat-option" type="radio" name="favourite_animal" value="rat">rat</label>',
         ], [
             'handle' => 'favourite_animal',
             'field' => [
@@ -316,7 +316,7 @@ public function it_dynamically_renders_inline_radio_field()
     public function it_dynamically_renders_select_field()
     {
         $this->assertFieldRendersHtml([
-            '<select name="favourite_animal">',
+            '<select id="default-form-favourite_animal-field" name="favourite_animal">',
             '<option value>Please select...</option>',
             '<option value="cat">Cat</option>',
             '<option value="armadillo">Armadillo</option>',
@@ -335,7 +335,7 @@ public function it_dynamically_renders_select_field()
         ]);
 
         $this->assertFieldRendersHtml([
-            '<select name="favourite_animal">',
+            '<select id="default-form-favourite_animal-field" name="favourite_animal">',
             '<option value>Please select...</option>',
             '<option value="cat" selected>Cat</option>',
             '<option value="armadillo">Armadillo</option>',
@@ -360,7 +360,7 @@ public function it_dynamically_renders_select_field()
     public function it_dynamically_renders_multiple_select_field()
     {
         $this->assertFieldRendersHtml([
-            '<select name="favourite_animals[]" multiple>',
+            '<select id="default-form-favourite_animals-field" name="favourite_animals[]" multiple>',
             '<option value="cat">Cat</option>',
             '<option value="armadillo">Armadillo</option>',
             '<option value="rat">rat</option>',
@@ -379,7 +379,7 @@ public function it_dynamically_renders_multiple_select_field()
         ]);
 
         $this->assertFieldRendersHtml([
-            '<select name="favourite_animals[]" multiple>',
+            '<select id="default-form-favourite_animals-field" name="favourite_animals[]" multiple>',
             '<option value="cat" selected>Cat</option>',
             '<option value="armadillo">Armadillo</option>',
             '<option value="rat" selected>rat</option>',
@@ -404,7 +404,7 @@ public function it_dynamically_renders_multiple_select_field()
     public function it_dynamically_renders_asset_field()
     {
         $this->assertFieldRendersHtml([
-            '<input type="file" name="cat_selfie">',
+            '<input id="default-form-cat_selfie-field" type="file" name="cat_selfie">',
         ], [
             'handle' => 'cat_selfie',
             'field' => [
@@ -419,7 +419,7 @@ public function it_dynamically_renders_asset_field()
     public function it_dynamically_renders_multiple_assets_field()
     {
         $this->assertFieldRendersHtml([
-            '<input type="file" name="cat_selfies[]" multiple>',
+            '<input id="default-form-cat_selfies-field" type="file" name="cat_selfies[]" multiple>',
         ], [
             'handle' => 'cat_selfies',
             'field' => [
@@ -433,7 +433,7 @@ public function it_dynamically_renders_multiple_assets_field()
     public function it_dynamically_renders_field_with_fallback_to_default_partial()
     {
         $this->assertFieldRendersHtml([
-            '<input type="text" name="custom" value="">',
+            '<input id="default-form-custom-field" type="text" name="custom" value="">',
         ], [
             'handle' => 'custom',
             'field' => [
@@ -442,7 +442,7 @@ public function it_dynamically_renders_field_with_fallback_to_default_partial()
         ]);
 
         $this->assertFieldRendersHtml([
-            '<input type="text" name="custom" value="fall back to default partial">',
+            '<input id="default-form-custom-field" type="text" name="custom" value="fall back to default partial">',
         ], [
             'handle' => 'custom',
             'field' => [

From 859ea1def0db71f5d852ec706e9a7f200b7cda85 Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Wed, 23 Oct 2024 18:33:35 +0200
Subject: [PATCH 16/21] Use predictable test form handle

---
 tests/Tags/Form/FormTestCase.php | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/tests/Tags/Form/FormTestCase.php b/tests/Tags/Form/FormTestCase.php
index 0fe6227cc8..59f8be5751 100644
--- a/tests/Tags/Form/FormTestCase.php
+++ b/tests/Tags/Form/FormTestCase.php
@@ -93,9 +93,7 @@ protected function createForm($blueprintContents = null, $handle = null)
 
     protected function assertFieldRendersHtml($expectedHtmlParts, $fieldConfig, $oldData = [], $extraParams = [])
     {
-        $randomString = str_shuffle('nobodymesseswiththehoff');
-
-        $handle = $fieldConfig['handle'].'_'.$randomString;
+        $handle = 'test';
 
         $fields = $oldData
             ? array_merge([['handle' => 'failing_field', 'field' => ['type' => 'text', 'validate' => 'required']]], [$fieldConfig])

From de4cd19b61f8e230404137624cbd1af7a8318cd4 Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Wed, 23 Oct 2024 18:34:24 +0200
Subject: [PATCH 17/21] Update form render test cases

---
 tests/Tags/Form/FormCreateAlpineTest.php      | 44 +++++-----
 .../Tags/Form/FormCreateCustomDriverTest.php  |  2 +-
 tests/Tags/Form/FormCreateTest.php            | 82 +++++++++----------
 tests/Tags/User/PasswordFormTest.php          |  6 +-
 tests/Tags/User/ProfileFormTest.php           | 12 +--
 tests/Tags/User/RegisterFormTest.php          | 20 ++---
 6 files changed, 83 insertions(+), 83 deletions(-)

diff --git a/tests/Tags/Form/FormCreateAlpineTest.php b/tests/Tags/Form/FormCreateAlpineTest.php
index 5af7e50592..669c25de1a 100644
--- a/tests/Tags/Form/FormCreateAlpineTest.php
+++ b/tests/Tags/Form/FormCreateAlpineTest.php
@@ -297,8 +297,8 @@ public function it_dynamically_renders_text_field_x_model()
             ],
         ];
 
-        $this->assertFieldRendersHtml(['<input id="default-form-name-field" type="text" name="name" value="" x-model="name">'], $config, [], ['js' => 'alpine']);
-        $this->assertFieldRendersHtml(['<input id="default-form-name-field" type="text" name="name" value="" x-model="my_form.name">'], $config, [], ['js' => 'alpine:my_form']);
+        $this->assertFieldRendersHtml(['<input id="test-form-name-field" type="text" name="name" value="" x-model="name">'], $config, [], ['js' => 'alpine']);
+        $this->assertFieldRendersHtml(['<input id="test-form-name-field" type="text" name="name" value="" x-model="my_form.name">'], $config, [], ['js' => 'alpine:my_form']);
     }
 
     #[Test]
@@ -311,8 +311,8 @@ public function it_dynamically_renders_textarea_field_x_model()
             ],
         ];
 
-        $this->assertFieldRendersHtml(['<textarea id="default-form-comment-field" name="comment" rows="5" x-model="comment"></textarea>'], $config, [], ['js' => 'alpine']);
-        $this->assertFieldRendersHtml(['<textarea id="default-form-comment-field" name="comment" rows="5" x-model="my_form.comment"></textarea>'], $config, [], ['js' => 'alpine:my_form']);
+        $this->assertFieldRendersHtml(['<textarea id="test-form-comment-field" name="comment" rows="5" x-model="comment"></textarea>'], $config, [], ['js' => 'alpine']);
+        $this->assertFieldRendersHtml(['<textarea id="test-form-comment-field" name="comment" rows="5" x-model="my_form.comment"></textarea>'], $config, [], ['js' => 'alpine:my_form']);
     }
 
     #[Test]
@@ -330,13 +330,13 @@ public function it_dynamically_renders_checkboxes_field_x_model()
             ],
         ];
 
-        $this->assertFieldRendersHtml(['<input id="default-form-fav_animals-field-cat-option" type="checkbox" name="fav_animals[]" value="cat" x-model="fav_animals">'], $config, [], ['js' => 'alpine']);
-        $this->assertFieldRendersHtml(['<input id="default-form-fav_animals-field-rat-option" type="checkbox" name="fav_animals[]" value="rat" x-model="fav_animals">'], $config, [], ['js' => 'alpine']);
-        $this->assertFieldRendersHtml(['<input id="default-form-fav_animals-field-armadillo-option" type="checkbox" name="fav_animals[]" value="armadillo" x-model="fav_animals">'], $config, [], ['js' => 'alpine']);
+        $this->assertFieldRendersHtml(['<input id="test-form-fav_animals-field-cat-option" type="checkbox" name="fav_animals[]" value="cat" x-model="fav_animals">'], $config, [], ['js' => 'alpine']);
+        $this->assertFieldRendersHtml(['<input id="test-form-fav_animals-field-rat-option" type="checkbox" name="fav_animals[]" value="rat" x-model="fav_animals">'], $config, [], ['js' => 'alpine']);
+        $this->assertFieldRendersHtml(['<input id="test-form-fav_animals-field-armadillo-option" type="checkbox" name="fav_animals[]" value="armadillo" x-model="fav_animals">'], $config, [], ['js' => 'alpine']);
 
-        $this->assertFieldRendersHtml(['<input id="default-form-fav_animals-field-cat-option" type="checkbox" name="fav_animals[]" value="cat" x-model="my_form.fav_animals">'], $config, [], ['js' => 'alpine:my_form']);
-        $this->assertFieldRendersHtml(['<input id="default-form-fav_animals-field-rat-option" type="checkbox" name="fav_animals[]" value="rat" x-model="my_form.fav_animals">'], $config, [], ['js' => 'alpine:my_form']);
-        $this->assertFieldRendersHtml(['<input id="default-form-fav_animals-field-armadillo-option" type="checkbox" name="fav_animals[]" value="armadillo" x-model="my_form.fav_animals">'], $config, [], ['js' => 'alpine:my_form']);
+        $this->assertFieldRendersHtml(['<input id="test-form-fav_animals-field-cat-option" type="checkbox" name="fav_animals[]" value="cat" x-model="my_form.fav_animals">'], $config, [], ['js' => 'alpine:my_form']);
+        $this->assertFieldRendersHtml(['<input id="test-form-fav_animals-field-rat-option" type="checkbox" name="fav_animals[]" value="rat" x-model="my_form.fav_animals">'], $config, [], ['js' => 'alpine:my_form']);
+        $this->assertFieldRendersHtml(['<input id="test-form-fav_animals-field-armadillo-option" type="checkbox" name="fav_animals[]" value="armadillo" x-model="my_form.fav_animals">'], $config, [], ['js' => 'alpine:my_form']);
     }
 
     #[Test]
@@ -354,13 +354,13 @@ public function it_dynamically_renders_radio_field_x_model()
             ],
         ];
 
-        $this->assertFieldRendersHtml(['<input id="default-form-fav_animal-field-cat-option" type="radio" name="fav_animal" value="cat" x-model="fav_animal">'], $config, [], ['js' => 'alpine']);
-        $this->assertFieldRendersHtml(['<input id="default-form-fav_animal-field-rat-option" type="radio" name="fav_animal" value="rat" x-model="fav_animal">'], $config, [], ['js' => 'alpine']);
-        $this->assertFieldRendersHtml(['<input id="default-form-fav_animal-field-armadillo-option" type="radio" name="fav_animal" value="armadillo" x-model="fav_animal">'], $config, [], ['js' => 'alpine']);
+        $this->assertFieldRendersHtml(['<input id="test-form-fav_animal-field-cat-option" type="radio" name="fav_animal" value="cat" x-model="fav_animal">'], $config, [], ['js' => 'alpine']);
+        $this->assertFieldRendersHtml(['<input id="test-form-fav_animal-field-rat-option" type="radio" name="fav_animal" value="rat" x-model="fav_animal">'], $config, [], ['js' => 'alpine']);
+        $this->assertFieldRendersHtml(['<input id="test-form-fav_animal-field-armadillo-option" type="radio" name="fav_animal" value="armadillo" x-model="fav_animal">'], $config, [], ['js' => 'alpine']);
 
-        $this->assertFieldRendersHtml(['<input id="default-form-fav_animal-field-cat-option" type="radio" name="fav_animal" value="cat" x-model="my_form.fav_animal">'], $config, [], ['js' => 'alpine:my_form']);
-        $this->assertFieldRendersHtml(['<input id="default-form-fav_animal-field-rat-option" type="radio" name="fav_animal" value="rat" x-model="my_form.fav_animal">'], $config, [], ['js' => 'alpine:my_form']);
-        $this->assertFieldRendersHtml(['<input id="default-form-fav_animal-field-armadillo-option" type="radio" name="fav_animal" value="armadillo" x-model="my_form.fav_animal">'], $config, [], ['js' => 'alpine:my_form']);
+        $this->assertFieldRendersHtml(['<input id="test-form-fav_animal-field-cat-option" type="radio" name="fav_animal" value="cat" x-model="my_form.fav_animal">'], $config, [], ['js' => 'alpine:my_form']);
+        $this->assertFieldRendersHtml(['<input id="test-form-fav_animal-field-rat-option" type="radio" name="fav_animal" value="rat" x-model="my_form.fav_animal">'], $config, [], ['js' => 'alpine:my_form']);
+        $this->assertFieldRendersHtml(['<input id="test-form-fav_animal-field-armadillo-option" type="radio" name="fav_animal" value="armadillo" x-model="my_form.fav_animal">'], $config, [], ['js' => 'alpine:my_form']);
     }
 
     #[Test]
@@ -379,7 +379,7 @@ public function it_dynamically_renders_select_field_x_model()
         ];
 
         $expected = [
-            '<select id="default-form-favourite_animal-field" name="favourite_animal" x-model="favourite_animal">',
+            '<select id="test-form-favourite_animal-field" name="favourite_animal" x-model="favourite_animal">',
             '<option value>Please select...</option>',
             '<option value="cat">Cat</option>',
             '<option value="armadillo">Armadillo</option>',
@@ -390,7 +390,7 @@ public function it_dynamically_renders_select_field_x_model()
         $this->assertFieldRendersHtml($expected, $config, [], ['js' => 'alpine']);
 
         $expectedScoped = [
-            '<select id="default-form-favourite_animal-field" name="favourite_animal" x-model="my_form.favourite_animal">',
+            '<select id="test-form-favourite_animal-field" name="favourite_animal" x-model="my_form.favourite_animal">',
             '<option value>Please select...</option>',
             '<option value="cat">Cat</option>',
             '<option value="armadillo">Armadillo</option>',
@@ -413,8 +413,8 @@ public function it_dynamically_renders_asset_field_x_model()
             ],
         ];
 
-        $this->assertFieldRendersHtml('<input id="default-form-cat_selfie-field" type="file" name="cat_selfie" x-model="cat_selfie">', $config, [], ['js' => 'alpine']);
-        $this->assertFieldRendersHtml('<input id="default-form-cat_selfie-field" type="file" name="cat_selfie" x-model="my_form.cat_selfie">', $config, [], ['js' => 'alpine:my_form']);
+        $this->assertFieldRendersHtml('<input id="test-form-cat_selfie-field" type="file" name="cat_selfie" x-model="cat_selfie">', $config, [], ['js' => 'alpine']);
+        $this->assertFieldRendersHtml('<input id="test-form-cat_selfie-field" type="file" name="cat_selfie" x-model="my_form.cat_selfie">', $config, [], ['js' => 'alpine:my_form']);
     }
 
     #[Test]
@@ -427,8 +427,8 @@ public function it_dynamically_renders_field_with_fallback_to_default_partial_x_
             ],
         ];
 
-        $this->assertFieldRendersHtml('<input id="default-form-custom-field" type="text" name="custom" value="" x-model="custom">', $config, [], ['js' => 'alpine']);
-        $this->assertFieldRendersHtml('<input id="default-form-custom-field" type="text" name="custom" value="" x-model="my_form.custom">', $config, [], ['js' => 'alpine:my_form']);
+        $this->assertFieldRendersHtml('<input id="test-form-custom-field" type="text" name="custom" value="" x-model="custom">', $config, [], ['js' => 'alpine']);
+        $this->assertFieldRendersHtml('<input id="test-form-custom-field" type="text" name="custom" value="" x-model="my_form.custom">', $config, [], ['js' => 'alpine:my_form']);
     }
 
     #[Test]
diff --git a/tests/Tags/Form/FormCreateCustomDriverTest.php b/tests/Tags/Form/FormCreateCustomDriverTest.php
index d516ff81fa..b652ae7ea6 100644
--- a/tests/Tags/Form/FormCreateCustomDriverTest.php
+++ b/tests/Tags/Form/FormCreateCustomDriverTest.php
@@ -81,7 +81,7 @@ public function custom_driver_can_add_to_renderable_field_attributes()
 EOT
         ));
 
-        $expected = '<input type="email" name="email" value="" z-unless="Statamic.$conditions.showField(\'email\', __zData)" z-gnarley="true" required>';
+        $expected = '<input id="contact-form-email-field" type="email" name="email" value="" z-unless="Statamic.$conditions.showField(\'email\', __zData)" z-gnarley="true" required>';
         $this->assertStringContainsString($expected, $output);
     }
 
diff --git a/tests/Tags/Form/FormCreateTest.php b/tests/Tags/Form/FormCreateTest.php
index b4e69d07e8..89375ada1f 100644
--- a/tests/Tags/Form/FormCreateTest.php
+++ b/tests/Tags/Form/FormCreateTest.php
@@ -65,9 +65,9 @@ public function it_dynamically_renders_fields_array()
 EOT
         ));
 
-        $this->assertStringContainsString('<label>Full Name</label><input id="contact-form-name-input" type="text" name="name" value="">', $output);
-        $this->assertStringContainsString('<label>Email Address</label><input id="contact-form-email-input" type="email" name="email" value="" required>', $output);
-        $this->assertStringContainsString('<label>Message</label><textarea id="contact-form-message-input" name="message" rows="5" required></textarea>', $output);
+        $this->assertStringContainsString('<label>Full Name</label><input id="contact-form-name-field" type="text" name="name" value="">', $output);
+        $this->assertStringContainsString('<label>Email Address</label><input id="contact-form-email-field" type="email" name="email" value="" required>', $output);
+        $this->assertStringContainsString('<label>Message</label><textarea id="contact-form-message-field" name="message" rows="5" required></textarea>', $output);
 
         preg_match_all('/<label>(.+)<\/label>/U', $output, $fieldOrder);
 
@@ -78,7 +78,7 @@ public function it_dynamically_renders_fields_array()
     public function it_dynamically_renders_text_field()
     {
         $this->assertFieldRendersHtml([
-            '<input id="default-form-favourite_animal-field" type="text" name="favourite_animal" value="">',
+            '<input id="test-form-favourite_animal-field" type="text" name="favourite_animal" value="">',
         ], [
             'handle' => 'favourite_animal',
             'field' => [
@@ -87,7 +87,7 @@ public function it_dynamically_renders_text_field()
         ]);
 
         $this->assertFieldRendersHtml([
-            '<input id="default-form-favourite_animal-field" type="text" name="favourite_animal" value="buffalo">',
+            '<input id="test-form-favourite_animal-field" type="text" name="favourite_animal" value="buffalo">',
         ], [
             'handle' => 'favourite_animal',
             'field' => [
@@ -102,7 +102,7 @@ public function it_dynamically_renders_text_field()
     public function it_dynamically_renders_text_field_with_custom_input_type()
     {
         $this->assertFieldRendersHtml([
-            '<input id="default-form-age-field" type="number" name="age" value="">',
+            '<input id="test-form-age-field" type="number" name="age" value="">',
         ], [
             'handle' => 'age',
             'field' => [
@@ -112,7 +112,7 @@ public function it_dynamically_renders_text_field_with_custom_input_type()
         ]);
 
         $this->assertFieldRendersHtml([
-            '<input id="default-form-age-field" type="number" name="age" value="24">',
+            '<input id="test-form-age-field" type="number" name="age" value="24">',
         ], [
             'handle' => 'age',
             'field' => [
@@ -128,7 +128,7 @@ public function it_dynamically_renders_text_field_with_custom_input_type()
     public function it_dynamically_renders_textarea_field()
     {
         $this->assertFieldRendersHtml([
-            '<textarea id="default-form-comment-field" name="comment" rows="5"></textarea>',
+            '<textarea id="test-form-comment-field" name="comment" rows="5"></textarea>',
         ], [
             'handle' => 'comment',
             'field' => [
@@ -137,7 +137,7 @@ public function it_dynamically_renders_textarea_field()
         ]);
 
         $this->assertFieldRendersHtml([
-            '<textarea id="default-form-comment-field" name="comment" rows="5">Hey hoser!</textarea>',
+            '<textarea id="test-form-comment-field" name="comment" rows="5">Hey hoser!</textarea>',
         ], [
             'handle' => 'comment',
             'field' => [
@@ -152,11 +152,11 @@ public function it_dynamically_renders_textarea_field()
     public function it_dynamically_renders_checkboxes_field()
     {
         $this->assertFieldRendersHtml([
-            '<label><input id="default-form-favourite_animals-field-cat-option" type="checkbox" name="favourite_animals[]" value="cat">Cat</label>',
+            '<label><input id="test-form-favourite_animals-field-cat-option" type="checkbox" name="favourite_animals[]" value="cat">Cat</label>',
             '<br>',
-            '<label><input id="default-form-favourite_animals-field-armadillo-option" type="checkbox" name="favourite_animals[]" value="armadillo">Armadillo</label>',
+            '<label><input id="test-form-favourite_animals-field-armadillo-option" type="checkbox" name="favourite_animals[]" value="armadillo">Armadillo</label>',
             '<br>',
-            '<label><input id="default-form-favourite_animals-field-rat-option" type="checkbox" name="favourite_animals[]" value="rat">rat</label>',
+            '<label><input id="test-form-favourite_animals-field-rat-option" type="checkbox" name="favourite_animals[]" value="rat">rat</label>',
         ], [
             'handle' => 'favourite_animals',
             'field' => [
@@ -170,11 +170,11 @@ public function it_dynamically_renders_checkboxes_field()
         ]);
 
         $this->assertFieldRendersHtml([
-            '<label><input id="default-form-favourite_animals-field-cat-option" type="checkbox" name="favourite_animals[]" value="cat" checked>Cat</label>',
+            '<label><input id="test-form-favourite_animals-field-cat-option" type="checkbox" name="favourite_animals[]" value="cat" checked>Cat</label>',
             '<br>',
-            '<label><input id="default-form-favourite_animals-field-armadillo-option" type="checkbox" name="favourite_animals[]" value="armadillo">Armadillo</label>',
+            '<label><input id="test-form-favourite_animals-field-armadillo-option" type="checkbox" name="favourite_animals[]" value="armadillo">Armadillo</label>',
             '<br>',
-            '<label><input id="default-form-favourite_animals-field-rat-option" type="checkbox" name="favourite_animals[]" value="rat" checked>rat</label>',
+            '<label><input id="test-form-favourite_animals-field-rat-option" type="checkbox" name="favourite_animals[]" value="rat" checked>rat</label>',
         ], [
             'handle' => 'favourite_animals',
             'field' => [
@@ -194,9 +194,9 @@ public function it_dynamically_renders_checkboxes_field()
     public function it_dynamically_renders_inline_checkboxes_field()
     {
         $this->assertFieldRendersHtml([
-            '<label><input id="default-form-favourite_animals-field-cat-option" type="checkbox" name="favourite_animals[]" value="cat">Cat</label>',
-            '<label><input id="default-form-favourite_animals-field-armadillo-option" type="checkbox" name="favourite_animals[]" value="armadillo">Armadillo</label>',
-            '<label><input id="default-form-favourite_animals-field-rat-option" type="checkbox" name="favourite_animals[]" value="rat">rat</label>',
+            '<label><input id="test-form-favourite_animals-field-cat-option" type="checkbox" name="favourite_animals[]" value="cat">Cat</label>',
+            '<label><input id="test-form-favourite_animals-field-armadillo-option" type="checkbox" name="favourite_animals[]" value="armadillo">Armadillo</label>',
+            '<label><input id="test-form-favourite_animals-field-rat-option" type="checkbox" name="favourite_animals[]" value="rat">rat</label>',
         ], [
             'handle' => 'favourite_animals',
             'field' => [
@@ -211,9 +211,9 @@ public function it_dynamically_renders_inline_checkboxes_field()
         ]);
 
         $this->assertFieldRendersHtml([
-            '<label><input id="default-form-favourite_animals-field-cat-option" type="checkbox" name="favourite_animals[]" value="cat" checked>Cat</label>',
-            '<label><input id="default-form-favourite_animals-field-armadillo-option" type="checkbox" name="favourite_animals[]" value="armadillo">Armadillo</label>',
-            '<label><input id="default-form-favourite_animals-field-rat-option" type="checkbox" name="favourite_animals[]" value="rat" checked>rat</label>',
+            '<label><input id="test-form-favourite_animals-field-cat-option" type="checkbox" name="favourite_animals[]" value="cat" checked>Cat</label>',
+            '<label><input id="test-form-favourite_animals-field-armadillo-option" type="checkbox" name="favourite_animals[]" value="armadillo">Armadillo</label>',
+            '<label><input id="test-form-favourite_animals-field-rat-option" type="checkbox" name="favourite_animals[]" value="rat" checked>rat</label>',
         ], [
             'handle' => 'favourite_animals',
             'field' => [
@@ -234,11 +234,11 @@ public function it_dynamically_renders_inline_checkboxes_field()
     public function it_dynamically_renders_radio_field()
     {
         $this->assertFieldRendersHtml([
-            '<label><input id="default-form-favourite_animal-field-cat-option" type="radio" name="favourite_animal" value="cat">Cat</label>',
+            '<label><input id="test-form-favourite_animal-field-cat-option" type="radio" name="favourite_animal" value="cat">Cat</label>',
             '<br>',
-            '<label><input id="default-form-favourite_animal-field-armadillo-option" type="radio" name="favourite_animal" value="armadillo">Armadillo</label>',
+            '<label><input id="test-form-favourite_animal-field-armadillo-option" type="radio" name="favourite_animal" value="armadillo">Armadillo</label>',
             '<br>',
-            '<label><input id="default-form-favourite_animal-field-rat-option" type="radio" name="favourite_animal" value="rat">rat</label>',
+            '<label><input id="test-form-favourite_animal-field-rat-option" type="radio" name="favourite_animal" value="rat">rat</label>',
         ], [
             'handle' => 'favourite_animal',
             'field' => [
@@ -252,11 +252,11 @@ public function it_dynamically_renders_radio_field()
         ]);
 
         $this->assertFieldRendersHtml([
-            '<label><input id="default-form-favourite_animal-field-cat-option" type="radio" name="favourite_animal" value="cat">Cat</label>',
+            '<label><input id="test-form-favourite_animal-field-cat-option" type="radio" name="favourite_animal" value="cat">Cat</label>',
             '<br>',
-            '<label><input id="default-form-favourite_animal-field-armadillo-option" type="radio" name="favourite_animal" value="armadillo" checked>Armadillo</label>',
+            '<label><input id="test-form-favourite_animal-field-armadillo-option" type="radio" name="favourite_animal" value="armadillo" checked>Armadillo</label>',
             '<br>',
-            '<label><input id="default-form-favourite_animal-field-rat-option" type="radio" name="favourite_animal" value="rat">rat</label>',
+            '<label><input id="test-form-favourite_animal-field-rat-option" type="radio" name="favourite_animal" value="rat">rat</label>',
         ], [
             'handle' => 'favourite_animal',
             'field' => [
@@ -276,9 +276,9 @@ public function it_dynamically_renders_radio_field()
     public function it_dynamically_renders_inline_radio_field()
     {
         $this->assertFieldRendersHtml([
-            '<label><input id="default-form-favourite_animal-field-cat-option" type="radio" name="favourite_animal" value="cat">Cat</label>',
-            '<label><input id="default-form-favourite_animal-field-armadillo-option" type="radio" name="favourite_animal" value="armadillo">Armadillo</label>',
-            '<label><input id="default-form-favourite_animal-field-rat-option" type="radio" name="favourite_animal" value="rat">rat</label>',
+            '<label><input id="test-form-favourite_animal-field-cat-option" type="radio" name="favourite_animal" value="cat">Cat</label>',
+            '<label><input id="test-form-favourite_animal-field-armadillo-option" type="radio" name="favourite_animal" value="armadillo">Armadillo</label>',
+            '<label><input id="test-form-favourite_animal-field-rat-option" type="radio" name="favourite_animal" value="rat">rat</label>',
         ], [
             'handle' => 'favourite_animal',
             'field' => [
@@ -293,9 +293,9 @@ public function it_dynamically_renders_inline_radio_field()
         ]);
 
         $this->assertFieldRendersHtml([
-            '<label><input id="default-form-favourite_animal-field-cat-option" type="radio" name="favourite_animal" value="cat">Cat</label>',
-            '<label><input id="default-form-favourite_animal-field-armadillo-option" type="radio" name="favourite_animal" value="armadillo" checked>Armadillo</label>',
-            '<label><input id="default-form-favourite_animal-field-rat-option" type="radio" name="favourite_animal" value="rat">rat</label>',
+            '<label><input id="test-form-favourite_animal-field-cat-option" type="radio" name="favourite_animal" value="cat">Cat</label>',
+            '<label><input id="test-form-favourite_animal-field-armadillo-option" type="radio" name="favourite_animal" value="armadillo" checked>Armadillo</label>',
+            '<label><input id="test-form-favourite_animal-field-rat-option" type="radio" name="favourite_animal" value="rat">rat</label>',
         ], [
             'handle' => 'favourite_animal',
             'field' => [
@@ -316,7 +316,7 @@ public function it_dynamically_renders_inline_radio_field()
     public function it_dynamically_renders_select_field()
     {
         $this->assertFieldRendersHtml([
-            '<select id="default-form-favourite_animal-field" name="favourite_animal">',
+            '<select id="test-form-favourite_animal-field" name="favourite_animal">',
             '<option value>Please select...</option>',
             '<option value="cat">Cat</option>',
             '<option value="armadillo">Armadillo</option>',
@@ -335,7 +335,7 @@ public function it_dynamically_renders_select_field()
         ]);
 
         $this->assertFieldRendersHtml([
-            '<select id="default-form-favourite_animal-field" name="favourite_animal">',
+            '<select id="test-form-favourite_animal-field" name="favourite_animal">',
             '<option value>Please select...</option>',
             '<option value="cat" selected>Cat</option>',
             '<option value="armadillo">Armadillo</option>',
@@ -360,7 +360,7 @@ public function it_dynamically_renders_select_field()
     public function it_dynamically_renders_multiple_select_field()
     {
         $this->assertFieldRendersHtml([
-            '<select id="default-form-favourite_animals-field" name="favourite_animals[]" multiple>',
+            '<select id="test-form-favourite_animals-field" name="favourite_animals[]" multiple>',
             '<option value="cat">Cat</option>',
             '<option value="armadillo">Armadillo</option>',
             '<option value="rat">rat</option>',
@@ -379,7 +379,7 @@ public function it_dynamically_renders_multiple_select_field()
         ]);
 
         $this->assertFieldRendersHtml([
-            '<select id="default-form-favourite_animals-field" name="favourite_animals[]" multiple>',
+            '<select id="test-form-favourite_animals-field" name="favourite_animals[]" multiple>',
             '<option value="cat" selected>Cat</option>',
             '<option value="armadillo">Armadillo</option>',
             '<option value="rat" selected>rat</option>',
@@ -404,7 +404,7 @@ public function it_dynamically_renders_multiple_select_field()
     public function it_dynamically_renders_asset_field()
     {
         $this->assertFieldRendersHtml([
-            '<input id="default-form-cat_selfie-field" type="file" name="cat_selfie">',
+            '<input id="test-form-cat_selfie-field" type="file" name="cat_selfie">',
         ], [
             'handle' => 'cat_selfie',
             'field' => [
@@ -419,7 +419,7 @@ public function it_dynamically_renders_asset_field()
     public function it_dynamically_renders_multiple_assets_field()
     {
         $this->assertFieldRendersHtml([
-            '<input id="default-form-cat_selfies-field" type="file" name="cat_selfies[]" multiple>',
+            '<input id="test-form-cat_selfies-field" type="file" name="cat_selfies[]" multiple>',
         ], [
             'handle' => 'cat_selfies',
             'field' => [
@@ -433,7 +433,7 @@ public function it_dynamically_renders_multiple_assets_field()
     public function it_dynamically_renders_field_with_fallback_to_default_partial()
     {
         $this->assertFieldRendersHtml([
-            '<input id="default-form-custom-field" type="text" name="custom" value="">',
+            '<input id="test-form-custom-field" type="text" name="custom" value="">',
         ], [
             'handle' => 'custom',
             'field' => [
@@ -442,7 +442,7 @@ public function it_dynamically_renders_field_with_fallback_to_default_partial()
         ]);
 
         $this->assertFieldRendersHtml([
-            '<input id="default-form-custom-field" type="text" name="custom" value="fall back to default partial">',
+            '<input id="test-form-custom-field" type="text" name="custom" value="fall back to default partial">',
         ], [
             'handle' => 'custom',
             'field' => [
diff --git a/tests/Tags/User/PasswordFormTest.php b/tests/Tags/User/PasswordFormTest.php
index 9e39826fa8..35855b1051 100644
--- a/tests/Tags/User/PasswordFormTest.php
+++ b/tests/Tags/User/PasswordFormTest.php
@@ -74,9 +74,9 @@ public function it_renders_form_with_fields_array()
         preg_match_all('/<label>.+<\/label><input.+>/U', $output, $actual);
 
         $expected = [
-            '<label>Current Password</label><input type="password" name="current_password" value="">',
-            '<label>Password</label><input type="password" name="password" value="">',
-            '<label>Password Confirmation</label><input type="password" name="password_confirmation" value="">',
+            '<label>Current Password</label><input id="userpassword-form-current_password-field" type="password" name="current_password" value="">',
+            '<label>Password</label><input id="userpassword-form-password-field" type="password" name="password" value="">',
+            '<label>Password Confirmation</label><input id="userpassword-form-password_confirmation-field" type="password" name="password_confirmation" value="">',
         ];
 
         $this->assertEquals($expected, $actual[0]);
diff --git a/tests/Tags/User/ProfileFormTest.php b/tests/Tags/User/ProfileFormTest.php
index a9a2f64955..bd06e393a8 100644
--- a/tests/Tags/User/ProfileFormTest.php
+++ b/tests/Tags/User/ProfileFormTest.php
@@ -74,8 +74,8 @@ public function it_renders_form_with_fields_array()
         preg_match_all('/<label>.+<\/label><input.+>/U', $output, $actual);
 
         $expected = [
-            '<label>Name</label><input type="text" name="name" value="Test User">',
-            '<label>Email Address</label><input type="email" name="email" value="test@example.com">',
+            '<label>Name</label><input id="userprofile-form-name-field" type="text" name="name" value="Test User">',
+            '<label>Email Address</label><input id="userprofile-form-email-field" type="email" name="email" value="test@example.com">',
         ];
 
         $this->assertEquals($expected, $actual[0]);
@@ -103,10 +103,10 @@ public function it_renders_form_with_fields_array_and_custom_blueprint()
         preg_match_all('/<label>.+<\/label><input.+>/U', $output, $actual);
 
         $expected = [
-            '<label>Full Name</label><input type="text" name="name" value="Test User">',
-            '<label>Email Address</label><input type="email" name="email" value="test@example.com">',
-            '<label>Phone Number</label><input type="text" name="phone" value="12345">',
-            '<label>Over 18 years of age?</label><input type="text" name="age" value="" required>',
+            '<label>Full Name</label><input id="userprofile-form-name-field" type="text" name="name" value="Test User">',
+            '<label>Email Address</label><input id="userprofile-form-email-field" type="email" name="email" value="test@example.com">',
+            '<label>Phone Number</label><input id="userprofile-form-phone-field" type="text" name="phone" value="12345">',
+            '<label>Over 18 years of age?</label><input id="userprofile-form-age-field" type="text" name="age" value="" required>',
         ];
 
         $this->assertEquals($expected, $actual[0]);
diff --git a/tests/Tags/User/RegisterFormTest.php b/tests/Tags/User/RegisterFormTest.php
index b25fa1b81e..f86fcec19f 100644
--- a/tests/Tags/User/RegisterFormTest.php
+++ b/tests/Tags/User/RegisterFormTest.php
@@ -70,10 +70,10 @@ public function it_renders_form_with_fields_array()
         preg_match_all('/<label>.+<\/label><input.+>/U', $output, $actual);
 
         $expected = [
-            '<label>Email Address</label><input type="email" name="email" value="">',
-            '<label>Password</label><input type="password" name="password" value="">',
-            '<label>Password Confirmation</label><input type="password" name="password_confirmation" value="">',
-            '<label>Name</label><input type="text" name="name" value="">',
+            '<label>Email Address</label><input id="userregister-form-email-field" type="email" name="email" value="">',
+            '<label>Password</label><input id="userregister-form-password-field" type="password" name="password" value="">',
+            '<label>Password Confirmation</label><input id="userregister-form-password_confirmation-field" type="password" name="password_confirmation" value="">',
+            '<label>Name</label><input id="userregister-form-name-field" type="text" name="name" value="">',
         ];
 
         $this->assertEquals($expected, $actual[0]);
@@ -96,12 +96,12 @@ public function it_renders_form_with_fields_array_and_custom_blueprint()
         preg_match_all('/<label>.+<\/label><input.+>/U', $output, $actual);
 
         $expected = [
-            '<label>Email Address</label><input type="email" name="email" value="">',
-            '<label>Password</label><input type="password" name="password" value="">',
-            '<label>Password Confirmation</label><input type="password" name="password_confirmation" value="">',
-            '<label>Full Name</label><input type="text" name="name" value="">',
-            '<label>Phone Number</label><input type="text" name="phone" value="">',
-            '<label>Over 18 years of age?</label><input type="text" name="age" value="" required>',
+            '<label>Email Address</label><input id="userregister-form-email-field" type="email" name="email" value="">',
+            '<label>Password</label><input id="userregister-form-password-field" type="password" name="password" value="">',
+            '<label>Password Confirmation</label><input id="userregister-form-password_confirmation-field" type="password" name="password_confirmation" value="">',
+            '<label>Full Name</label><input id="userregister-form-name-field" type="text" name="name" value="">',
+            '<label>Phone Number</label><input id="userregister-form-phone-field" type="text" name="phone" value="">',
+            '<label>Over 18 years of age?</label><input id="userregister-form-age-field" type="text" name="age" value="" required>',
         ];
 
         $this->assertEquals($expected, $actual[0]);

From 8f5214d5b88bef58598da7a5e54a4a4502047c8e Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Fri, 25 Oct 2024 10:13:17 +0200
Subject: [PATCH 18/21] Restore dynamic test form handles

---
 tests/Tags/Form/FormTestCase.php | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/tests/Tags/Form/FormTestCase.php b/tests/Tags/Form/FormTestCase.php
index 59f8be5751..0fe6227cc8 100644
--- a/tests/Tags/Form/FormTestCase.php
+++ b/tests/Tags/Form/FormTestCase.php
@@ -93,7 +93,9 @@ protected function createForm($blueprintContents = null, $handle = null)
 
     protected function assertFieldRendersHtml($expectedHtmlParts, $fieldConfig, $oldData = [], $extraParams = [])
     {
-        $handle = 'test';
+        $randomString = str_shuffle('nobodymesseswiththehoff');
+
+        $handle = $fieldConfig['handle'].'_'.$randomString;
 
         $fields = $oldData
             ? array_merge([['handle' => 'failing_field', 'field' => ['type' => 'text', 'validate' => 'required']]], [$fieldConfig])

From 206c99ecbdf8adb903ad6b9b4fe549bb7f53216d Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Fri, 25 Oct 2024 10:13:37 +0200
Subject: [PATCH 19/21] Allow testing against dynamic form handles

---
 tests/Tags/Form/FormCreateAlpineTest.php | 44 +++++++-------
 tests/Tags/Form/FormCreateTest.php       | 76 ++++++++++++------------
 tests/Tags/Form/FormTestCase.php         |  4 +-
 3 files changed, 63 insertions(+), 61 deletions(-)

diff --git a/tests/Tags/Form/FormCreateAlpineTest.php b/tests/Tags/Form/FormCreateAlpineTest.php
index 669c25de1a..58f84058e0 100644
--- a/tests/Tags/Form/FormCreateAlpineTest.php
+++ b/tests/Tags/Form/FormCreateAlpineTest.php
@@ -297,8 +297,8 @@ public function it_dynamically_renders_text_field_x_model()
             ],
         ];
 
-        $this->assertFieldRendersHtml(['<input id="test-form-name-field" type="text" name="name" value="" x-model="name">'], $config, [], ['js' => 'alpine']);
-        $this->assertFieldRendersHtml(['<input id="test-form-name-field" type="text" name="name" value="" x-model="my_form.name">'], $config, [], ['js' => 'alpine:my_form']);
+        $this->assertFieldRendersHtml(['<input id="[[form-handle]]-form-name-field" type="text" name="name" value="" x-model="name">'], $config, [], ['js' => 'alpine']);
+        $this->assertFieldRendersHtml(['<input id="[[form-handle]]-form-name-field" type="text" name="name" value="" x-model="my_form.name">'], $config, [], ['js' => 'alpine:my_form']);
     }
 
     #[Test]
@@ -311,8 +311,8 @@ public function it_dynamically_renders_textarea_field_x_model()
             ],
         ];
 
-        $this->assertFieldRendersHtml(['<textarea id="test-form-comment-field" name="comment" rows="5" x-model="comment"></textarea>'], $config, [], ['js' => 'alpine']);
-        $this->assertFieldRendersHtml(['<textarea id="test-form-comment-field" name="comment" rows="5" x-model="my_form.comment"></textarea>'], $config, [], ['js' => 'alpine:my_form']);
+        $this->assertFieldRendersHtml(['<textarea id="[[form-handle]]-form-comment-field" name="comment" rows="5" x-model="comment"></textarea>'], $config, [], ['js' => 'alpine']);
+        $this->assertFieldRendersHtml(['<textarea id="[[form-handle]]-form-comment-field" name="comment" rows="5" x-model="my_form.comment"></textarea>'], $config, [], ['js' => 'alpine:my_form']);
     }
 
     #[Test]
@@ -330,13 +330,13 @@ public function it_dynamically_renders_checkboxes_field_x_model()
             ],
         ];
 
-        $this->assertFieldRendersHtml(['<input id="test-form-fav_animals-field-cat-option" type="checkbox" name="fav_animals[]" value="cat" x-model="fav_animals">'], $config, [], ['js' => 'alpine']);
-        $this->assertFieldRendersHtml(['<input id="test-form-fav_animals-field-rat-option" type="checkbox" name="fav_animals[]" value="rat" x-model="fav_animals">'], $config, [], ['js' => 'alpine']);
-        $this->assertFieldRendersHtml(['<input id="test-form-fav_animals-field-armadillo-option" type="checkbox" name="fav_animals[]" value="armadillo" x-model="fav_animals">'], $config, [], ['js' => 'alpine']);
+        $this->assertFieldRendersHtml(['<input id="[[form-handle]]-form-fav_animals-field-cat-option" type="checkbox" name="fav_animals[]" value="cat" x-model="fav_animals">'], $config, [], ['js' => 'alpine']);
+        $this->assertFieldRendersHtml(['<input id="[[form-handle]]-form-fav_animals-field-rat-option" type="checkbox" name="fav_animals[]" value="rat" x-model="fav_animals">'], $config, [], ['js' => 'alpine']);
+        $this->assertFieldRendersHtml(['<input id="[[form-handle]]-form-fav_animals-field-armadillo-option" type="checkbox" name="fav_animals[]" value="armadillo" x-model="fav_animals">'], $config, [], ['js' => 'alpine']);
 
-        $this->assertFieldRendersHtml(['<input id="test-form-fav_animals-field-cat-option" type="checkbox" name="fav_animals[]" value="cat" x-model="my_form.fav_animals">'], $config, [], ['js' => 'alpine:my_form']);
-        $this->assertFieldRendersHtml(['<input id="test-form-fav_animals-field-rat-option" type="checkbox" name="fav_animals[]" value="rat" x-model="my_form.fav_animals">'], $config, [], ['js' => 'alpine:my_form']);
-        $this->assertFieldRendersHtml(['<input id="test-form-fav_animals-field-armadillo-option" type="checkbox" name="fav_animals[]" value="armadillo" x-model="my_form.fav_animals">'], $config, [], ['js' => 'alpine:my_form']);
+        $this->assertFieldRendersHtml(['<input id="[[form-handle]]-form-fav_animals-field-cat-option" type="checkbox" name="fav_animals[]" value="cat" x-model="my_form.fav_animals">'], $config, [], ['js' => 'alpine:my_form']);
+        $this->assertFieldRendersHtml(['<input id="[[form-handle]]-form-fav_animals-field-rat-option" type="checkbox" name="fav_animals[]" value="rat" x-model="my_form.fav_animals">'], $config, [], ['js' => 'alpine:my_form']);
+        $this->assertFieldRendersHtml(['<input id="[[form-handle]]-form-fav_animals-field-armadillo-option" type="checkbox" name="fav_animals[]" value="armadillo" x-model="my_form.fav_animals">'], $config, [], ['js' => 'alpine:my_form']);
     }
 
     #[Test]
@@ -354,13 +354,13 @@ public function it_dynamically_renders_radio_field_x_model()
             ],
         ];
 
-        $this->assertFieldRendersHtml(['<input id="test-form-fav_animal-field-cat-option" type="radio" name="fav_animal" value="cat" x-model="fav_animal">'], $config, [], ['js' => 'alpine']);
-        $this->assertFieldRendersHtml(['<input id="test-form-fav_animal-field-rat-option" type="radio" name="fav_animal" value="rat" x-model="fav_animal">'], $config, [], ['js' => 'alpine']);
-        $this->assertFieldRendersHtml(['<input id="test-form-fav_animal-field-armadillo-option" type="radio" name="fav_animal" value="armadillo" x-model="fav_animal">'], $config, [], ['js' => 'alpine']);
+        $this->assertFieldRendersHtml(['<input id="[[form-handle]]-form-fav_animal-field-cat-option" type="radio" name="fav_animal" value="cat" x-model="fav_animal">'], $config, [], ['js' => 'alpine']);
+        $this->assertFieldRendersHtml(['<input id="[[form-handle]]-form-fav_animal-field-rat-option" type="radio" name="fav_animal" value="rat" x-model="fav_animal">'], $config, [], ['js' => 'alpine']);
+        $this->assertFieldRendersHtml(['<input id="[[form-handle]]-form-fav_animal-field-armadillo-option" type="radio" name="fav_animal" value="armadillo" x-model="fav_animal">'], $config, [], ['js' => 'alpine']);
 
-        $this->assertFieldRendersHtml(['<input id="test-form-fav_animal-field-cat-option" type="radio" name="fav_animal" value="cat" x-model="my_form.fav_animal">'], $config, [], ['js' => 'alpine:my_form']);
-        $this->assertFieldRendersHtml(['<input id="test-form-fav_animal-field-rat-option" type="radio" name="fav_animal" value="rat" x-model="my_form.fav_animal">'], $config, [], ['js' => 'alpine:my_form']);
-        $this->assertFieldRendersHtml(['<input id="test-form-fav_animal-field-armadillo-option" type="radio" name="fav_animal" value="armadillo" x-model="my_form.fav_animal">'], $config, [], ['js' => 'alpine:my_form']);
+        $this->assertFieldRendersHtml(['<input id="[[form-handle]]-form-fav_animal-field-cat-option" type="radio" name="fav_animal" value="cat" x-model="my_form.fav_animal">'], $config, [], ['js' => 'alpine:my_form']);
+        $this->assertFieldRendersHtml(['<input id="[[form-handle]]-form-fav_animal-field-rat-option" type="radio" name="fav_animal" value="rat" x-model="my_form.fav_animal">'], $config, [], ['js' => 'alpine:my_form']);
+        $this->assertFieldRendersHtml(['<input id="[[form-handle]]-form-fav_animal-field-armadillo-option" type="radio" name="fav_animal" value="armadillo" x-model="my_form.fav_animal">'], $config, [], ['js' => 'alpine:my_form']);
     }
 
     #[Test]
@@ -379,7 +379,7 @@ public function it_dynamically_renders_select_field_x_model()
         ];
 
         $expected = [
-            '<select id="test-form-favourite_animal-field" name="favourite_animal" x-model="favourite_animal">',
+            '<select id="[[form-handle]]-form-favourite_animal-field" name="favourite_animal" x-model="favourite_animal">',
             '<option value>Please select...</option>',
             '<option value="cat">Cat</option>',
             '<option value="armadillo">Armadillo</option>',
@@ -390,7 +390,7 @@ public function it_dynamically_renders_select_field_x_model()
         $this->assertFieldRendersHtml($expected, $config, [], ['js' => 'alpine']);
 
         $expectedScoped = [
-            '<select id="test-form-favourite_animal-field" name="favourite_animal" x-model="my_form.favourite_animal">',
+            '<select id="[[form-handle]]-form-favourite_animal-field" name="favourite_animal" x-model="my_form.favourite_animal">',
             '<option value>Please select...</option>',
             '<option value="cat">Cat</option>',
             '<option value="armadillo">Armadillo</option>',
@@ -413,8 +413,8 @@ public function it_dynamically_renders_asset_field_x_model()
             ],
         ];
 
-        $this->assertFieldRendersHtml('<input id="test-form-cat_selfie-field" type="file" name="cat_selfie" x-model="cat_selfie">', $config, [], ['js' => 'alpine']);
-        $this->assertFieldRendersHtml('<input id="test-form-cat_selfie-field" type="file" name="cat_selfie" x-model="my_form.cat_selfie">', $config, [], ['js' => 'alpine:my_form']);
+        $this->assertFieldRendersHtml('<input id="[[form-handle]]-form-cat_selfie-field" type="file" name="cat_selfie" x-model="cat_selfie">', $config, [], ['js' => 'alpine']);
+        $this->assertFieldRendersHtml('<input id="[[form-handle]]-form-cat_selfie-field" type="file" name="cat_selfie" x-model="my_form.cat_selfie">', $config, [], ['js' => 'alpine:my_form']);
     }
 
     #[Test]
@@ -427,8 +427,8 @@ public function it_dynamically_renders_field_with_fallback_to_default_partial_x_
             ],
         ];
 
-        $this->assertFieldRendersHtml('<input id="test-form-custom-field" type="text" name="custom" value="" x-model="custom">', $config, [], ['js' => 'alpine']);
-        $this->assertFieldRendersHtml('<input id="test-form-custom-field" type="text" name="custom" value="" x-model="my_form.custom">', $config, [], ['js' => 'alpine:my_form']);
+        $this->assertFieldRendersHtml('<input id="[[form-handle]]-form-custom-field" type="text" name="custom" value="" x-model="custom">', $config, [], ['js' => 'alpine']);
+        $this->assertFieldRendersHtml('<input id="[[form-handle]]-form-custom-field" type="text" name="custom" value="" x-model="my_form.custom">', $config, [], ['js' => 'alpine:my_form']);
     }
 
     #[Test]
diff --git a/tests/Tags/Form/FormCreateTest.php b/tests/Tags/Form/FormCreateTest.php
index 89375ada1f..f3b73304e2 100644
--- a/tests/Tags/Form/FormCreateTest.php
+++ b/tests/Tags/Form/FormCreateTest.php
@@ -78,7 +78,7 @@ public function it_dynamically_renders_fields_array()
     public function it_dynamically_renders_text_field()
     {
         $this->assertFieldRendersHtml([
-            '<input id="test-form-favourite_animal-field" type="text" name="favourite_animal" value="">',
+            '<input id="[[form-handle]]-form-favourite_animal-field" type="text" name="favourite_animal" value="">',
         ], [
             'handle' => 'favourite_animal',
             'field' => [
@@ -87,7 +87,7 @@ public function it_dynamically_renders_text_field()
         ]);
 
         $this->assertFieldRendersHtml([
-            '<input id="test-form-favourite_animal-field" type="text" name="favourite_animal" value="buffalo">',
+            '<input id="[[form-handle]]-form-favourite_animal-field" type="text" name="favourite_animal" value="buffalo">',
         ], [
             'handle' => 'favourite_animal',
             'field' => [
@@ -102,7 +102,7 @@ public function it_dynamically_renders_text_field()
     public function it_dynamically_renders_text_field_with_custom_input_type()
     {
         $this->assertFieldRendersHtml([
-            '<input id="test-form-age-field" type="number" name="age" value="">',
+            '<input id="[[form-handle]]-form-age-field" type="number" name="age" value="">',
         ], [
             'handle' => 'age',
             'field' => [
@@ -112,7 +112,7 @@ public function it_dynamically_renders_text_field_with_custom_input_type()
         ]);
 
         $this->assertFieldRendersHtml([
-            '<input id="test-form-age-field" type="number" name="age" value="24">',
+            '<input id="[[form-handle]]-form-age-field" type="number" name="age" value="24">',
         ], [
             'handle' => 'age',
             'field' => [
@@ -128,7 +128,7 @@ public function it_dynamically_renders_text_field_with_custom_input_type()
     public function it_dynamically_renders_textarea_field()
     {
         $this->assertFieldRendersHtml([
-            '<textarea id="test-form-comment-field" name="comment" rows="5"></textarea>',
+            '<textarea id="[[form-handle]]-form-comment-field" name="comment" rows="5"></textarea>',
         ], [
             'handle' => 'comment',
             'field' => [
@@ -137,7 +137,7 @@ public function it_dynamically_renders_textarea_field()
         ]);
 
         $this->assertFieldRendersHtml([
-            '<textarea id="test-form-comment-field" name="comment" rows="5">Hey hoser!</textarea>',
+            '<textarea id="[[form-handle]]-form-comment-field" name="comment" rows="5">Hey hoser!</textarea>',
         ], [
             'handle' => 'comment',
             'field' => [
@@ -152,11 +152,11 @@ public function it_dynamically_renders_textarea_field()
     public function it_dynamically_renders_checkboxes_field()
     {
         $this->assertFieldRendersHtml([
-            '<label><input id="test-form-favourite_animals-field-cat-option" type="checkbox" name="favourite_animals[]" value="cat">Cat</label>',
+            '<label><input id="[[form-handle]]-form-favourite_animals-field-cat-option" type="checkbox" name="favourite_animals[]" value="cat">Cat</label>',
             '<br>',
-            '<label><input id="test-form-favourite_animals-field-armadillo-option" type="checkbox" name="favourite_animals[]" value="armadillo">Armadillo</label>',
+            '<label><input id="[[form-handle]]-form-favourite_animals-field-armadillo-option" type="checkbox" name="favourite_animals[]" value="armadillo">Armadillo</label>',
             '<br>',
-            '<label><input id="test-form-favourite_animals-field-rat-option" type="checkbox" name="favourite_animals[]" value="rat">rat</label>',
+            '<label><input id="[[form-handle]]-form-favourite_animals-field-rat-option" type="checkbox" name="favourite_animals[]" value="rat">rat</label>',
         ], [
             'handle' => 'favourite_animals',
             'field' => [
@@ -170,11 +170,11 @@ public function it_dynamically_renders_checkboxes_field()
         ]);
 
         $this->assertFieldRendersHtml([
-            '<label><input id="test-form-favourite_animals-field-cat-option" type="checkbox" name="favourite_animals[]" value="cat" checked>Cat</label>',
+            '<label><input id="[[form-handle]]-form-favourite_animals-field-cat-option" type="checkbox" name="favourite_animals[]" value="cat" checked>Cat</label>',
             '<br>',
-            '<label><input id="test-form-favourite_animals-field-armadillo-option" type="checkbox" name="favourite_animals[]" value="armadillo">Armadillo</label>',
+            '<label><input id="[[form-handle]]-form-favourite_animals-field-armadillo-option" type="checkbox" name="favourite_animals[]" value="armadillo">Armadillo</label>',
             '<br>',
-            '<label><input id="test-form-favourite_animals-field-rat-option" type="checkbox" name="favourite_animals[]" value="rat" checked>rat</label>',
+            '<label><input id="[[form-handle]]-form-favourite_animals-field-rat-option" type="checkbox" name="favourite_animals[]" value="rat" checked>rat</label>',
         ], [
             'handle' => 'favourite_animals',
             'field' => [
@@ -194,9 +194,9 @@ public function it_dynamically_renders_checkboxes_field()
     public function it_dynamically_renders_inline_checkboxes_field()
     {
         $this->assertFieldRendersHtml([
-            '<label><input id="test-form-favourite_animals-field-cat-option" type="checkbox" name="favourite_animals[]" value="cat">Cat</label>',
-            '<label><input id="test-form-favourite_animals-field-armadillo-option" type="checkbox" name="favourite_animals[]" value="armadillo">Armadillo</label>',
-            '<label><input id="test-form-favourite_animals-field-rat-option" type="checkbox" name="favourite_animals[]" value="rat">rat</label>',
+            '<label><input id="[[form-handle]]-form-favourite_animals-field-cat-option" type="checkbox" name="favourite_animals[]" value="cat">Cat</label>',
+            '<label><input id="[[form-handle]]-form-favourite_animals-field-armadillo-option" type="checkbox" name="favourite_animals[]" value="armadillo">Armadillo</label>',
+            '<label><input id="[[form-handle]]-form-favourite_animals-field-rat-option" type="checkbox" name="favourite_animals[]" value="rat">rat</label>',
         ], [
             'handle' => 'favourite_animals',
             'field' => [
@@ -211,9 +211,9 @@ public function it_dynamically_renders_inline_checkboxes_field()
         ]);
 
         $this->assertFieldRendersHtml([
-            '<label><input id="test-form-favourite_animals-field-cat-option" type="checkbox" name="favourite_animals[]" value="cat" checked>Cat</label>',
-            '<label><input id="test-form-favourite_animals-field-armadillo-option" type="checkbox" name="favourite_animals[]" value="armadillo">Armadillo</label>',
-            '<label><input id="test-form-favourite_animals-field-rat-option" type="checkbox" name="favourite_animals[]" value="rat" checked>rat</label>',
+            '<label><input id="[[form-handle]]-form-favourite_animals-field-cat-option" type="checkbox" name="favourite_animals[]" value="cat" checked>Cat</label>',
+            '<label><input id="[[form-handle]]-form-favourite_animals-field-armadillo-option" type="checkbox" name="favourite_animals[]" value="armadillo">Armadillo</label>',
+            '<label><input id="[[form-handle]]-form-favourite_animals-field-rat-option" type="checkbox" name="favourite_animals[]" value="rat" checked>rat</label>',
         ], [
             'handle' => 'favourite_animals',
             'field' => [
@@ -234,11 +234,11 @@ public function it_dynamically_renders_inline_checkboxes_field()
     public function it_dynamically_renders_radio_field()
     {
         $this->assertFieldRendersHtml([
-            '<label><input id="test-form-favourite_animal-field-cat-option" type="radio" name="favourite_animal" value="cat">Cat</label>',
+            '<label><input id="[[form-handle]]-form-favourite_animal-field-cat-option" type="radio" name="favourite_animal" value="cat">Cat</label>',
             '<br>',
-            '<label><input id="test-form-favourite_animal-field-armadillo-option" type="radio" name="favourite_animal" value="armadillo">Armadillo</label>',
+            '<label><input id="[[form-handle]]-form-favourite_animal-field-armadillo-option" type="radio" name="favourite_animal" value="armadillo">Armadillo</label>',
             '<br>',
-            '<label><input id="test-form-favourite_animal-field-rat-option" type="radio" name="favourite_animal" value="rat">rat</label>',
+            '<label><input id="[[form-handle]]-form-favourite_animal-field-rat-option" type="radio" name="favourite_animal" value="rat">rat</label>',
         ], [
             'handle' => 'favourite_animal',
             'field' => [
@@ -252,11 +252,11 @@ public function it_dynamically_renders_radio_field()
         ]);
 
         $this->assertFieldRendersHtml([
-            '<label><input id="test-form-favourite_animal-field-cat-option" type="radio" name="favourite_animal" value="cat">Cat</label>',
+            '<label><input id="[[form-handle]]-form-favourite_animal-field-cat-option" type="radio" name="favourite_animal" value="cat">Cat</label>',
             '<br>',
-            '<label><input id="test-form-favourite_animal-field-armadillo-option" type="radio" name="favourite_animal" value="armadillo" checked>Armadillo</label>',
+            '<label><input id="[[form-handle]]-form-favourite_animal-field-armadillo-option" type="radio" name="favourite_animal" value="armadillo" checked>Armadillo</label>',
             '<br>',
-            '<label><input id="test-form-favourite_animal-field-rat-option" type="radio" name="favourite_animal" value="rat">rat</label>',
+            '<label><input id="[[form-handle]]-form-favourite_animal-field-rat-option" type="radio" name="favourite_animal" value="rat">rat</label>',
         ], [
             'handle' => 'favourite_animal',
             'field' => [
@@ -276,9 +276,9 @@ public function it_dynamically_renders_radio_field()
     public function it_dynamically_renders_inline_radio_field()
     {
         $this->assertFieldRendersHtml([
-            '<label><input id="test-form-favourite_animal-field-cat-option" type="radio" name="favourite_animal" value="cat">Cat</label>',
-            '<label><input id="test-form-favourite_animal-field-armadillo-option" type="radio" name="favourite_animal" value="armadillo">Armadillo</label>',
-            '<label><input id="test-form-favourite_animal-field-rat-option" type="radio" name="favourite_animal" value="rat">rat</label>',
+            '<label><input id="[[form-handle]]-form-favourite_animal-field-cat-option" type="radio" name="favourite_animal" value="cat">Cat</label>',
+            '<label><input id="[[form-handle]]-form-favourite_animal-field-armadillo-option" type="radio" name="favourite_animal" value="armadillo">Armadillo</label>',
+            '<label><input id="[[form-handle]]-form-favourite_animal-field-rat-option" type="radio" name="favourite_animal" value="rat">rat</label>',
         ], [
             'handle' => 'favourite_animal',
             'field' => [
@@ -293,9 +293,9 @@ public function it_dynamically_renders_inline_radio_field()
         ]);
 
         $this->assertFieldRendersHtml([
-            '<label><input id="test-form-favourite_animal-field-cat-option" type="radio" name="favourite_animal" value="cat">Cat</label>',
-            '<label><input id="test-form-favourite_animal-field-armadillo-option" type="radio" name="favourite_animal" value="armadillo" checked>Armadillo</label>',
-            '<label><input id="test-form-favourite_animal-field-rat-option" type="radio" name="favourite_animal" value="rat">rat</label>',
+            '<label><input id="[[form-handle]]-form-favourite_animal-field-cat-option" type="radio" name="favourite_animal" value="cat">Cat</label>',
+            '<label><input id="[[form-handle]]-form-favourite_animal-field-armadillo-option" type="radio" name="favourite_animal" value="armadillo" checked>Armadillo</label>',
+            '<label><input id="[[form-handle]]-form-favourite_animal-field-rat-option" type="radio" name="favourite_animal" value="rat">rat</label>',
         ], [
             'handle' => 'favourite_animal',
             'field' => [
@@ -316,7 +316,7 @@ public function it_dynamically_renders_inline_radio_field()
     public function it_dynamically_renders_select_field()
     {
         $this->assertFieldRendersHtml([
-            '<select id="test-form-favourite_animal-field" name="favourite_animal">',
+            '<select id="[[form-handle]]-form-favourite_animal-field" name="favourite_animal">',
             '<option value>Please select...</option>',
             '<option value="cat">Cat</option>',
             '<option value="armadillo">Armadillo</option>',
@@ -335,7 +335,7 @@ public function it_dynamically_renders_select_field()
         ]);
 
         $this->assertFieldRendersHtml([
-            '<select id="test-form-favourite_animal-field" name="favourite_animal">',
+            '<select id="[[form-handle]]-form-favourite_animal-field" name="favourite_animal">',
             '<option value>Please select...</option>',
             '<option value="cat" selected>Cat</option>',
             '<option value="armadillo">Armadillo</option>',
@@ -360,7 +360,7 @@ public function it_dynamically_renders_select_field()
     public function it_dynamically_renders_multiple_select_field()
     {
         $this->assertFieldRendersHtml([
-            '<select id="test-form-favourite_animals-field" name="favourite_animals[]" multiple>',
+            '<select id="[[form-handle]]-form-favourite_animals-field" name="favourite_animals[]" multiple>',
             '<option value="cat">Cat</option>',
             '<option value="armadillo">Armadillo</option>',
             '<option value="rat">rat</option>',
@@ -379,7 +379,7 @@ public function it_dynamically_renders_multiple_select_field()
         ]);
 
         $this->assertFieldRendersHtml([
-            '<select id="test-form-favourite_animals-field" name="favourite_animals[]" multiple>',
+            '<select id="[[form-handle]]-form-favourite_animals-field" name="favourite_animals[]" multiple>',
             '<option value="cat" selected>Cat</option>',
             '<option value="armadillo">Armadillo</option>',
             '<option value="rat" selected>rat</option>',
@@ -404,7 +404,7 @@ public function it_dynamically_renders_multiple_select_field()
     public function it_dynamically_renders_asset_field()
     {
         $this->assertFieldRendersHtml([
-            '<input id="test-form-cat_selfie-field" type="file" name="cat_selfie">',
+            '<input id="[[form-handle]]-form-cat_selfie-field" type="file" name="cat_selfie">',
         ], [
             'handle' => 'cat_selfie',
             'field' => [
@@ -419,7 +419,7 @@ public function it_dynamically_renders_asset_field()
     public function it_dynamically_renders_multiple_assets_field()
     {
         $this->assertFieldRendersHtml([
-            '<input id="test-form-cat_selfies-field" type="file" name="cat_selfies[]" multiple>',
+            '<input id="[[form-handle]]-form-cat_selfies-field" type="file" name="cat_selfies[]" multiple>',
         ], [
             'handle' => 'cat_selfies',
             'field' => [
@@ -433,7 +433,7 @@ public function it_dynamically_renders_multiple_assets_field()
     public function it_dynamically_renders_field_with_fallback_to_default_partial()
     {
         $this->assertFieldRendersHtml([
-            '<input id="test-form-custom-field" type="text" name="custom" value="">',
+            '<input id="[[form-handle]]-form-custom-field" type="text" name="custom" value="">',
         ], [
             'handle' => 'custom',
             'field' => [
@@ -442,7 +442,7 @@ public function it_dynamically_renders_field_with_fallback_to_default_partial()
         ]);
 
         $this->assertFieldRendersHtml([
-            '<input id="test-form-custom-field" type="text" name="custom" value="fall back to default partial">',
+            '<input id="[[form-handle]]-form-custom-field" type="text" name="custom" value="fall back to default partial">',
         ], [
             'handle' => 'custom',
             'field' => [
diff --git a/tests/Tags/Form/FormTestCase.php b/tests/Tags/Form/FormTestCase.php
index 0fe6227cc8..86cb21d52c 100644
--- a/tests/Tags/Form/FormTestCase.php
+++ b/tests/Tags/Form/FormTestCase.php
@@ -115,7 +115,9 @@ protected function assertFieldRendersHtml($expectedHtmlParts, $fieldConfig, $old
             $this->tag("{{ form:{$handle} {$extraParams}}}{{ fields }}{{ field}}{{ /fields }}{{ /form:{$handle} }}", $oldData)
         );
 
-        $expected = collect(Arr::wrap($expectedHtmlParts))->implode('');
+        $expected = collect(Arr::wrap($expectedHtmlParts))
+            ->map(fn($html) => str_replace('[[form-handle]]', $handle, $html)) // allow testing against dynamic form handle
+            ->implode('');
 
         $this->assertStringContainsString($expected, $output);
     }

From 059a5783dc9c956f44273232e3a52c67919f438a Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Fri, 25 Oct 2024 10:21:30 +0200
Subject: [PATCH 20/21] Add test against form handle in id attributes

---
 tests/Tags/Form/FormCreateTest.php | 12 ++++++++++++
 tests/Tags/Form/FormTestCase.php   |  2 +-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/tests/Tags/Form/FormCreateTest.php b/tests/Tags/Form/FormCreateTest.php
index f3b73304e2..3be2cc95ad 100644
--- a/tests/Tags/Form/FormCreateTest.php
+++ b/tests/Tags/Form/FormCreateTest.php
@@ -74,6 +74,18 @@ public function it_dynamically_renders_fields_array()
         $this->assertEquals(['Full Name', 'Email Address', 'Message'], $fieldOrder[1]);
     }
 
+    #[Test]
+    public function it_dynamically_renders_with_form_handle()
+    {
+        foreach (['contact', 'contact-form', 'kontakt_formular'] as $handle) {
+            $this->createForm(handle: $handle);
+            $output = $this->normalizeHtml($this->tag('{{ form in="'.$handle.'" }}{{ fields }}{{ field }}{{ /fields }}{{ /form }}'));
+            $this->assertStringContainsString('<input id="'.$handle.'-form-name-field"', $output);
+            $this->assertStringContainsString('<input id="'.$handle.'-form-email-field"', $output);
+            $this->assertStringContainsString('<textarea id="'.$handle.'-form-message-field"', $output);
+        }
+    }
+
     #[Test]
     public function it_dynamically_renders_text_field()
     {
diff --git a/tests/Tags/Form/FormTestCase.php b/tests/Tags/Form/FormTestCase.php
index 86cb21d52c..c6ee6695ac 100644
--- a/tests/Tags/Form/FormTestCase.php
+++ b/tests/Tags/Form/FormTestCase.php
@@ -116,7 +116,7 @@ protected function assertFieldRendersHtml($expectedHtmlParts, $fieldConfig, $old
         );
 
         $expected = collect(Arr::wrap($expectedHtmlParts))
-            ->map(fn($html) => str_replace('[[form-handle]]', $handle, $html)) // allow testing against dynamic form handle
+            ->map(fn ($html) => str_replace('[[form-handle]]', $handle, $html)) // allow testing against dynamic form handle
             ->implode('');
 
         $this->assertStringContainsString($expected, $output);

From 949aac37eb5ffb21237c39801f72285de0495c56 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Thu, 19 Dec 2024 17:38:21 -0500
Subject: [PATCH 21/21] private

---
 src/Tags/Concerns/RendersForms.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Tags/Concerns/RendersForms.php b/src/Tags/Concerns/RendersForms.php
index 2386ee64be..8f86e7edec 100644
--- a/src/Tags/Concerns/RendersForms.php
+++ b/src/Tags/Concerns/RendersForms.php
@@ -180,7 +180,7 @@ protected function minifyFieldHtml($html)
     /**
      * Generate a field id to associate input with label.
      */
-    protected function generateFieldId(string $fieldHandle, ?string $formName = null): string
+    private function generateFieldId(string $fieldHandle, ?string $formName = null): string
     {
         return ($formName ?? 'default').'-form-'.$fieldHandle.'-field';
     }