Add a Submit Button to a Form question

Tell us what’s happening:

So I am on the lesson in which I have to make a submit button for a form…what I don’t get is why am I making a submit button nested inside a form element when I could just use the element with a submit attribute…wouldn’t this achieve the same with less work? Sorry if its a dumb question but i am reading on each lesson as I go in order to understand them through and through.

Your code so far

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>

<a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back. " src="https://bit.ly/fcc-relaxing-cat"></a>

<p>Things cats love:</p>
<ul>
  <li>cat nip</li>
  <li>laser pointers</li>
  <li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
  <li>flea treatment</li>
  <li>thunder</li>
  <li>other cats</li>
</ol>
<form action="/submit-cat-photo">
  <input type="text" placeholder="cat photo URL">
  <button type="submit"> 
</form>

Your browser information:

Your Browser User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/604.3.5 (KHTML, like Gecko) Version/11.0.1 Safari/604.3.5.

Link to the challenge:
https://www.freecodecamp.org/challenges/add-a-submit-button-to-a-form

I meant to say Input element with the submit attribute

I think that is a rule because when you connect it with php for example you can have multiple forms in a single web, and the submit button sends the information that is only in his form field.

Hey, could you elaborate a bit more on that? I am fairly new to coding and I am not sure if you where talking about the submit button on the input element or the submit button on the form element.

Sorry i’m not an English speaker so it’s pretty difficult to me explain myself, but i’m gonna try.

When you click the submit button you send to the server information that it needs to do something…
But if the page has multiples forms how would your computer know what information to take and what to say to the server that he need to do?

For example, let’s assume you are working in a page that has 2 forms one for print some text on a imagen and one to generate a password with the words in the text (i have no imagination haha).

So the two informations that your computer sends are texts… If both have text, how would your computer know which one to send to the server and what to tell that he needs to do?

When you put the submit button inside a form you are telling to your computer, if the user clicks submit you should send only THIS information, and tell to the server to do THIS

Oh that make s a lot of sense! Thank you so much! and your english is pretty good!

1 Like

Thanks, as additional information some explorers assume that if the form has only one button, then it assume that’s the submit button.
At leats according to the Mozilla reference. ( I didn’t know this, you learn something new all the days).

1 Like

Different forms can do different things on the same page, because they use different action attributes.
For Example

<form action="print.php"></form>
<form action="message.php"></form>

both can be on the same page but have different function. It’s all about the action attribute.