How to make a submit button display as a link?

Asked
Active3 hr before
Viewed126 times

9 Answers

submitdisplaybutton
90%

You should use an <a href=""></a> tag that links to a javascript snippet which then submits the form for you.,Is it best practice from a UI standpoint to use something other than a button to submit a form? ,If you use the <a> tag with some javascript, then you have a form without a submit button, which may cause headaches in the future. How do you detect your submit link from your other <a> tags easily? ,Edit2: Made button inherit font style from parent element to make it look like a valid link (previously font size and font family was different for the button).

.submitLink {
   background - color: transparent;
   text - decoration: underline;
   border: none;
   color: blue;
   cursor: pointer;
}
submitLink: focus {
   outline: none;
}
<input type="submit" class="submitLink" value="Submit">
load more v
88%

Linking Submit buttons using Anchor Tag is Easy and Reliable method in HTML. We need to Write/Declare Submit button between Anchor tag’s Starting and Closing tags. By using Anchor tag’s href attribute we can give a Path where we want to Link our Submit Button.,Redirect using HTML Anchor Tags,Make a Button link to another page using Anchor tags.,To link a button to another page in HTML, we can use 2 Different methods.

<html>

<head>
   <title>Video in HTML</title>
</head>

<body>

   <form method="POST" action="myPage.php">
      <input type="submit" />
   </form>

</body>

</html>
load more v
72%

An <input type="submit"> element's value attribute contains a DOMString which is displayed as the button's label. Buttons do not have a true value otherwise.,This attribute is also available on <input type="image"> and <button> elements.,A string indicating the URL to which to submit the data. This takes precedence over the action attribute on the <form> element that owns the <input>.,In addition to the attributes shared by all <input> elements, submit button inputs support the following attributes.

<input type="submit" value="Send Request">
load more v
65%

There are several ways of creating an HTML button, that acts like a link (i.e., clicking on it the user is redirected to the specified URL). You can choose one of the following methods to add a link to the HTML button. ,Another way of creating a button that acts like a link is using the action or formaction attribute within the <form> element., How to Add an HTML Button that Acts Like a Link ,You can add an inline onclick event to the <button> tag.

<!DOCTYPE html>
<html>

<head>
   <title>Title of the document</title>
</head>

<body>
   <button onclick="window.location.href='https://w3docs.com';">
      Click Here
   </button>
</body>

</html>
load more v
75%

Sometimes you may want to use a button to link to another page or website rather than to submit a form or something like that. This is fairly simple to do and can be achieved in several ways.,Another way to add a button is to wrap an input inside form tags. Specify the desired target URL in the form action attribute.,Once you’ve created your link, you can the use CSS to make it look like a button. For instance, you could add a border, a background color, some styles for when the user is hovering the link.,This transforms your entire button into a link.

One way is to simply wrap your <button> tag in an <a> tag:

<a href='https://www.freecodecamp.org/'><button>Link To freeCodeCamp</button></a>
load more v
40%

Add data-toggle="button" to toggle a button’s active state. If you’re pre-toggling a button, you must manually add the .active class and aria-pressed="true" to the <button>.,When using button classes on <a> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers.,In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.,The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>
load more v
22%

There are several methods to create an HTML button that acts as a link. Some of them are discussed below:Note: Adding basic CSS property to the button in every method to make button looks better.,After clicking the button:,Before clicking the button:,Note: The output will be same for every method.

60%

Text to display in an optional confirmation dialog box where a null argument disables the confirmation dialog box and a text argument enables it with the text entered as the confirmation message.,Text to display at the top of the confirmation dialog.,In the confirmation dialog there are two buttons. The confirm button is in the primary position and the cancel button is in the secondary position.,Defines a link to trigger form submission. Links can be used in charts, grids, hierarchy browsers, images, link fields, milestones, pickers, and rich text.

1
2
3
4
5
6
7
8
9
10
11
12
a!linkField(
   links: {
      a!submitLink(
         label: "Delete Request",
         confirmHeader: "Warning!",
         confirmMessage: "This request will be permanently deleted. Do you want to continue?",
         confirmButtonLabel: "Delete Request",
         confirmButtonStyle: "DESTRUCTIVE",
         cancelButtonLabel: "Cancel"
      )
   }
)
1
2
3
4
5
6
7
8
9
10
11
12
a!linkField(
   links: {
      a!submitLink(
         label: "Delete Request",
         confirmHeader: "Warning!",
         confirmMessage: "This request will be permanently deleted. Do you want to continue?",
         confirmButtonLabel: "Delete Request",
         confirmButtonStyle: "DESTRUCTIVE",
         cancelButtonLabel: "Cancel"
      )
   }
)
load more v
48%

Are you making a JavaScript-powered clickable action? Use a button (<button type="button">button</button>),Are you submitting a form? Use a submit input (<input type="submit" value="Submit">),Buttons are for triggering actions. When do you use the <button> element? A good rule is to use a button when there is “no meaningful href.” Here’s another way to think of that: if clicking it doesn’t do anything without JavaScript, it should be a <button>.,Buttons work by being clicked/touched, pressing the Enter key, or pressing the Space key (when focused). Even if you add role="button" to a link or div, you won’t get the spacebar functionality, so at the risk of beating a dead horse, use <button> in those cases.

A basic link

<a href="https://css-tricks.com">CSS-Tricks</a>

You can link “relatively” as well:

<!-- Useful in navigation, but be careful in content that may travel elsewhere (e.g. RSS) -->
<a href="/pages/about.html">About</a>

Links can also be “hash links” or “jump links” by starting with a #:

<a href="#section-2">Section Two</a>
<!-- will jump to... -->
<section id="section-2"></section>

It’s a fairly common UI/UX thing to see a “Back to top” link on sites, particularly where important navigational controls are at the top but there is quite a bit of content to scroll (or otherwise navigate) through. To create a jump link, link to the ID of an element that is at the top of the page where it makes sense to send focus back to.

<a href="#top-of-page">Back to Top</a>

Jump links are sometimes also used to link to other anchor (<a>) elements that have no href attribute. Those are called “placeholder” links:

<a id="section-2"></a>
<h3>Section 2</h3>

A link without an href attribute is the only practical way to disable a link. Why disable a link? Perhaps it’s a link that only becomes active after logging in or signing up.

a: not([href]) {
   /* style a "disabled" link */
}

You can use the target attribute for that, but it is strongly discouraged.

<a href="https://css-tricks.com" target="_blank" rel="noopener noreferrer">
   CSS-Tricks
</a>

The download attribute on a link will instruct the browser to download the linked file rather than opening it within the current page/tab. It’s a nice UX touch.

<a href="/files/file.pdf" download>Download PDF</a>

Here are some basic examples:

<a href="/page/3" rel="next">Next</a>
<a href="/page/1" rel="prev">Previous</a>

<a href="http://creativecommons.org/licenses/by/2.0/" rel="license">cc by 2.0</a>

<a href="/topics/" rel="directory">All Topics</a>

The default role of a link is link, so you do not need to do:

<a role="link" href="/">Link</a>

You’d only need that if you were faking a link, which would be a weird/rare thing to ever need to do, and you’d have to use some JavaScript in addition to this to make it actually follow the link.

<span class="link" tabindex="0" role="link" data-href="/">
   Fake accessible link created using a span
</span>

A useful ARIA role to indicate the current page, like:

<a href="/" aria-current="page">Home</a>
<a href="/contact">Contact</a>
<a href="/about">About/a></a>

Probably not. Save this for giving an iframe a short, descriptive title.

<a title="I don't need to be here" href="/">
   List of Concerts
</a>

If a link only has an icon inside it, like:

<a href="/">😃</a>

<a href="/">
   <svg> ... </svg>
</a>

That isn’t enough contextual information about the link, particularly for accessibility reasons, but potentially for anybody. Links with text are almost always more clear. If you absolutely can’t use text, you can use a pattern like:

<a href="/">
   <!-- Hide the icon from assistive technology -->
   <svg aria-hidden="true" focusable="false"> ... </svg>
   <!-- Acts as a label that is hidden from view -->
   <span class="visually-hidden">Useful link text</span>
</a>

visually-hidden is a class used to visually hide the label text with CSS:

.visually - hidden {
   border: 0;
   clip: rect(0 0 0 0);
   height: 1 px;
   margin: -1 px;
   overflow: hidden;
   padding: 0;
   position: absolute;
   white - space: nowrap;
   width: 1 px;
}

Images can be links if you wrap them in a link. There is no need to use the alt text to say the image is a link, as assistive technology will do that already.

<a href="/buy/puppies/now">
   <img src="puppy.jpg" alt="A happy puppy.">
</a>

You can link a whole area of content, like:

<a href="/article/">
   <div class="card">
      <h2>Card</h2>
      <img src="..." alt="...">
      <p>Content</p>
   </div>
</a>

It’s likely you’ll be changing the style of your links, and also likely you’ll use CSS to do it. I could make all my links red in CSS by doing:

a {
   color: red;
}

Sometimes selecting and styling all links on a page is a bit heavy-handed, as links in navigation might be treated entirely differently than links within text. You can always scope selectors to target links within particular areas like:

/* Navigation links */
nav a {}

/* Links in an article */
article a {}

/* Links contained in an element with a "text" class */
.text a {}

Or select the link directly to style.

.link {
  /* For styling <a class="link" href="/"> */
}

a[aria-current="page"] {
  /* You'll need to apply this attribute yourself, but it's a great pattern to use for active navigation. */
}

These are chainable like any pseudo-class, so you could do something like this if it is useful for your design/UX.

/* Style focus and hover states in a single ruleset */
a: focus: hover {}

We can get clever in CSS with attribute selectors and figure out what kind of resource a link is pointing to, assuming the href value has useful stuff in it.

/* Style all links that include .pdf at the end */
a[href$ = ".pdf"]::after {
   content: " (PDF)";
}

/* Style links that point to Google */
a[href *= "google.com"] {
   color: purple;
}

CSS has an “at-rule” for declaring styles that only take effect on printed media (e.g. printing out a web page). You can include them in any CSS like this:

@media print {
   /* For links in content, visually display the link */
   article a::after {
      content: " ("
      attr(href)
      ")";
   }
}

If you needed to take all the styling off a link (or really any other element for that matter), CSS provides a way to remove all the styles using the all property.

.special - area a {
   all: unset;
   all: revert;

   /* Start from scratch */
   color: purple;
}

You can also remove individual styles with keywords. (Again, this isn’t really unique to links, but is generically useful):

a {
   /* Grab color from nearest parent that sets it */
   color: inherit;

   /* Wipe out style (turn black) */
   color: initial;

   /* Change back to User Agent style (blue) */
   color: revert;
}

Say you wanted to stop the clicking of a link from doing what it normally does: go to that link or jump around the page. In JavaScript, you can usepreventDefault to prevent jumping around.

const jumpLinks = document.querySelectorAll("a[href^='#']");

jumpLinks.forEach(link => {
   link.addEventListener('click', event => {
      event.preventDefault();
      // Do something else instead, like handle the navigation behavior yourself
   });
});

Another JavaScript concern with links is that, when a link to another page is clicked, the page is left and another page loads. That can be problematic for something like a page that contains a form the user is filling out but hasn’t completed. If they click the link and leave the page, they lose their work! Your only opportunity to prevent the user from leaving is by using the beforeunload event.

window.addEventListener("beforeunload", function(event) {
   // Remind user to save their work or whatever.
});

Not very useful. You could make use of that .visually-hidden class we covered to make the links more like:

<a href="/article">
   Read More
   <span class="visually-hidden">
      of the article "Dancing with Rabbits".
      <span>
</a>
load more v

Other "submit-display" queries related to "How to make a submit button display as a link?"