I'm trying to learn the best way to create buttons via HTML/CSS.
I was using clickable div's before, but looks like this was not the best idea ever.
What about button's? Or a href's
Which way is the best to go with today (html5 css3)?
It depends on the behavior you are looking for. If its purpose is to link to another page then use an <a>. If it is for submitting a form or doing some sort of post or get I would use a button.
There is a web based project management product called Basecamp. When they first launched they were using <a> tags as delete buttons next to each individual task. Users who visited their internal pages while using the google web optimizer plugin for chrome were seeing all of their tasks marked as deleted. Google page optimizer looks for links in the page and triggers a click to pre-load future pages.
Let form follow function and you should be good to go :0)
One reason to favor buttons is that buttons are naturally better for accessibility, while using links, spans or other tags fails on that count. To get proper accessibility with those other elements, you have to use ARIA roles to fix them.
That's not a hack per se, since that's part of what ARIA roles are for. But it's an extra thing to learn about and make sure that you get right.
the best way to create buttons in html is to use
or
because when you buttons and inputs of type submit are used by default by the browser when you try to submit a form
for example :
<form action="somepage.php" method="POST">
<input type="text" name="name1">
<textarea></textarea>
<input type="submit" value="submit the form with a input of type submit">
</form>
only when the user click the submit button the form data are submited
BUT , when we use a or divs to play the role of buttons you need to call javascript and ask for help
FINNALY THE GOOD PRACTICE IS TO USE BUTTONS AND INPUT OF TYPE SUBMIT TO PLAY THE ROLE OF BUTTON EVERYTHING ELSE IS A CUSTOMIZATION THAT CAN INCREASE THE TIME TO LOAD THE PAGE
Related
I have a web application that uses old-fashioned HTML forms to submit information to the server. It was recently pointed out that the system does not work in Chrome with translation. (The system has its own internal translation for users, but occasionally someone wants to translate another language back to English for viewing. I got complaints that the system didn't work when viewing another language in Chrome with translation to English, and sure enough it didn't.)
I think I solved the problem by embedding the submit buttons in <span class="notranslate"></span>, but wondered why translation would disable submit buttons in the first place. They are basic <input type=submit value="[label on button]" ... />. Chrome would translate the value attribute (the text labels on the buttons) if the buttons were not in a notranslate span. But somehow that seems to disable them.
The buttons have not been disabled. The issue is that your form will POST/GET the values in the buttons. If these are selected as translated in Chrome by the user then they may not match the conditions required to detect a successful form submit.
E.g. There's a button in your form:
<input type=submit value="Continue" ... />
Google Chrome translates this in German:
<input type=submit value="Fortsetzen" ... />
and it will submit this translated value.
But, your submit detect code is (in php for example):
if (isset($_POST["submit"]) && $_POST["submit"]=="Continue")
so the form will be submitted but the value will not match.
It seems to me this will have been breaking large parts of the internet, not just your system.
BTW thanks for the suggestion: <span class="notranslate">
This problem can be due to faulty html structure of the form.
Things like extra </div> may OK in a normal web page, but after google translation kicks in the browser can no longer show the form in a correct way, causing the submit button to appear outside the form and hence clicks on it does not trigger any action.
By correcting the Dom structure of the form (and/or other parts of the page) the problem can be resolved.
A very basic example:
<form action="somephp.php" method="post">
... some stuff
<input type="submit" name="button1" value="value1" />
<input type="submit" name="button2" value="value2" />
<!-- or maybe even a third or fourth one ... hell knows -->
</form>
While I am well aware that this is possible, I have difficulties in finding documentation or specification, whether this is actually valid or allowed. What is common is one submit and maybe a reset button and that is it. I do not have to deal with this aspect on a daily basis, but now and then I do.
https://html.spec.whatwg.org/multipage/forms.html#forms
https://www.w3.org/TR/html51/sec-forms.html#element-statedef-button-type-submit-button
There is a lot about forms, but not whether it is OK to use several buttons. It is indicated through the way a plural is avoided in terms of the submit button, that several for a single form is not what the standard has in mind.
Therefore, it would be really appreciated whether this aspect is something one should worry about and whether it could pose some problems. Links to points of references would be best. Thanks.
from w3.org "submit buttons: When activated, a submit button submits a form. A form may contain more than one submit button."
see link for full text.
One way to see if it's valid is to use a validator https://validator.w3.org
Looks like it's valid HTML5 http://i.imgur.com/fPm9qiq.png
I think it really doesn't matter if a form has a single Submit button or multiple Submit buttons with a post action. When the form method is Post, it simply posts the whole form data back to server.
When it comes to technology like ASP.Net webforms, having multiple Submit buttons makes a difference, as each button can be linked to a different method that has to be executed in on the server-side but if you are using some platform where you just get the decide the form data and it's all upto you to decide how to process it based on the data state then having two submit buttons in a form is obviously redundant.
For a school project I am using a GET like a link, no parameters being sent, just to go to another page on my website, because the visual requirements we were given have it looking like a button and I didn't feel like styling an <a> tag like a button.
I'm aware that certain things with GET differ from using a link like that a GET cannot be opened in a new tab/window. I couldn't find anything though explaining when to use GET vs linking or if one is preferable to the other.
But since I'm not passing parameters, I'm wondering what really is the difference between using GET and <a> and if there is any reason why I should be using one over the other in this case?
Actually, when you use an "a" tag, if clicked, the browser sends a GET request behind the scenes.
You can use "a" tags, forms, or javascript to make a button / div link to another page (again, a GET request will be sent anyway) like this
<a href="http://example.com">
<div class="btn btn-lg"> link </div>
</a>
Or:
<form action="http://example.com">
<input type="submit" value="link">
</form>
"a" links are preferable to other methods since they are more descriptive regarding what is the element about, since they work in browsers that have JS disabled, and they are better for SEO purposes due to the fact that they are the "standard" way of linking pages.
Is it possible to set the default input focus on an HTML form without using JavaScript, for example:
<html>
<form>
Input 1: <input type="text" name="textbox1"/>
<br/>
Input 2: <input type="text" name="textbox2"/>
</form>
</html>
I want to set the default focus to either of the text-boxes when the form loads without using JavaScript (as I want the behaviour to occur when a user has js disabled).
You can do it in HTML5, but otherwise, you must use JavaScript.
HTML5 allows you to add autofocus to your form element, eg:
<input type="text" name="myInput" autofocus />
This does work in browsers which support HTML5 (Or rather, browsers which support this particular part of HTML5) but as you know, not everybody can use it yet.
Something to be aware of ... if you set a focused form element, then anyone using Assisted Technology (AT) like a screen reader will need to back up to see menus and any other content that is before the focused field.
A preferred method, in my opinion , is to not set focus to any field, except a skip-link if its available. That gives them the option to skip into the pages content or read the page from the top down.
As others have said, without Javascript you can't guarantee a default field. An alternative option you might want to try, if you have multiple fields that a user might want to access is using the accesskey attribute. This will essentially mean a user can return to either of the fields instantly later during browsing, which may come in handy for users of screen readers, etc...
Wikipedias article on this subject is quite useful - http://en.wikipedia.org/wiki/Access_key
This is not possible without some form of scripting. Even Google's home page requires Javascript to focus the search field.
You might be able to use the tabindex attribute and use the lowest value on the default textbox though. Check here for browser support:
http://reference.sitepoint.com/html/object/tabindex#compatibilitysection
The site suggests that
(in almost all other cases—namely form controls and links—the tabindex has excellent support)
Short Version:
Do you know of any way to get an input button (submit) and an anchor tag to render the same visually using CSS and no Javascript?
Long Version:
I'm developing an ASP.NET MVC application. The site contains pages to view the details of or to create or update my models. The page actions are contained at the bottom of the form and typically include Update and Cancel or Edit, Delete and List (if on a details view page). The Update, Edit, and Delete actions post data from a form to the server, while the Cancel and List actions are/can be handled by appropriate GET requests. It's important to note that one of my design goals is to make the site work as identically as possible if Javascript is disabled to the way it does when Javascript is enabled. I also want the UI elements to render the same visually whether the element causes a postback or fires off a GET request.
In order to get the form submissions to work in the absence of Javascript, I think I must use submit buttons. I'm overriding, with CSS, the visually styling of the buttons to render much like the "buttons" on the top of the SO page -- flat, solid-color with plain text. I'd like the actions that generate GET requests to be handled with anchor tags, but I had problems getting these tags and the styled buttons to render identically. There seem to be issues with alignment and font-sizing. I was able to get them close but not identical.
EDIT: Styling differences using buttons and anchors included not being able to get the fonts to render in the same position relative to the baseline within the bounding box and getting the bounding box itself to render at the same size and alignment relative to the container. Things were just a few pixels off one way or the other regardless of my tweaks. If you've been able to get it to work, please let me know. Knowing that it's possible would make it easier to keep trying things until I could get it to work.
One thing I tried was wrapping the GET-actions around a button, styled like the form buttons. This worked great in Firefox, but not in IE7. Clicking on such a button in IE7 didn't propogate the click back to the anchor. What I've come up with now is to create a new form for the GET, using method="GET", associated with the required action. I wrap that around a submit button that has an onclick handler that sets location.href to the URL of the desired action. This renders visually the same and seems to work, even if the form is nested in another form. A minor niggle is that if Javascript is disabled, then my GET url contains a ? at the end instead of being the nice clean url that you would desire.
What I'd like to know is whether anyone else has solved this in a different way that would work better (and maybe require less HTML)? Do you have any other ideas that I could try? Any way to fix the ? on the GET url when the request is submitted as a post when Javascript is turned off?
Sample code below from a details view. I realize that I could (and arguably should) add the onclick handlers via javascript as well, but the code actuall reads better when I do it inline. I'm using HtmlHelper extensions to generate all of the mark up below. I have reformatted it to improve readability.
<form action="../Edit/2" class="inline-form" method="get">
<input class="button"
onclick="location.href='../Edit/2';return false;"
value="Edit"
type="submit" />
</form>
<form action="../Delete/2" class="inline-form" method="post">
<input class="button"
value="Delete"
type="submit" />
</form>
<form action="../List" class="inline-form" method="get">
<input class="button"
onclick="location.href='../List';return false;"
value="List Donors"
type="submit" />
</form>