HTML Form Elements VS Input Element Types

Question

HTML has 13 form elements and the input element has 23 different types. My question is what is the reasoning behind making a form element a type of input or its own element?

At first I thought maybe its because all input types are just variants on input type=text, but that doesn't make sense when you throw checkbox and radio into the mix. Perhaps they would be better as their own form elements?

<input type="checkbox" name="check" value="yes">
// Would become
<checkbox name="check" value="yes">

Another form element that doesn't make sense to me is textarea for two reasons.

1. According to How to change the Content of a with Javascript you can use element.value to both set and retrieve a textarea's contents. Yet textarea doesn't have the value attribute, at least its not shown in the DOM.

2. The way textareas behave when resetting a form is inconsistent with other form elements. All input elements will be reset to the value of their value attribute. But a textarea is reset to whatever its 'value' (quotes because it doesn't have a value attribute in the DOM) was set as when the page loaded.

Example 1 (consistent with input): If you click the reset button, both input and 'textarea' will be reset to their 'initial' values (Example use jQuery). JSFiddle

<form>  
    <input type="text" name="text" value="initial" />
   <textarea>initial</textarea>
   <button type="reset">Reset</button>
</form>

<script>
    $('input, textarea').val('set by javascript');
</script>

Example 2 (inconsistent with input): You cannot use .attr('value') with textarea elements, which means the following example doesn't work. You have to use $('textarea').text() or $('textarea').html() in order to set the default value.

<form>  
    <input type="text" name="text" value="initial" />
   <textarea>initial</textarea>
   <button type="reset">Reset</button>
</form>

<script>
    $('input, textarea').attr('value', 'set by javascript');
</script>

There are other things that don't make sense to me but I will only highlight these two in my question. I'm hoping someone can explain to me why HTML and Javascript treat form elements differently (specifically when its comes to getting, setting, and resetting their values), and why certain form elements have their own elements and why others are just types of the input element.