Difference between HTMl button element to apex:commandButton

Question

Can someone explain the differences between the two Vf snippets below?

VF Snippet A:

<button type="button" onclick="{!CaseSubmitForm}">Submit a Ticket</button>

VF Snippet B:

<apex:form>
    <apex:commandButton action="{!getCaseSubmitForm}" immediate="true" value="Submit a Ticket"/>
</apex:form>

Apex Controller Snippet:

public class Chat_SubmitCaseIfChatUnavailableClass {

    public PageReference getCaseSubmitForm (){
        return new pageReference('/apex/Chat_SubmitCaseIfChatUnavailable');
    }
}

1) Why on snippet A I can call the method "{!CaseSubmitForm}" by referencing its name without the 'get' word but on snippet B I have to use the explicit name to call the function "{!getCaseSubmitForm}"

2) When I click on the button in snippet A I get the following error in the debugger:

Uncaught SyntaxError: Invalid regular expression flags

But when I click on the commandButton in snippet B it's working as expected?

Answer 1

apex:commandButton action is bound to its controller apex method name where as this is not the case with html button element.