2018-09-30 23:01:58 +01:00
---
id: bad87fee1348bd9aedd08830
title: Add a Submit Button to a Form
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cp2Nkhz'
2019-07-31 11:32:23 -07:00
forumTopicId: 16627
2021-01-13 03:31:00 +01:00
dashedName: add-a-submit-button-to-a-form
2018-09-30 23:01:58 +01:00
---
2020-11-27 19:02:05 +01:00
# --description--
Let's add a `submit` button to your form. Clicking this button will send the data from your form to the URL you specified with your form's `action` attribute.
2018-09-30 23:01:58 +01:00
Here's an example submit button:
2021-03-19 00:24:09 +01:00
```html
< button type = "submit" > this button submits the form< / button >
```
2020-11-27 19:02:05 +01:00
# --instructions--
2021-02-01 11:56:07 -08:00
Add a button as the last element of your `form` element with a type of `submit` , and `Submit` as its text.
2020-11-27 19:02:05 +01:00
# --hints--
2021-02-01 11:56:07 -08:00
Your `form` should have a `button` inside it.
2020-11-27 19:02:05 +01:00
```js
assert($('form').children('button').length > 0);
2018-09-30 23:01:58 +01:00
```
2020-11-27 19:02:05 +01:00
Your submit button should have the attribute `type` set to `submit` .
2018-09-30 23:01:58 +01:00
2020-11-27 19:02:05 +01:00
```js
assert($('button').attr('type') === 'submit');
```
2018-09-30 23:01:58 +01:00
2020-11-27 19:02:05 +01:00
Your submit button should only have the text `Submit` .
```js
assert(
$('button')
.text()
.match(/^\s*submit\s*$/gi)
);
```
Your `button` element should have a closing tag.
```js
assert(
code.match(/< \/button > /g) &&
code.match(/< button / g ) & &
code.match(/< \/button > /g).length === code.match(/< button / g ). length
);
```
# --seed--
## --seed-contents--
2018-09-30 23:01:58 +01:00
```html
< h2 > CatPhotoApp< / h2 >
< main >
< p > Click here to view more < a href = "#" > cat photos< / a > .< / p >
2018-10-08 01:01:53 +01:00
2021-09-21 23:46:55 +09:00
< a href = "#" > < img src = "https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt = "A cute orange cat lying on its back." > < / a >
2018-10-08 01:01:53 +01:00
2018-09-30 23:01:58 +01:00
< 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 >
2021-04-26 19:04:53 +02:00
< form action = "https://www.freecatphotoapp.com/submit-cat-photo" >
2018-09-30 23:01:58 +01:00
< input type = "text" placeholder = "cat photo URL" >
< / form >
< / main >
```
2020-11-27 19:02:05 +01:00
# --solutions--
2018-09-30 23:01:58 +01:00
2019-02-15 00:58:40 +05:30
```html
2018-11-06 21:44:23 +05:00
< h2 > CatPhotoApp< / h2 >
< main >
< p > Click here to view more < a href = "#" > cat photos< / a > .< / p >
2021-09-21 23:46:55 +09:00
< a href = "#" > < img src = "https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt = "A cute orange cat lying on its back." > < / a >
2018-11-06 21:44:23 +05:00
< 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 >
2021-04-26 19:04:53 +02:00
< form action = "https://www.freecatphotoapp.com/submit-cat-photo" >
2018-11-06 21:44:23 +05:00
< input type = "text" placeholder = "cat photo URL" >
< button type = "submit" > Submit< / button >
< / form >
< / main >
2018-09-30 23:01:58 +01:00
```