FAQ: Learn HTML: Forms - Submit Form

Frequently Asked Questions HTML FAQ
1

Community%20FAQs%20on%20Codecademy%20Exercises
Community%20FAQs%20on%20Codecademy%20Exercises1000×208 141 KB

This community-built FAQ covers the “Submit Form” exercise from the lesson “Learn HTML: Forms”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Introduction to HTML

FAQs on the exercise Submit Form

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

2

3 posts were split to a new topic: Why is submit lowercase in type but capitalized in value?

6

18 posts were split to a new topic: What happens after submit is pressed? Where does the information go?

24

6 posts were split to a new topic: HTML forms & Back-end

26

I happen to click on the “Submit” button which is being rendered on the web page, it displayed the image of “burger” with a text “Thanks for your submission!”. I am intrigued, what enabled this text to display on the page?

27

The form renders another page (submission.html), you can look at this file. Find the directory/folder icon in the top right of the text-editor and click it

1 Like
30

Thanks for the info! It is valuable for me

31

so I made my own submit button and used another page for it but instead it d’int work sometimes when I press I’ts: a run button and sometimes it does nothing.

32

Impossible to say, you should publish your work/project om something like github so we can have a look and help you

34

now here is my code:
index.html:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <form action="submission.html" method="POST"></form>
 <h1>gracie's pizzeria</h1>
 <p>please enter your password and username:</p>
 <form>
 password<input type="password">
 </form>
 <form>
 username<input type="text">
 </form>
 <p>order below:</p>    
 
      <hr>
        <section class="cooked">
          <label for="doneness">what size would you like?</label>
          <br>
          <span>small</span>
          <input type="range" name="doneness" id="doneness" value="3" min="1" max="5">
          <span>big</span>
        </section>
        <hr>
 <label>how many pizzas would you like?</label>
 <form>
 <input type="number" min="0" max="100" step="1">
 </form>
 <hr>

 <form>
  <p>what toppings would you like?</p>
  <label for="pepperoni">Pepperoni</label>
  <input id="pepperoni" name="topping" type="checkbox" value="pepperoni">
  <br>
  <label for="anchovy">Anchovy</label>
  <input id="anchovy" name="topping" type="checkbox" value="anchovy">
  <br>
  <label for="pineaple">Pineaple</label>
  <input id="pineaple" name="topping" type="checkbox" value="pineaple">
  
</form>
 <hr>
<form>
 <span>Would you like to add cheese?</span>
          <br>
          <input type="radio" name="cheese" id="yes" value="yes">
          <label for="yes">Yes</label>
          <input type="radio" name="cheese" id="no" value="yes">
          <label for="no">No</label>
  </form>
  <hr>
  <form>
     <label for="sauce">What type of sauce would you like?</label>
          <input list="sauces" id="sauce" name="sauce">
          <datalist id="sauces">
            <option value="ketchup"></option>
            <option value="chili"></option>
            <option value="mustard"></option>
          </datalist>
    </form>
    <hr>
    <form>
      <input type="submit" value="Submit order">
      </form>
</body>
</html>

submission.html:

<!DOCTYPE html>

<html>

<body>

<h3>thank you for ordering!</h3>

</body>

</html>
35

There should only be one form element.

<body>
<form action="submission.html" method="POST">
  <!-- ... all controls in here  -->
  <input type="submit" value="Submit Order">
</form>
</body>
1 Like
36

thanks mtf! I appreciate your help.

1 Like
38

Why ? Can’t we have many elements in one page ?

39

It is possible to have more than one form element, but each will need its own action/method and its own Submit input. If we only want to Submit once all (required) input controls have been populated, then pack it all into a single FORM element.

If we are using form controls to collect data for local rendering with script behavior, then it need not be wrapped in a form element. We can address each control individually in real time and render some kind of response immediately. That is another story, for later.

1 Like
40

Hello, I am using vs code, two files that index and submission.html working, but When I was press submit button, I got the “http 405post not allowed”. I debugged launch chrome.
What should I do for debug. How can I handle config https post request?
Thank you

41

Is it possible to just implement that into our index.html file or does it need to be a separate html file because it is a new page?

42

What is the difference between , and

Hello World, or at least this forum!

I am unsure if this has already been covered, but I have found the submit button confusing due to the different ways in which you can define a button, so I researched it a little, so you wont have to. Here is a brief summary;

 Defines a submit button which submits all form values to a form-handler.

      You can’t use pseudo-classes (::before, ::after) to style self-closing tags.


 Defines a clickable button, mainly used with JavaScript to activate a script.

      No default behaviour.


 Defines a clickable button, in which you can put text, images or other html tags.

      * More flexible in design, you can easily style buttons with CSS.

      * Always specify the type attribute for a <button> element, to tell browsers what type of button it is. Without a 
         type the default will be submit, meaning it will automatically submit data when pressed, which may not be what 
         you intend.

Hope this helps

Jim

43

Sorry, that didn’t render as intended, here’s a screendump of the same;

Submit Buttons
Submit Buttons739×472 14 KB

44

Sometimes the attribute ‘value’ gets rendered on the webpage and in other exercises its specifically pointed out that the ‘value’ attribute will not show up on the webpage? What is the exact purpose of the ‘value’ attribute? and when exactly does it show up?

45

The only time the ‘value’ shows on the page is within the field of an <input> control with type="text" or a <textarea> control.

<input type="text" value="default">

In a webpage we would see the word, ‘default’ within the field. Otherwise the text only displays as the user types it in.

We never see the value displayed for radio or checkbox types.

1 Like