Buttons in Forms
Part of the Fundamentals section of Coddy's HTML journey — lesson 45 of 60.
Buttons play a key role in forms, where they help submit data or reset fields. Let’s see how they work:
Submit Button:
<form>
<input type="text" name="username" placeholder="Enter username">
<button type="submit">Submit</button>
</form>
type="submit": Sends the form data to the server.
Reset Button:
<form>
<input type="text" name="name" value="John Doe">
<button type="reset">Reset</button>
</form>
type="reset": Clears all fields and resets them to their default values.
Challenge
EasyCreate an HTML document that includes a form with different types of buttons. The form should have the following elements:
- A text input field with the name "message" and a placeholder that says "Enter your message".
- Add a submit button (
<button type="submit">) with the text "Send". - Add a reset button (
<button type="reset">) with the text "Clear". - Add a generic button (
<button>) with the text "Click Me".
Cheat sheet
Buttons in forms have different types for specific functions:
Submit Button:
<button type="submit">Submit</button>type="submit": Sends the form data to the server
Reset Button:
<button type="reset">Reset</button>type="reset": Clears all fields and resets them to their default values
Generic Button:
<button>Click Me</button>- Default button without specific form behavior
Try it yourself
<!DOCTYPE html>
<html>
<body>
<!-- Write code here -->
</body>
</html>
Test yourselfThis lesson includes a short quiz. Start the lesson to answer it and track your progress.
All lessons in Fundamentals
2Text and Formatting
HeadingsParagraphsLine BreaksBold and Italic TextBold and Italic AgainRecap - Formatting8Forms and Inputs Part 1
Form BasicsText InputsInput AttributesPassword FieldLabels for InputsRecap - Basic Form11Event Registration Page
Project OverviewHeader Section
Event Details SectionRegistration FormFooter Section9Forms and Inputs Part 2
Radio ButtonsCheckboxesDropdownsButtonsButtons in FormsRecap - Forms #1Recap - Forms #2