On a lot of sites, especially those that are more app-like and interactive… there are a lot of links that perform actions like ‘delete’ ‘log out’ etc. Sometimes it’s appropriate for them to look like regular links, but often they want their own class, and don’t make sense as ‘paragraphs’ (At least not to me!)
So how do you go about tagging these types of things? what element? do you have a universal class you always use for them?
Normally they will either be an <a> link or a <submit> button. What you nest these in is up to you, really. But if an <a> link is on its own, it should be wrapped in a block element, and a <p> is usually a good option.
another option is the <button> element which gives you more options with it’s content and styling.
Normally I use a input and class it as the action. Buttons don’t work well because IE6/7 submit all buttons on the page. Which means if someone clicks a delete “button” everything will be deleted by default.
<input type="submit" class="delete" name="frmBlogs[action][delete][34]" value="Delete">
<input type="submit" class="delete" name="frmBlogs[action][delete][35]" value="Delete">
<input type="submit" class="delete" name="frmBlogs[action][delete][12]" value="Delete">
Inputs not pressed are not submitted. So using some array manipulation and flipping the “label” can be kept completely decorative.
Inputs can be styled like any other element can be. The only issue will be hover in IE6 though that could be rectified using JavaScript or not all since its not relevant to the function itself.
Buttons are best avoided, unless used only with JavaScript and handled manually using event listeners because of the difference in how IE handles them – submits them all, not just the one that was clicked. Using them without knowing that has the possibility to do some very destructive things.
The other thing is that you don’t want search engines following the action.Using a an input wrapper in a form avoids that completely. Though its less of an issue with actions because authentication is usually required to proceed with an action in the first place. Still something to consider.
hmmm…I’ve used buttons quite a bit on forms and have had no problems.
If I have a html table displaying, for example, rows from a db table I will have an edit <button> for each row and a checkbox for each row so I can delete multi rows in one submit. Only the row id’s of the checked checkboxes are sent to the php script to delete the selected rows and it works without any problems.
I some what misspoke, its an IE6 thing.