Use labels

This commit is contained in:
Philip Peterson 2026-06-03 23:33:09 -07:00
parent 6879b056da
commit 95a0a3e004
2 changed files with 1917 additions and 9 deletions

File diff suppressed because one or more lines are too long

View file

@ -378,10 +378,11 @@ function BookingPanel({ service, settings }) {
<div class=${CX.formGrid}> <div class=${CX.formGrid}>
<div> <div>
<label class=${CX.formLabel}> <label class=${CX.formLabel} for="first-name">
First name <span class=${CX.formRequired}>*</span> First (or given) name <span class=${CX.formRequired}>*</span>
</label> </label>
<input <input
id="first-name"
type="text" type="text"
name="first_name" name="first_name"
autocomplete="given-name" autocomplete="given-name"
@ -392,10 +393,11 @@ function BookingPanel({ service, settings }) {
/> />
</div> </div>
<div> <div>
<label class=${CX.formLabel}> <label class=${CX.formLabel} for="last-name">
Last name <span class=${CX.formRequired}>*</span> Last (or family) name <span class=${CX.formRequired}>*</span>
</label> </label>
<input <input
id="last-name"
type="text" type="text"
name="last_name" name="last_name"
autocomplete="family-name" autocomplete="family-name"
@ -406,10 +408,11 @@ function BookingPanel({ service, settings }) {
/> />
</div> </div>
<div class="sm:col-span-2"> <div class="sm:col-span-2">
<label class=${CX.formLabel}> <label class=${CX.formLabel} for="email">
Email address <span class=${CX.formRequired}>*</span> Email address <span class=${CX.formRequired}>*</span>
</label> </label>
<input <input
id="email"
type="email" type="email"
name="email" name="email"
autocomplete="email" autocomplete="email"
@ -420,10 +423,11 @@ function BookingPanel({ service, settings }) {
/> />
</div> </div>
<div class="sm:col-span-2"> <div class="sm:col-span-2">
<label class=${CX.formLabel}> <label class=${CX.formLabel} for="phone">
Phone number <span class=${CX.formRequired}>*</span> Phone number <span class=${CX.formRequired}>*</span>
</label> </label>
<input <input
id="phone"
type="tel" type="tel"
name="phone" name="phone"
autocomplete="tel" autocomplete="tel"
@ -438,8 +442,11 @@ function BookingPanel({ service, settings }) {
</div> </div>
<div class="mb-6"> <div class="mb-6">
<label class=${CX.formLabel}>Comments</label> <label class=${CX.formLabel} for="comments">
Comments
</label>
<textarea <textarea
id="comments"
rows="4" rows="4"
name="comments" name="comments"
autocomplete="off" autocomplete="off"