Removing inputField causes visualforce page to error out

Question

I have created a page and am currently converting the page to use bootstrap. I was using an apex:inputField and nothing is wrong except that inputField does not accept disabled as an attribute. So I am trying to convert it into a regular input element and it works as expected but the moment I remove the inputField it breaks the entire page and shows "Error occurred while loading a Visualforce page."

<div class="col-md-4 col-sm-6 col-xs-12 noPadding">
    <h4>I need assistance with</h4><span class="required">*</span>
    <apex:inputField value="{!Case.I_need_assistance_with__c}" />
    <input class="form-control col-md-6 col-sm-8 col-xs-12" id="disabledInput" type="text" placeholder="{!Case.I_need_assistance_with__c}" disabled="true" />
</div>

Why is removing this line causing an error?

Answer 1

For future reference, you can pass custom html attributes into inputFields (and other VisualForce tags), using html pass-through attributes: https://developer.salesforce.com/docs/atlas.en-us.196.0.pages.meta/pages/pages_html_features_pass_through_attributes.htm

Eg.

<apex:inputField value="{!Case.I_need_assistance_with__c}" html-disabled="true" />

Answer 2

After thinking about this more it hit me that inputField was a dropdown and not just a flat inputbox. I modified my code to be,

<select disabled="true">
    <option value="{!Case.I_need_assistance_with__c}">{!Case.I_need_assistance_with__c}</option>
</select>

and it worked without any issues. Weird how it will render correctly inside of the inputbox though.