How to create a login form in Svelte
Svelte is an open-source JavaScript framework created by Rich Harris in 2016. It is used to build high-performance and efficient web applications. It also offers an efficient way to create forms. Forms are important for user interaction in web applications as they can facilitate the users with logins, registrations, and feedback submissions. Svelte is useful in creating forms due to its reactivity, simplicity, and handling form state.
Expected result
Before creating a login form in Svelte, let’s look at the output below to understand how the form should look.
Getting Started
To build a login form in Svelte, we need to define a few things.
JavaScript logic of the form component
The HTML structure of the form component
Component style using CSS
JavaScript logic of the form component
In Svelte, the key to developing interactive web apps is creating/defining a Svelte component. This component contains the main JavaScript logic of our login form.
<script>let usrnme = '';let paswrd = '';let errorMessage = '';function handleSubmit() {if (usrnme === 'educative' && paswrd === 'educative') {errorMessage = '';alert('Login successful!');usrnme = '';paswrd = '';} else {errorMessage = 'Invalid username or password';}}</script>
HTML structure of the form component
This section describes the component's HTML structure, which includes the login form, button, and other relevant elements.
<main><h2>Login</h2>{#if errorMessage}<p class="error">{errorMessage}</p>{/if}<form on:submit|preventDefault={handleSubmit}><label for="usrnme">Username:</label><input type="text" id="usrnme" bind:value={usrnme} /><label for="paswrd">Password:</label><input type="paswrd" id="paswrd" bind:value={paswrd} /><button type="submit">Log in</button></form></main>
Style of the form component
Styling plays a crucial role in creating a login form that is user-friendly and visually appealing. The code snippet below adds some style to our login form application.
<style>main {max-width: 300px;margin: 0 auto;text-align: center;}label {display: block;margin-top: 10px;}input {width: 100%;padding: 5px;margin-top: 5px;}button {margin-top: 10px;background-color: #007bff;color: white;border: none;padding: 10px 15px;cursor: pointer;}.error {color: red;margin-top: 10px;}</style>
Complete code
The complete code is given below in the src/App.svelte file. By clicking the “Run” button, we can see our login form application.
Note: It will print
Login successfulonly if the value of both theusrnmeandpaswrdfields is set toeducative. Otherwise, it will throw an error.
<script>
let usrnme = '';
let paswrd = '';
let errorMessage = '';
function handleSubmit() {
if (usrnme === 'educative' && paswrd === 'educative') {
errorMessage = '';
alert('Login successful!');
usrnme = '';
paswrd = '';
} else {
errorMessage = 'Invalid username or password';
}
}
</script>
<main>
<h2>Login</h2>
{#if errorMessage}
<p class="error">{errorMessage}</p>
{/if}
<form on:submit|preventDefault={handleSubmit}>
<label for="usrnme">Username:</label>
<input type="text" id="usrnme" bind:value={usrnme} />
<label for="paswrd">Password:</label>
<input type="password" id="paswrd" bind:value={paswrd} />
<button type="submit">Log in</button>
</form>
</main>
<style>
main {
max-width: 300px;
margin: 0 auto;
text-align: center;
}
label {
display: block;
margin-top: 10px;
}
input {
width: 100%;
padding: 5px;
margin-top: 5px;
}
button {
margin-top: 10px;
background-color: #007bff;
color: white;
border: none;
padding: 10px 15px;
cursor: pointer;
}
.error {
color: red;
margin-top: 10px;
}
</style>
In this Answer, we learned how to create a login form in Svelte, which is an essential step in developing interactive web apps. Svelte’s reactive and component-based approach makes it easy to implement such forms.
Free Resources
