Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Putting placeholder attribute on file type input field

Tags:

html

jquery

Is there a way to put a placeholder for input field which are file type?

I already tried jquery watermark plugin and it doesn't work.

like image 907
MegaNairda Avatar asked Jul 27 '12 10:07

MegaNairda

People also ask

How do you insert a placeholder field?

The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format). The short hint is displayed in the input field before the user enters a value.

How do I add a placeholder to a field in HTML?

So putting placeholders in forms in HTML is very simple. You just use the attribute, placeholder and set it equal in single or double quotes to the value that you want it to be.

Should input fields have placeholder text?

The placeholder text is useless and shouldn't be there. Repeating the label will also clutter your textfields and make users think they entered input already when they haven't. This often occurs when users skip fields and go back to review them.

How do you select a placeholder of input?

The ::placeholder selector selects form elements with placeholder text, and let you style the placeholder text. The placeholder text is set with the placeholder attribute, which specifies a hint that describes the expected value of an input field.

1 Answers

Placeholder attribute should not be used for <input type="file">. Placeholders are used to give a hint about the input. And as file input is itself a browse button, it is clearly seen that it is for choosing a file. And if there's no file chosen it shows "no file chosen" next to the button.

Because:

  1. In some browsers it just shows up as a button.
  2. It already have default text which can not be changed.
  3. Each browser renders it in own way.
  4. IE will not support placeholder text.
like image 200
AlphaMale Avatar answered Dec 02 '22 19:12

AlphaMale
Sign in to Comment

Related questions

Change url on ajax request
detecting css transition support with modernizr
jquery ui .autocomplete() not firing when same letter entered after blur()
Javascript: Find out which element was clicked without attaching any eventlistener to it?
jQuery append not working in IE8
find the next input field which is in next div-jquery
jQuery transfer effect & callback function
Form not getting submitted with jQuery validation
How attach html-element to mouse using jQuery?
disable click event handler for a duration of time
how to check if jqueryUI autocomplete dropdown box was open
Wrapping HTML in an app for Android
jqGrid: All rows in "inline edit mode" by default
ASP.Net RadioButtonList: using jQuery to get the ListItem selected
jQuery Highlight Effect On Table Row Styled With Bootstrap
A JavaScript parser for DOM
jquerymobile dynamically changing text for button issue
text field cursor issue in chrome
How to retrieve sorting status of JQuery Datatables
How can I detect the back/forwards buttons being clicked when using History.js?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!