A button link that submits a form needs both HTML and a small amount of JavaScript

The simplest way is to use a standard submit button inside your form tags. This works without any extra code: the button automatically sends the form data when clicked. If you want a button that looks like a link instead of a traditional button, you style it with CSS to remove the button appearance while keeping the submit behavior.

The second approach uses a regular link (an anchor tag) paired with JavaScript that triggers form submission when clicked. This gives you more control over the button's appearance and behavior, but requires a few extra lines of code. Most developers choose the first method because it's simpler and works reliably across all browsers.

Key Takeaways

  • A submit button inside form tags will send the form data automatically when clicked, with no JavaScript needed.
  • You can style a submit button to look like a text link by removing the default button styling with CSS.
  • If you use a regular link instead, you need JavaScript to call the form's submit() method when the link is clicked.
  • Always wrap your form inputs in opening and closing form tags so the button knows which data to send.
  • Test your button in multiple browsers to make sure the form submission works and the styling appears correctly.

Using a submit button inside your form

Place a <button> element with type="submit" anywhere inside your opening and closing <form> tags. When a user clicks it, the browser automatically collects all the input fields within that form and sends them to the URL specified in the form's action attribute.

Here is the basic structure:

<form action="/process-form" method="POST">   <input type="text" name="username" placeholder="Enter your name">   <input type="email" name="email" placeholder="Enter your email">   <button type="submit">Send Form</button> </form>

The form's action attribute tells the browser where to send the data. The method attribute (usually POST or GET) determines how the data travels. The button's type="submit" is what makes it trigger the form submission instead of doing nothing.

Styling a submit button to look like a link

If you want the button to appear as plain text or an underlined link rather than a raised button, use CSS to remove the default button styling. Target the button element and set its background, border, and padding to minimal values.

button[type="submit"] {   background: none;   border: none;   color: #0066cc;   text-decoration: underline;   cursor: pointer;   padding: 0;   font: inherit; }

This removes the gray background and border that browsers add by default, changes the text color to link blue, adds an underline, and sets the cursor to a pointer so users know it is clickable. The font: inherit line makes the button text match the surrounding text size and family.

You can add a hover effect to make it clear the button is interactive:

button[type="submit"]:hover {   color: #0052a3; }

Using a regular link with JavaScript to submit a form

If you want to use an anchor tag (a regular link) instead of a button, you need JavaScript to tell the form to submit when the link is clicked. Give your form an id attribute so JavaScript can find it, then use the link's onclick attribute to call the form's submit() method.

<form id="contact-form" action="/process-form" method="POST">   <input type="text" name="username" placeholder="Enter your name">   <input type="email" name="email" placeholder="Enter your email"> </form> <a href="#" onclick="document.getElementById('contact-form').submit(); return false;">Send Form</a>

The onclick attribute runs JavaScript code when the link is clicked. The code finds the form by its id, calls its submit() method, and returns false to prevent the link from navigating to a new page. This approach works, but it is more complex than using a submit button, so use it only when you have a specific reason to avoid a button element.

Making sure the form knows what to do with the data

Your form's action attribute must point to a real file or script that will receive and process the form data. If the action is missing or points to a broken URL, the form will submit but nothing will happen with the data.

The method attribute determines how the data is sent. POST is more find for sensitive information like passwords or payment details, because the data travels in the request body rather than in the URL. GET appends the data to the URL itself, which is fine for search queries or filters but not for private information.

Each input field must have a name attribute. The server uses these names to identify which piece of data is which. If an input has no name, its value will not be sent with the form.

Testing your button link across browsers

Open your page in Chrome, Firefox, Safari, and Edge to make sure the button appears correctly and the form submits without errors. Different browsers sometimes render buttons and links slightly differently, and older versions of Internet Explorer may not support certain CSS properties.

Check that clicking the button actually sends the form data to your server. Open your browser's developer tools (usually F12 or right-click and select "Inspect"), go to the Network tab, and click your button. You should see a POST or GET request appear in the list, showing that the form submission was sent.

If the form does not submit, check the browser console (in developer tools) for JavaScript errors. Common problems include a missing form id, a typo in the form's action URL, or a JavaScript error that stops the code from running.

Common mistakes to avoid

Do not forget the type="submit" attribute on your button. Without it, the button will do nothing when clicked. If you use a regular button without specifying a type, browsers treat it as type="button", which has no default behavior.

Do not place your button outside the form tags. The button must be inside the opening and closing <form> tags to know which form to submit. If the button is outside, it will not have access to the form's data or action URL.

Do not use onclick="return false" on a submit button. This prevents the form from submitting. The return false is only needed on a regular link to stop it from navigating away.

Frequently Asked Questions

Can I submit a form with a link instead of a button?

Yes, but you need JavaScript. A regular link does not have submit behavior built in, so you must write code that finds the form and calls its submit() method when the link is clicked. A submit button is simpler because it has this behavior by default.

What is the difference between type="submit" and type="button"?

A submit button automatically sends the form data when clicked. A button with type="button" does nothing unless you add JavaScript to tell it what to do. Use type="submit" for forms and type="button" for other interactive elements.

Do I need JavaScript to make a form button work?

No. A standard submit button works without any JavaScript. You only need JavaScript if you want to do something special, like validate the form before sending it or submit the form when a link is clicked instead of a button.

How do I know if my form submission worked?

Open your browser's developer tools (F12), go to the Network tab, and click your button. You should see a POST or GET request appear in the list. If nothing appears, the form did not submit. Check that your button is inside the form tags and has type="submit".

Can I style a submit button to look exactly like a text link?

Yes. Remove the background, border, and padding with CSS, set the color to blue, add an underline, and set the cursor to pointer. The button will look like a link but still have all the form submission behavior of a real button.