SLDS input does not bind record values on saving

Question

I have a visualforce page to create a record. I use SLDS. Problem is, when i try to save record with filled form, the inserted data is not binded with new record. note: I use a standard controller

example of my form field:

<apex:form>
   <apex:pageBlockSectionItem>
            <div class="slds-form-element slds-m-bottom--small">
              <label class="slds-form-element__label" for="buildingName">
                <abbr class="slds-required"
                      title="required"><b>*</b></abbr>{!$ObjectType.Building__c.fields.Name.Label}
              </label>
              <div class="slds-form-element__control">
                <!--<apex:inputField value="{!Building__c.Name}" />-->
                <input type="text" id="buildingName" class="slds-input" value="{!Building__c.Name}"/>
              </div>
            </div>
          </apex:pageBlockSectionItem>

         <apex:commandButton action="{!save}" value="Save" id="saveButton"/>
</apex:form>

but when i use <apex:inputField value="{!Building__c.Name}" />, instead of SLDS <input>, my record will be successfuly saved with inserted name. Usind SLDS, all fields will be blank on new record, except required field which will be auto populated with some random id i quess.

Answer 1

SLDS is only a Design System catering to the UX needs.

The Lightning Design System enables you to build rich enterprise experiences and custom applications with the patterns and established best practices that are native to Salesforce.

Using it, does not bind any variables on the form directly to the field on the object. input component only helps you to capture values on the form itself, but to able to persist it, you need to have additional controllers to it. SLDS on input field just adds design element and not any operational element. SLDS input is inherited by lightning:input (in beta), and you can find more information about it on the documentation.

apex:inputField on other hand directly binds the values from the object's field. And that's why you are able to save it directly.

Answer 2

Input is HTML tag so binding value to html tag will not work, use apex:inputfield to bind value to it. it will work for sure.

hope this helps.