Stundenaufzeichnung/src/routes/user/+page.svelte

<script lang="ts">

	import type { PageProps } from "./$types"
	import { enhance } from "$app/forms"

	const { data, form }: PageProps = $props()

</script>

<form method="POST" id="form_edit" action="?/edit" use:enhance>
<input type="hidden" name="id" value={data.user.id} />

<div class="root">
	
	<h1>Benutzer</h1>

	<p>{form?.message}</p>

	<table>
		<colgroup>
			<col class="leader2" />
			<col class="form2" />
		</colgroup>
		<thead>
			<tr><th colspan="2">Persönliche Daten</th></tr>
		</thead>
		<tbody>
			<tr>
				<td>Name</td>
				<td><input type="text" name="name" value={data.user.name} /></td>
			</tr>
			<tr>
				<td>Geschlecht</td>
				<td><select name="gender">
					<option>M</option>
					<option>W</option></select>
				</td>
			</tr>
			<tr>
				<td>Addresse</td>
				<td><input type="text" name="address" value={data.user.address} /></td>
			</tr>
		</tbody>
	</table>

	<table>
		<colgroup>
			<col class="leader3" />
			<col class="form3" />
			<col class="form3" />
		</colgroup>
		<thead>
			<tr><th colspan="3">Benutzer</th></tr>
		</thead>
		<tbody>
			<tr>
				<td>Benutzername</td>
				<td colspan="2"><input type="text" name="username" value={data.user.username} /></td>
			</tr>
			<tr>
				<td>Passwort ändern</td>
				<td><input type="password" name="password1" /></td>
				<td><input type="password" name="password2" placeholder="Wiederholen"/></td>
			</tr>
		</tbody>
	</table>

	<button type="submit">Speichern</button>

</div>

</form>

<style>

.root {	
	margin: auto;
	width: 50%;
}


table {
	width: 100%;
	margin-bottom: 30px;
}

td {
	padding: 5px;
}

.form2 {
	width: 75%;
}
.form3 {
	width: 37.5%
}

input {
	width: 100%;
	border: none;
	border-bottom: solid 1px black;
}

button {
	width: 15%;
	margin-left: 85%;
}

</style>