<input type="submit"> creates a button inside a <form> that sends the form data to the form's action URL. When clicked, it gathers all form fields and submits. You can use value to set the button label.

<input type="submit">

Step 2

Example: <form action="/login"><input type="submit" value="Log In" /></form>. Attributes: value (button text), name (sent with form), disabled (prevents submit), formaction (overrides form action).

<form action="/login">
  <input type="submit" value="Log In" />
</form>

Step 3

Modern recommendation: use <button type="submit"> instead of <input type="submit"> when you need HTML inside the button (icons, spans) or easier styling. Both submit the form; button is more flexible.

<form action="/search">
  <button type="submit">Search</button>
</form>

Step 4

In the browser, the submit button triggers form submission. Without JavaScript preventDefault, the page will navigate to the form action. Use disabled for validation (e.g. until required fields are filled).

<form action="/login">
  <input type="submit" value="Log In" />
</form>

Step 5

Checkpoint: Which input type creates a button that submits the form?

<input type="submit">

Step 6

Correct! type="submit" submits the form. type="button" does not. You can also use <button type="submit"> for a submit button with richer content.

<input type="submit" value="Log In">

Step 7

You now know submit buttons and input vs button. Complete the challenges below to master form submission!

submit.html

1 / 7

📤

Tutor:<input type="submit"> creates a button inside a <form> that sends the form data to the form's action URL. When clicked, it gathers all form fields and submits. You can use value to set the button label.

⭐ 0 EXP

Submit Mastery

Form submit buttons: input vs button.

Concept 1: Submit Button

<input type="submit"> creates a button inside a <form> that sends the form data to the form's action URL. When clicked, it gathers all form fields and submits. Use value for the button label.

System Check

Which input type creates a button that submits the form?

type="button"type="submit"type="reset"type="text"

Community Holo-Net

Submit Button Patterns

Using input submit or button submit? Share your patterns.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

HTML Submit Button

Pascual Vila

Frontend Instructor.

<input type="submit"> creates a button inside a <form> that sends the form data to the form's action URL. Use value for the button label, disabled to prevent submit (e.g. until valid), formaction to override the form action. The modern alternative is <button type="submit"> when you need HTML inside the button or easier styling.

input submit vs button submit

Both submit the form. <input type="submit"> only displays plain text (the value). <button type="submit"> can contain HTML (icons, spans), is easier to style, and is the modern recommendation when you need richer content.

Best practices

Use disabled on the submit button until the form is valid (e.g. required fields filled). Use name and value if you have multiple submit buttons and need to know which was clicked. Prefer <button type="submit"> for new code when you want icons or flexible styling.

Submit Glossary

<input type="submit">: Button that submits the form. Sends form data to the form's action. value = label, disabled = block submit, formaction = override action.
<button type="submit">: Also submits the form. Can contain HTML (icons, spans). Modern choice when you need richer content or easier styling.
form action: URL where the form data is sent on submit. method = GET or POST. The submit button triggers this submission.

📖 INDEX