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..
Related
Are there any differences between these two screen reader techniques on forms, and is one more encouraged than the other:
<label for="titleInput">Title</label>
<input type="text" id="titleInput" name="title" value="">
<div>Title</div>
<input type="text" aria-label="Title" name="title" value="">
The first way has always been the way to set this up, but since WAI-ARIA was introduced, it's got me thinking if using aria-label with forms is the better than using <label for="x">.
As a rule of thumb: If a real element can do the job, then use a real element. ARIA is what you fallback to when there is no real element that expresses the semantics or when you are doing something really weird which prevents you using the normal element.
(Most of the time, when you are doing something really weird, you should stop doing the weird thing instead).
In this particular case, there are a couple of major differences between the two.
Browsers won't extend the click target to the div element as they would with a label element. Clicking the label will focus the input, clicking the div will not.
You now have two labels. The div and the attribute provide the same information in two different places. The attribute doesn't replace the div, so a screen reader will read out the div text and the label associated with the input.
Use a <label>. It is specifically for associating text with a form control.
aria-label is designed for providing a text description of some content which a screen reader can't read out. e.g. when you are using a background image to convey information instead of using an <img> with an alt attribute (See my previous note about weirdness).
Aria-label is for accessibility. If Aria-label is added, on voice-over i.e (cmd +F5 on MAC or JAWS on windows machine will read whatever is typed inside the aria-label attribute of the HTML tag. This functionality is highly helpful for visually disabled users. Read here https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
Label is HTML tag , just like <form> or <h1>..<h6> , etc tags, when tag is used it renders Label on the UI. E.g: <Label>ENTER NAME</Label>
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.
maybe a little odd, but I'm stuck nevertheless:
I have an input type="image" which acts as a button within a software. I have to tweak the button for a template.
<input class="tweaked" src="" title="add to basket" alt="add to basket" type="image">
The problem:
I cannot change the type, because the software seems to "bind" to input type="image"
If I just omit the src attribute I get failed to load on IE and other browser
Question:
Is it possible to have an input type="image" without src attribute looking nice across browsers, that is without the "failed to load image"-icon? If so, how can it be done?
Thanks for help.
One option is to make the source of the image be a 1x1 clear pixel PNG. It's quick and dirty, and it will most likely work. You may even already have such a file that the site is downloading.
If, however, you don't want to add another HTTP request, perhaps you can set the source to be your image sprite, then in your CSS align the background so that the sprite is way, way off the image. This will get rid of the 1x1clear.png file, but it may degrade in a weird way in some cases.
Wacky idea that probably won't work, but you can try using a css (or jquery) selector to look for a missing src tag and set it to css display: none or add a temp src tag pointing to a dummy image.
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.