Magento2 checkout form: How to display placeholder attribute value in fields?

input placeholder magento2 onepage-checkout
Jorge Fernandez picture Jorge Fernandez · Feb 15, 2016 · Viewed 11.4k times · Source

Goodmorning Stackoverflow,

I'm customizing the checkout onepage in Magento 2. Now I'm trying to display placeholders instead of labels in the shipping-address form, but no success till now. I hope someone can help me out

Cheers, Jorge

UPDATE:

In the console i can see a variable is giving to the attribute placeholder of the element input. 

<input class="input-text" type="text" data-bind="
    value: value,
    valueUpdate: 'keyup',
    hasFocus: focused,
    attr: {
        name: inputName,
        placeholder: placeholder, // <<<< right here
        'aria-describedby': noticeId,
        id: uid,
        disabled: disabled
    }" name="street[0]" placeholder="" aria-describedby="notice-BVWUCFN" id="BVWUCFN">

Now i would like to know if theres is a way to modify this variable via the backend, so i can display label name in the placeholder attr. See screenshot

Apoligies for my bad english

Answer

Amit Bera picture Amit Bera · Apr 5, 2016

Standard way,

Copy all html files from vendor/magento/module-ui/view/frontend/web/templates/form/element/ at app/design/frontend/<Vendor>/<theme>/Magento_Ui/web/templates/form/element/

Then change all Change placeholder: placeholder to placeholder: label as mention by Akis Verillis.

Now you need to deploy the static files by below code: 

 php bin/magento setup:static-content:deploy

And see the magic.

Note: If you have checkout from github then try copy from

/app/code/Magento/Ui/view/base/web/templates/form/element/

Related questions

Setting an HTML text input box's "default" value. Revert the value when clicking ESC

When a web form is written to the browser, the browsers remembers what the initial values are of a text INPUT box. ie. when it receives HTML like this: <input type="text" value="something"> The browser remembers "something" …

Read More
HTML Input - already filled in text

I was wondering, is there a way to put text into an input field? What i've got now is a placeholder, but that's actually an empty inputfield. So that's not what i'm looking for. I'm looking for an (kind of) …

Read More
Change input placeholder color darker

Follow this article (Style text input placeholder), i can change the color of the text input placeholder to red color. But it is always a light-red color, not red exactly. Is there any way to make it a red color …

Read More