Use labels
This commit is contained in:
parent
6879b056da
commit
95a0a3e004
2 changed files with 1917 additions and 9 deletions
File diff suppressed because one or more lines are too long
|
|
@ -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"
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue