feat(#79): Enhance form security and accessibility

src/routes/contact/+page.svelte

@@ -31,7 +31,9 @@
 		action="?"
 		use:enhance={handleSubmit}
 		class="max-w-lg mx-auto p-4 bg-base-200 rounded-lg shadow-md"
+		aria-labelledby="contact-form-title"
 	>
+		<h2 id="contact-form-title" class="text-xl font-bold mb-4">Contact Us</h2>
 		{#if error}
 			<div class="alert alert-error shadow-lg mb-4">
 				<div>
@@ -41,7 +43,7 @@
 		{/if}
 		<div class="form-control mb-4">
 			<label for="name" class="label">
-				<span class="label-text">Name</span>
+				<span class="label-text">Name *</span>
 			</label>
 			<input
 				id="name"
@@ -49,13 +51,16 @@
 				type="text"
 				bind:value={name}
 				class="input input-bordered"
+				aria-required="true"
+				minlength="2"
+				maxlength="100"
 				required
 			/>
 		</div>
 
 		<div class="form-control mb-4">
 			<label for="email" class="label">
-				<span class="label-text">Email</span>
+				<span class="label-text">Email *</span>
 			</label>
 			<input
 				id="email"
@@ -63,21 +68,28 @@
 				type="email"
 				bind:value={email}
 				class="input input-bordered"
+				aria-required="true"
+				minlength="5"
+				maxlength="100"
 				required
 			/>
 		</div>
 
 		<div class="form-control mb-4">
 			<label for="message" class="label">
-				<span class="label-text">Message</span>
+				<span class="label-text">Message *</span>
 			</label>
 			<textarea
 				id="message"
 				name="message"
 				bind:value={message}
 				class="textarea textarea-bordered"
+				aria-required="true"
+				minlength="10"
+				maxlength="1000"
 				required
 			></textarea>
+			<small class="text-sm mt-1">Maximum 1000 characters</small>
 		</div>
 
 		<div class="form-control">