# Add a Submit Button to a Form question

**URL:** <https://forum.freecodecamp.org/t/add-a-submit-button-to-a-form-question/162406>\
**Category:** General\
**Created:** [December 5, 2017, 8:19pm UTC](https://forum.freecodecamp.org/t/add-a-submit-button-to-a-form-question/162406 "2017-12-05T20:19:31Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Val787](https://avatars.discourse-cdn.com/v4/letter/v/6a8cbe/32.png) [@Val787](https://forum.freecodecamp.org/u/Val787)\
**Post date:** [December 5, 2017, 8:19pm UTC](https://forum.freecodecamp.org/t/add-a-submit-button-to-a-form-question/162406/1 "2017-12-05T20:19:31Z")

</div>

**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**

```auto
<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](https://www.freecodecamp.org/challenges/add-a-submit-button-to-a-form)

---

<div class="post-metadata">

**Author:** ![Val787](https://avatars.discourse-cdn.com/v4/letter/v/6a8cbe/32.png) [@Val787](https://forum.freecodecamp.org/u/Val787)\
**Post date:** [December 5, 2017, 8:22pm UTC](https://forum.freecodecamp.org/t/add-a-submit-button-to-a-form-question/162406/2 "2017-12-05T20:22:36Z")

</div>

> [@Val787](#):
>
> 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

I meant to say Input element with the submit attribute

---

<div class="post-metadata">

**Author:** ![JScars](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jscars/32/72367_2.png) [@JScars](https://forum.freecodecamp.org/u/JScars)\
**Post date:** [December 5, 2017, 8:22pm UTC](https://forum.freecodecamp.org/t/add-a-submit-button-to-a-form-question/162406/3 "2017-12-05T20:22:53Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Val787](https://avatars.discourse-cdn.com/v4/letter/v/6a8cbe/32.png) [@Val787](https://forum.freecodecamp.org/u/Val787)\
**Post date:** [December 5, 2017, 8:36pm UTC](https://forum.freecodecamp.org/t/add-a-submit-button-to-a-form-question/162406/4 "2017-12-05T20:36:41Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![JScars](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jscars/32/72367_2.png) [@JScars](https://forum.freecodecamp.org/u/JScars)\
**Post date:** [December 5, 2017, 8:46pm UTC](https://forum.freecodecamp.org/t/add-a-submit-button-to-a-form-question/162406/5 "2017-12-05T20:46:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Val787](https://avatars.discourse-cdn.com/v4/letter/v/6a8cbe/32.png) [@Val787](https://forum.freecodecamp.org/u/Val787)\
**Post date:** [December 5, 2017, 8:48pm UTC](https://forum.freecodecamp.org/t/add-a-submit-button-to-a-form-question/162406/6 "2017-12-05T20:48:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![JScars](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jscars/32/72367_2.png) [@JScars](https://forum.freecodecamp.org/u/JScars)\
**Post date:** [December 5, 2017, 8:53pm UTC](https://forum.freecodecamp.org/t/add-a-submit-button-to-a-form-question/162406/7 "2017-12-05T20:53:31Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![Rastko](https://avatars.discourse-cdn.com/v4/letter/r/258eb7/32.png) [@Rastko](https://forum.freecodecamp.org/u/Rastko)\
**Post date:** [December 5, 2017, 10:24pm UTC](https://forum.freecodecamp.org/t/add-a-submit-button-to-a-form-question/162406/8 "2017-12-05T22:24:00Z")

</div>

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

```auto
<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.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 17, 2021, 8:32pm UTC](https://forum.freecodecamp.org/t/add-a-submit-button-to-a-form-question/162406/9 "2021-01-17T20:32:59Z")

</div>

Closed on January 17, 2021, 8:32pm UTC