How to Use Text to Submit an HTML Form

Here’s an interesting question: how can you use a text link to submit an HTML form?

Officially, you can’t. There are workarounds, of course, but most of them use Javascript, which means you’re screwed if someone has it switched off.

Since I needed this for a WP plugin I’m developing for a site, I found another way of doing it… and very sneaky it is, too!

Instead of using a real link, simply put label tags around the submit button and the plain text you want to use as a link. Then define the button CSS so it doesn’t display and the text CSS so it looks like a link. Bear in mind that this is probably not good practise at all!

For example, this goes in the HTML form:

And this goes in the CSS:

.invisibutton {
    height: 1px;
    width: 1px;
    display: none;
    vertical-align: text-bottom;
}

label {
    color: (link-color)
    text-decoration: (etc.)
}

And so on for the label definition so it looks like a standard link. The button is invisible but the text is clickable as its label, so it acts like a button.

The one downside is that it made my label text drop a pixel (because of the button). If you want to use the fake link alongside other text, you will have to define the surrounding text class with a “vertical-align: bottom;” to make sure it didn’t look weird.

I have successfully used this method in a WordPress page to create fake links that kick off php scripts (by setting $_POST). Works a charm!

Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *