I have a button that takes the user back to the previous page and I want to style it using CSS but I want to put this button in its own class so the CSS I write for it does not affect any other buttons on my website.
The current code for the button is:
<FORM>
<INPUT Type="button" VALUE="Go Back To Previous Page" onClick="history.go(-1);return true;">
</FORM>
I have multiple buttons on my page so if I style "button" it will style all of the other buttons.
What I want to do is style only that specific button so i need to add it to it's own class or give it it's own id but unsure how to do this.
Due to fact that you want neither to style the button in general nor the input type, I recommend to create a class on your css file.
.button-style {your code}
Then you can use it as class in your button or input element.
<input type="button" class="button-style">
Hope it helps.
Add an id to the button and use this id to give it the css you want
Related
I came across value of attribute in button and as it was explained here https://www.quora.com/What-is-the-difference-between-name-and-value-in-an-HTML-tag value attribute defines text on button. And I expected that <button value="submit"></button> will be equal to <button>Submit</button> but <button value="submit"></button> output button with no text on it. Thus, I a bit confused with why and when we need to use value attribute for button tags in HTML
Value is the result to be posted to server when the button is pressed and has nothing to do with display text.
The button's value gets submitted to the server; You might want to know which button the user clicked.
we can define submit button by two ways.
<input type="submit" value="save" >
by this method, the value will be displayed as text for the button.
But the button tag.
<button type="submit" value="save">Submit Form</button>
Here the value is represented as the value of that button field if you need to use it.
Also, someone use this value when they use multiple submit forms in a php file to identify the form, someone uses the submit button name too.
Value actually acts as text when used in the form like
<input type="button" value="report" >
And acts as a value when used as
<button type="button" value="report">Report</button>
COUNTER COUNTER EDIT:
Sorry for obvious question, my edits keep getting deleted but was just saying been working non stop and had a complete blank when trying to remember this, thanks to the Stack community though!
I have my HTML here:
<input type="submit" name="buddy1" value="Yes" placeholder="Toggle Yes">
I want the input value to be Yes but the text displayed to be "Toggle Yes". I know there's a trick with span classes and buttons but I want the button to also be the submit. Is there a quick way of doing this WITHOUT Javascript?
You can use the <button></button> instead:
<button type="submit" name="buddy1" value="Yes">Toggle Yes</button>
Your should use a button element, where you can change the text of the button. Buttons elements are just input elements which have more options. From the w3 site on button:
Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities:
For example.
<button type="submit" name="buddy1" value="Yes">Toggle Yes</button>
I have a small welcome screen on a website which asks users to either log-in or sign-up. Pretty standard stuff.
The log-in button is within a form so it is a <input type="submit"> element.
However the Sign-up button is not within a form. Its purpose is just to send people to another page where they can register. But I want this this button to look the same as the button that says "log-in" for consistency/aesthetics.
What would be best-practice for the Sign-up link I want to achieve:
Use a <input type="button"> element within a form that takes the user to register
Use a standard hyperlink but style it in CSS so that it looks like a button
If it's semantically a link, but styled as a button, use an <a> element with CSS to make it look like a button.
I have the problem with labels within buttons because a click on the label is also causing the button click to fire.
So I got two fired events after each other, what I don't want of course.
My buttons with label included look like this:
<button id="b" name="Button" class="btn btn-primary btn-large">
<label id="b_button_label" class="fontf">
Click me
</label>
</button>
Is there any quick solution, perhaps with jQuery, to prevent the double firing?
Yep, solution is not to put labels inside your buttons.
The labels are meant to describe the control itself, and clicks on a control's label will act like a click on the control itself.
From the spec:
The label represents a caption in a user interface. The caption can be associated with a specific form control, known as the label element's labeled control, either using for attribute, or by putting the form control inside the label element itself.
You can use stopPropagation event in jQuery from bubbling up the event
$(function() {
$('#b_button_label').on('click' , function(e) {
e.stopPropagation();
// Your code goes here
});
});
Also why do you want to add the Label inside the button when you have the value field to display its text.
I don't think this is a valid HTML code. You cannot add a LABEL inside a BUTTON. A simple way of adding text to your button is:
<button id="b" name="Button" class="btn btn-primary btn-large">click me</button>
Something like this:
Where the user would click on any area of the button and it would select that radio button.
Any suggestions?
As far as I can tell, radio buttons as self closed, and can't wrap around other elements.
The best way is to just wrap the <input> in its <label>, as clicking a label also has the effect of focusing its associated input:
<label>
<input name="transfer" type="radio">Bank Deposit
</label>
No javascript required: Demo: http://jsfiddle.net/GTGan/
If you need to style the label text separately, just wrap it in a <span>.
use Bootstrap, to create buttons around radiobuttons:
<label class="btn btn-lg btn-default">
<input type="radio"> Something
</label>
Have you tried using the LABEL tag? For accessibility sake we should be using label tags to associate labels to form controls all of the time. Not only does that help tie things together for screen readers, but it also makes the label as well as the control clickable.
You can read a bit more detail and find an example here:
http://webaim.org/techniques/forms/screen_reader#labels
You could use javascript for achieving this effect by giving it an onClick event, or you could just use jQuery in combination with some gui-plugins. I'd prefer this solution for cross-browser compatibility.