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.
Related
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
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.
This code works fine in Chrome, but does not work in Firefox. If the <button> tag is removed it will work in Firefox.
Is there something I can do to make this work in Firefox?
<button>
#Html.ActionLink("Continue","Index","AlternateName")
</button>
Oh no, <a> is invalid inside <button>. That's invalid markup according to the HTML specification. And when you write broken markup all you get is undefined behavior which in addition could vary between user agents, which by the way is what you are observing.
So to make this work, simply fix your markup. You cannot expect a browser to correctly interpret something that is invalid, unless of course you write your own browser.
I don't know what is your scenario but I guess you will have to remove the anchor from this button. If you don't have control over the generated markup (because for example you are using some third party component which spits this invalid markup) as a last resort you could use javascript/jquery to manipulate the DOM after it is created to move the anchor out of this button so that you don't end up with something so broken.
Instead of wrapping the action link in a button tag and formatting the button tag in the style sheet I added a css class to the actionLink like this.
#Html.ActionLink("Add Address", "Create", "Address", null, new { #class = "actionLinkButton" })
Add Button inside Hyperlink tag in mvc, write the Controller and action methods
for passing any parameters:
I have a requirement wherein my page has few <input> elements and i want the browser to remember the values typed in them and show the autocomplete drop down for subsequent visits. But the problem is I dont have a <form> tag in my page and the processing is done via Javascript/Ajax.
Is there any way i can acheive this?
Solved by adding a tag around the elements. Thanks Rory. And also prevented the form submission with attribute onsubmit="return false;" on the form tag.
It works on firefox but not in chrome.