I'm currently programming a html (php) menu where I want to use tooltips for the buttons.
As I want to use the form to transmit to me which button has been clicked (via method=POST) i don't use but instead .
My problem here is that I'm not sure what the best way is to create those tooltips (especially as I want the text to be dynamic......as I plan to use localization in the
future. Thus using images is out of the question there ).
I know how to use tooltips in combination with , but as indicated I'm not sure
what the best way is to use tooltips in combination with buttons.
Example sourcecode (as a note here I'm using a sessionvariable to see what language
the user has):
<input type='button' value="<?php translate('Messages');?>" class='messages'>
<input type='button' value="<?php translate('Logout');?>" class='logout'>
Tnx for all help there
The HTML5 spec defines a set of global attribute which almost all elements support. This includes the title attributes which in the specification is for storing additional information about the element. So you can dynamically output the tooltip text into the title attribute which will appear on rollover without and need for JavaScript. It also makes the text easily accessible if you choose to use JavaScript to extract the text and output it in a custom styled tooltip.
<input type='button' value="<?php translate('Messages');?>" id="messages_btn" title="<?php translate("tooltip_messages")?>">" class='messages'>
Hope this makes sense.
Related
I have the following input on a site I'm currently reviewing:
<input type="submit" name="executeSearch" value="" alt="Execute search" title="Execute search" class="iconButton searchBtn">
Through the class attribut the input button is replaced by an search icon.
According to accessibility is this the right way? Or should the value attribute be used? The screenreader I tested this element with (NVDA) was able to read the text ("Execute search button").
An empty value and an icon added via CSS to convey the only important information is a failure according to WCAG 2.0: F3 - Failure (…) due to using CSS to include images that convey important information
Simplest solution: use an input[type="image"], keep that alt="Execute search" ("Search" would be more concise IMHO), add an src="/path/to/img" of course and remove both title and value attributes. Image can be an SVG and can be encoded in base64 (ideal when it's light for performance reasons: that's 1 resource not to be downloaded).
That [type="image"] seems outdated because it was widely used circa IE6, way before RWD but it isn't (proof of concept with an 8x16 viewBox and width*height SVG: it scales®)
Otherwise you can use a button element with type="submit". This element can contain SVG, HTML images, text hidden to screen readers (better known as .visually-hidden, .sr-only or .element-invisible in Bootstrap, WordPress, Drupal, etc). That's what I use when a "submit" has both text and image or icon because no :pseudo with input and text-only through #value
Some notes on your current markup:
#alt should only be used with input[type="image"]
#value shouldn't be used with type image and otherwise should never be empty
#title should only be there (on links and "buttons") if it adds something to the existing information (like Subscribe ⇒ Subscribe to the newsletter or Edit ⇒ Edit something in particular)
According to accessibility is this the right way? Or should the value attribute be used?
An input[type='submit'] button does not accept an alt attribute
Some screenreaders may use the title attribute, but it's still useful for non screenreader users
Using the value attribute is the recommended approach for screenreader users
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.
I'm trying to make a file sharing website but having trouble styling the upload forms I have as my design is quite advanced instead of setting the indivdual styles i'm trying to get set the design as a background image.
This is my design - http://icap.me/i/s5YIbheY3g.png
This is it currently effort - http://icap.me/i/ODuzJOQMhS.png
So far I set the style of the upload button by using the following code -
form input[type=submit] {
background : url("../img/upload.png") no-repeat center center;
width : 115px;
height :52px;
border : none;
color : transparent;
font-size : 0
}
do you know how I could use an image to style my other form buttons here is the html -
<form action="upload_file.php" method="post"enctype="multipart/form-data">
<input type="file" name="file" id="file" />
<br />
<input type="submit" name="submit" value="Submit" />
<input type="checkbox" name="vehicle" value="Bike">I agree to the terms and conditions<br>
</form>
Styling some form elements suck, and unfortunately, the file element is one of those elements. This is because the browser actually derives the control itself from the operating system (which means you have absolutely no control over how it looks). What this means for you is that in order to style it, you will need JavaScript and some CSS hackary.
Quirksmode has a great step by step for doing it, at least to get you started.
The basics of which, though, are:
Style your normal file input with position: relative.
Add a new plain old text input and position it on top of the file input.
Style the text input to look like the file input
Drop the file input's opacity to 0, so that it's invisible, but still clickable (this is key, because you're still actually using the file input)
Use JavaScript to put the filename into the text input
This one's kind of primitive and not very standards-compliant (extra elements and all that). If you're already using a JavaScript library (jQuery, MooTools, etc), you may be able to find a plugin that will handle the control itself, and you just add styling to that. The advantage to this method is that you won't necessarily need to add extra elements yourself (so you don't have a stray input field lying around), and the JavaScript (ideally) picks up the presence of your file input(s) and "fixes" them accordingly.
For styling browse button you need to take help of css-javascript duo or something like twitter bootstrap which just works out of the box1..
Also, check this post and this article
As a personal view, i feel that form elements like browse button and drop-down menus shouldn't be tweaked much..giving out two benefits..one, faster developments..and two, cross-browser symmetry..
I have an HTML form with radio buttons, check boxes, text fields and drop down lists.
Since I want user to fill everything in my form, none of the radio buttons and check boxes are checked and the text fields are empty.
I would like to write a CSS file that will fill the form with answers (I don't want to change my HTML file).
Is this possible ?
I would appreciate an example or any other idea ?
Thanks !
No, it isn't possible. CSS is for style, not markup, and changing the contents of an input field requires modification of the markup.
It sounds like you might want to consider JavaScript, which can be used to alter the contents of any element, including form elements.
Javascript is your best bet. If you want to fill in -sample- answers, however, like 'First Name' in the text area what would be labelled "First Name: " you can do something like <input type='text' value='First Name' name='emailForm'> and the value attribute will be filled in when the page loads.
You can use jQuery to accomplish what you want quite easily, using CSS-style syntax.
Here's a sample form:
<form ...>
<input name="firstName" />
<input name="lastName" />
</form>
And corresponding jQuery/JavaScript:
$(function () {
$("input[name=firstName]").val("John");
$("input[name=lastName]").val("Doe");
});
Should be easy enough to extend to a larger and more complex form. You can easily use classes or ids on the elements and in the jQuery selectors, as well.
CSS is for designing and styling the webpage. Although its capabilities have been exploited to pull of many tricks it is not a fix-all solution. What you need to do is pull the data you need to fill and put it in your fields.
You can do this two ways:
Use a server side language like PHP/ASP.Net to pre-fill this information.
Use Javascript/Jquery/MooTools or some other framework to fill it on the client-side, picking up the data from the server.
If the information is static then it is very easy, because you can just put this info as a part of the HTML content itself.
If this answer doesn't work for you, add more information to your question.
I'm using django-uni-form to style my form using the filter my_form|as_uni_form:
<form class="uniForm" id="my_form" method="post" action="./">
<fieldset class="inlineLabels">
{{ my_form|as_uni_form }}
<div class="form_block">
<input type="submit" value="Submit"/>
</div>
</fieldset>
</form>
It looks really good. But I need to customize it.
For example, one of the field "percentage" of the form is of the type IntegerField. It is being rendered as an <input type="text">. The problem is that the text box is really wide, I'd like to make it only 2 character wide. Also I want to add a percentage sign "%" right after the text box so that users know they if they put in the number "10" in the text box, it means 10%.
Is there anyway to do that with django-uni-form?
Thanks for your help.
You'll need to loop over the elements of your form and render the uniForm markup yourself. Either that, you can customize the look of each input based on an id or class.
What I'd do is look at the mark up it generates, and then loop over the elements generating that same markup and customize them. See the Django docs for more information.
I have the same question as yours. I think the length of the text input is easy to change via css. I'm more concerned about the custom html element behind the input, in your case percentage mark. I don't find an easy solution to it. Looks like either we have to mimick the way a field is rendered in django-uni-form template or write a filter of our own. I'm still waiting for a more elegant solution.