62 lines
1.4 KiB
Svelte
62 lines
1.4 KiB
Svelte
<script>
|
|
let nombre = "Manuel";
|
|
let apellido = "Riquelme";
|
|
</script>
|
|
|
|
<div class="body w-25 p-6 flex mx-auto">
|
|
<form>
|
|
<div class="form-group mb-3">
|
|
<label
|
|
for="nombre"
|
|
class="text-danger"
|
|
on:mouseover={() => document.getElementById("nombre").focus()}
|
|
on:focus={() => document.getElementById("nombre").focus()}>Nombre</label
|
|
>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="nombre"
|
|
placeholder="Introduzca su nombre"
|
|
bind:value={nombre}
|
|
/>
|
|
</div>
|
|
<div class="form-group mb-3">
|
|
<label
|
|
for="apellido"
|
|
class="text-danger"
|
|
on:mouseover={() => document.getElementById("apellido").focus()}
|
|
on:focus={() => document.getElementById("apellido").focus()}
|
|
>Apellido</label
|
|
>
|
|
<input
|
|
type="apellido"
|
|
class="form-control"
|
|
placeholder="Introduzca su apellido"
|
|
bind:value={apellido}
|
|
id="apellido"
|
|
/>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary mb-3">Submit</button>
|
|
<p class="soy label"><strong>Tu eres: </strong>{nombre} {apellido}</p>
|
|
</form>
|
|
</div>
|
|
<div class="flex mx-auto">Cojón</div>
|
|
|
|
<style scoped>
|
|
.body {
|
|
margin: 0;
|
|
display: flex;
|
|
place-items: center;
|
|
min-width: 320px;
|
|
min-height: 100vh;
|
|
}
|
|
input:hover {
|
|
border: 1px solid red;
|
|
}
|
|
.soy:hover {
|
|
color: green;
|
|
text-decoration: underline;
|
|
}
|
|
</style>
|