This question already has answers here:
<button> vs. <input type="button" />. Which to use?
(16 answers)
Closed 2 years ago.
I'm a little confused. What is the difference between these. Please don't reference really old postings. I notice that accessing some of the styles are different inline in html as well as in style sheets.
<input type=button>
vs
<button>
I guess I'm wondering which one will out live which?
or which is the best when taking into account ease of compatibility between all the general technologies that go into website creation? aka. which is going to cause the least amount of trouble
Unlike <input> tags, <button>'s can contain other html elements as their labels. <input type="button"> can only accept a string as its label text (css styles not withstanding).
Additionally, the <button> element accepts a wide range of uncommon but useful attributes regarding multiple forms and click actions. See the MDN page for more details.
As for one "out living" the other, the HTML standard is remarkably backwards compatible. Humanity will put men on Mars before either is eliminated from the HTML standard.
Inside a <button> element you can put content, like text or images.
eg: <button type="button" onclick="alert('Hello world!')">Click Me!</button>
If you use the <button> element in an HTML form, different browsers may submit different values. So always use <input type="button"> to create buttons in an HTML form.
input type=button
The tag is the easiest way to submit a form. When a customer clicks on the button, it submits automatically. You don't need to add any scripts, the browsers know to submit the form when a submit INPUT tag is clicked.
The problem is that this button is very ugly and plain. You can't add images to it. You can style it just like any other element, but it can still feel like an ugly button.
Use the INPUT method when your form has to be accesible even in browsers that have JavaScript turned off.
button
The BUTTON element offers more options for submiting forms. You can put anything inside a BUTTON element and turn it into a submit button. Most commonly people use images and text. But you could create a DIV and make that entire thing a submit button if you wanted to.
The biggest drawback to the BUTTON element is that it doesn't automatically submit the form. This means there needs to be some type of script to activate it. And so it is less accessible than the INPUT method. Any user who doesn't have JavaScript turned on won't be able to submit a form with only aBUTTON element to submit it.
Use the BUTTON method on forms that are not as critical. Also, this is a great way to add additional submission options within one form.
Source: https://www.thoughtco.com/buttons-on-forms-3464313
Use <button> from input element if you want to create button in a form.
And use button tag if you want to create button for an action.
More Info: Difference between <input type='submit' /> and <button type='submit'>text</button>
depends where you want to use it. input should be inside form, where button can be used anywhere.
Related
Hello any accessibility gurus,
I want to have this button element, when tabbed on, would trigger the screen read of an input element instead.
I tried pointing the aria-labelledby from the button to the input, to have the input's aria-label being read out. But the button still reads out its own description, when tabbed on.
<fieldset>
<input type="radio" id="inputid" aria-label="read me">
<button aria-labelledby="inputid">don't read me</button>
</fieldset>
Is there a way to read another element's content?
Thank you,
2022-12-06 Edit:
Following Andy's comment, the input element is only visually hidden, so it was moved offscreen with css left: -10000px.
I believe aria-labelledby is not used according to the standards, which might explain undefined behaviour.
The Accessible Name and Description, step C mentions the following:
If the embedded control has role textbox, return its value.
That means that if an <input>, which has implicit role textbox, is used as part of an accessible name, not its label, but its value is used as the name.
Further, the ARIA standard on aria-labelledby reads:
If the interface is such that it is not possible to have a visible label on the screen, authors SHOULD use aria-label […]
The main purpose of aria-labelleby is to refer to part of the visible contents of an element like a <form> to label it. Most commonly, this would be a heading like <h2>.
The use case of this question is currently unclear to me. The example provided does not make sense with a single radio input.
If the <input> is completely hidden, visually and from assistive technology, why is it there in the first place? <input type="hidden"> would be the more correct input to use if the form data is needed
If it’s only hidden visually, both the button and the input can be focussed, which is terribly confusing. Does the input appear on screen once it receives focus?
I want to use a <button> in a website for a messaging function.
However I am confused with the type of button which I should use. As whether I should use submit, reset or else can I use <input> instead of a <button>?
If you are talking about just a button to submit a form or within a live chat using submit would be perfectly fine!
To have a button in your website, be it for a messaging function or not, both the <input type="button"> and the <button> tags can be used. The difference between the two tags is that the <button> tag can hold content such as images and text, whereas, with the <input> approach, you cannot (as it is a null element, an empty element, you could say).
Hope this helps!
I am creating a wordpress theme, and inside the admin panel I am creating a live preview of a search box. The user can style the search box directly from the admin panel. It's a very basic html code:
<li class="epurus_nav_search">
<form class="search_form">
<input class=nav_search_input" type="search" name="s" placeholder="Search..."/>
<input type="button" class="nav_search_submit" value="Go"/>
</form>
</li>
Now I noticed, that the entire admin live demo itself, is already an entire form field, so I can't use the above <form> (it breaks the websites when a form is inside a form). I have replaced the form tag with <span> however it often gives different css results than the form tag.
I am seeing all kind of different behaviours between the demo and the front end of the website. Paddings, margin and line-heights are all totally off, even though I have set them all to 0 or some other value.
Is there anyway I can use a form within a form, or is there another tag that comes close to <form>?
I am open to any tag such as span, div or even javascript solutions. The one thing I can't do, is move the HTML chunk outside of the admin form.
You can't insert a form element inside anothe one, as it will submit the parent and not the child. Also it may have fields in conflict.
A form is a block element, so it's more similar to a div than a span. I'd use that to start with. Starting from this point, I'd use a class like <div class="form"> and start styling it to fake the same form behavior. Simpliest way is to first analyse the processed form CSS (via developer tools) and then copy/paste the ones that affect forms only (i.e. not body inheritances etc).
Eventually you'd block the default submit button's event and submit the form in another way (ajax maybe?).
Try using <span> with display: block;
This should work.
EDIT:
I have had a brainwave. Put the div into the form and set all the styles to inherit
Why does the button name appear left from it ?
Try this,
<input type="button" value="Query" onclick="query()"/>
in place of tag because Different browsers use different default types for the element.
If you use the element in an HTML form, different browsers may submit different values. Use to create buttons in an HTML form.
I'm developing a website (ASP.NET Webform with C#) where I have a <button> element.
Here's the code snippet:
<a href="ThisPage.aspx" ID="myButtonID" runat="server">
<button>Configure new trip</button>
</a>
When I use Firefox or Chrome, this code does a "GET" over this ThisPage.aspx. That's what I want to do, actually.
The question is that the same code does "POST" when I use Opera. Does anyone know what shall I do to make this button act the same way using Opera?
Probably because FF/Chrome handles the click on the <a /> tag and Opera does it on the <button /> tag.
What you are looking for (I guess) is having a <a /> tag renderes as a button? In that case have a look at this for at good tutortial on how to style an <a /> tag like a button
What you are doing is to some extent similar to adding a textbox to an anchor tag, i.e. sematically wrong.
I'm guessing it's within a form tag?
If so, try setting the method of the form to "get".
If you're not doing any AJAX operations, and clicking on the button is expected to navigate to 'ThisPage.aspx', then I'd consider styling the <a> element - as suggested by #veggerby - and removing the <button> </button> elements.
However, this could be confusing for the user, who might not expect a button within a form to be a navigational element. I'd tend to keep the form and its controls visually separate from other elements on the page - using a <fieldset>, maybe.
How do Firefox/Chrome submit the "GET"? Are there any parameters? If you want to link to ThisPage.aspx then just do it without a button.
A form can be GET or POST, but not both. So if the button is inside a form it will always submit the data from the form, and should use whatever method is set on the form.
Perhaps you can post the actual HTML output to the browser, rather than the ASP code? I have a feeling you may be generating a form-within-a-form. In which case the solution would be to keep the forms separate if possible.