How to replace html <input> tag with <apex:input> in visualforce without changing the output

Question

I need to replace following visualforce code block which is used to input a String variable in my visualforce page with <apex:input>

Visualforce

<div class="slds-col">
                                <div class="slds-form-element slds-m-top--medium slds-m-horizontal--medium">
                                    <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon--left slds-m-around--medium">
                                        <svg aria-hidden="true" class="slds-input__icon slds-icon-text-default">
                                            <use xlink:href="{!URLFOR($Resource.SLDS103,'/assets/icons/utility-sprite/svg/symbols.svg#search')}"></use>
                                        </svg>
                                        <input id="number" value="{!checkNumber}" class="slds-input" type="text" placeholder="Check Number"/>
                                    </div>
                                </div>
                            </div>

---

---

Controller

public String checkNumber { get; set; }

Answer 1

Use below code instead of HTML

<apex:input id="number" value="{!checkNumber}" Styleclass="slds-input" html-placeholder="Check Number"/>

Hope this helps !!