What Is the Default Button Type

What is the default button type?

For most browsers the default type of button is submit.

type = submit|button|reset [CI]

This attribute declares the type of the button. Possible values:

submit: Creates a submit button. This is the default value.

(http://www.w3.org/TR/html401/interact/forms.html#h-17.5)

The only exception to this is IE7 and below where the default type is button.

Windows Internet Explorer 8 and later. The default value of this attribute depends on the current document compatibility mode. In IE8 Standards mode, the default value is submit. In other compatibility modes and earlier versions of Windows Internet Explorer, the default value is button.

(https://msdn.microsoft.com/en-us/library/ms534696(v=vs.85).aspx)

If old IE support is not an issue (older versions of IE also have trouble with multiple buttons on one form and the text of thebutton being passed through instead of thevalue) you can probably get away with not supplying the type attribute for a button.

What's the point of button type= button ?

Yep, there's a reason - but (usually) only if you're in a <form> element.

If you include a button in a form element without specifying it's just a regular button, it defaults to a submit button.

<form>
<button>I will submit the form when clicked!</button>
</form>

vs

<form>
<button type='button'>I won't!</button>
</form>

The first one is assumed to be type=submit since a type attribute hasn't been specified.


If you are not in a <form> element, the button won't have anything to submit, so it doesn't matter as much. :)

Semantics usually become important at some point in your application's lifetime, though, so it's a good idea to make a habit of specifying the type.


The only other reason that could be relevant is if there's a styling rule that specifies [type=button] or something. That's not recommended, though.

How is the default submit button on an HTML form determined?

If you submit the form via JavaScript (i.e., formElement.submit() or anything equivalent), then none of the submit buttons are considered successful and none of their values are included in the submitted data. (Note that if you submit the form by using submitElement.click() then the submit that you had a reference to is considered active; this doesn't really fall under the remit of your question since here the submit button is unambiguous but I thought I'd include it for people who read the first part and wonder how to make a submit button successful via JavaScript form submission. Of course, the form's onsubmit handlers will still fire this way whereas they wouldn't via form.submit() so that's another kettle of fish...)

If the form is submitted by hitting Enter while in a non-textarea field, then it's actually down to the user agent to decide what it wants here. The specifications don't say anything about submitting a form using the Enter key while in a text entry field (if you tab to a button and activate it using space or whatever, then there's no problem as that specific submit button is unambiguously used). All it says is that a form must be submitted when a submit button is activated. It's not even a requirement that hitting Enter in e.g. a text input will submit the form.

I believe that Internet Explorer chooses the submit button that appears first in the source; I have a feeling that Firefox and Opera choose the button with the lowest tabindex, falling back to the first defined if nothing else is defined. There's also some complications regarding whether the submits have a non-default value attribute IIRC.

The point to take away is that there is no defined standard for what happens here and it's entirely at the whim of the browser - so as far as possible in whatever you're doing, try to avoid relying on any particular behaviour. If you really must know, you can probably find out the behaviour of the various browser versions, but when I investigated this a while back there were some quite convoluted conditions (which of course are subject to change with new browser versions) and I'd advise you to avoid it if possible!

What's standard behavior when button element is clicked? Will it submit the form?

If the button is within a form, the default behavior is submit.

If the button is not within a form, it will do nothing.

BUT BE AWARE!

Always specify the type attribute for
the button. The default type for
Internet Explorer is "button", while
in other browsers (and in the W3C
specification) it is "submit".

Taken from http://www.w3schools.com/tags/tag_button.asp

Default selected button in html form

You can add a checked attribute into the input tag like so.

<form>
<input type="radio" name="gender" value="general" checked> General<br>
<input type="radio" name="gender" value="medium"> Medium<br>
<input type="radio" name="gender" value="high"> High
</form>

see w3 schools for an example.

What is the default behavior of the 'return' key in an HTML form?

Both button elements have no type set. Type=submit "is the default if the attribute is not specified for buttons associated with a <form>" (MDN Webdocs)
and troublesome is the next after the input field. If you change its type to 'button', 'submit' will submit.

From MDN as well: "Note that the submit event fires on the element itself, and not on any or inside it. However, the SubmitEvent which is sent to indicate the form's submit action has been triggered, includes a submitter property, which is the button that was invoked to trigger the submit request. If the submission was not triggered by a button of some kind, the value of submitter is null. (If there's no element type=submit and Enter is pressed inside the input, the form will submit with event.submitter = null)

The logic seems to be "find the closest button to the focus that has type="submit", and simulate a click event on that button, else fall back to just submitting the form" (didn't find this explicitly somewhere)
In your example 'troublesome' is of type 'submit' and closest to the input, and if there wasn't the 'prevent.default()', both events (click & submit) would be triggered.

document.querySelector('form').onsubmit = ev => {
ev.preventDefault();
document.querySelector('#result').innerText
= ev.target.elements.text.value;
};

document.querySelector('#troublesome').onclick =
ev => {
ev.preventDefault();
ev.target.innerText = Math.random();
};
<form>
<input type="text" name='text' value='something' />
<button type="button" id="troublesome">Trouble</button>
<button>Submit</button>
</form>

<div id="result">not submitted</div>

What is the default value of a (input type=) submit button

The HTML 4.01 specification is rather vague about this, but the HTML5 CR is more explicit. It says, in the description of <input type=submit>: “If the element has a value attribute, the button's label must be the value of that attribute; otherwise, it must be an implementation-defined string that means "Submit" or some such.” This does not specify that the string should be language-dependent in any sense, but in practice it usually depends on the language of the browser.

The conclusion that you should always set the value attribute, to make sure it is in the language of the page and, moreover, that it is informative. Quite often, a generic name that means “submit” is too abstract.

On the technical side, the value of a submit button is undefined if there is no value attribute. This means that the getAttribute() method yields null and the value property of the element node is the empty string. However, on form submission, browsers in practice act as if the value were the string that they use as button label.



Related Topics



Leave a reply



Submit