Should input element be inside form or not?

So I've got a component in react whose purpose is: the user writes a word into an input and presses enter or clicks a link to a go to that word's definition page.

'use client';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowRight } from '@fortawesome/free-solid-svg-icons';
import { useState, useRef, useEffect } from 'react';
import { useSelectedLayoutSegment } from 'next/navigation';
import Link from 'next/link';

function getSearchedWord(word?: string | null) {
    return word ? decodeURIComponent(word) : '';
}

export default function WordForm() {
    const searchedWord = useSelectedLayoutSegment();
    const [word, setWord] = useState(getSearchedWord(searchedWord));
    const linkRef = useRef<HTMLAnchorElement>(null);

    useEffect(() => {
        setWord(getSearchedWord(searchedWord));
    }, [searchedWord]);

    return (
        <nav>
            <form
                onSubmit={(e) => {
                    e.preventDefault();
                    linkRef.current!.click();
                }}
                className="relative mb-6 h-12"
            >
                <label htmlFor="word-input" className="block h-full">
                    <span className="sr-only">Type a Word</span>
                    <input
                        type="text"
                        value={word}
                        onChange={(e) => {
                            setWord(e.target.value);
                        }}
                        id="word-input"
                        placeholder="Type any word"
                        className="block h-full w-full rounded-lg bg-contrast-lower pl-3 pr-14 text-contrast-high placeholder:text-contrast-normal"
                    />
                </label>
                <Link
                    title='Go to word definition page'
                    ref={linkRef}
                    href={`/${word}`}
                    aria-label="Go to word definition page"
                    className="group absolute bottom-0 right-0 top-0 flex items-center px-4"
                >
                    <FontAwesomeIcon
                        icon={faArrowRight}
                        className="text-contrast-low transition-colors group-hover:text-contrast-high group-focus-visible:text-contrast-high"
                    />
                </Link>
            </form>
        </nav>
    );
}

The thing is that I'm not sure whether it is appropriate to include these controls inside a form or not. I'm not submitting data to the server, the controls are the main navigation of the whole website - by the way, the app is just a dictionary app built with next.js. And that's the reason I wrapped everything in a nav element. I just want to know if it is appropriate to include these controls inside a form or not.

According to MDN Web Docs:

Web forms are one of the main points of interaction between a user and a website or application. Forms allow users to enter data, which is generally sent to a web server for processing and storage (see Sending form data later in the module), or used on the client-side to immediately update the interface in some way (for example, add another item to a list, or show or hide a UI feature).

I'm not sending data to a web server for processing, but I'm updating the interface in some way when the user clicks the link to navigate to a word definition page. But I am still in doubt about whether I should be using a form here.

So it looks like you're using the form just for submission, which triggers navigation when the user presses Enter. Since you're not actually submitting data to a server, it might be better to use the form solely for its semantic meaning rather than its functional behavior.

You can still do this with the same navigation functionality without using a form by utilizing the onClick event of the link or even the onKeyPress event of the input field to detect when the Enter key is pressed. This clarify the code and align it better with the intended functionality.

Alternatively you can take a look at this article for further info.

Link: https://shorturl.at/dhq05

Hope that helps :)