2018-09-30 22:01:58 +00:00
---
id: bad87fee1348bd9aedd08830
title: Add a Submit Button to a Form
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cp2Nkhz'
2019-07-31 18:32:23 +00:00
forumTopicId: 16627
2021-01-13 02:31:00 +00:00
dashedName: add-a-submit-button-to-a-form
2018-09-30 22:01:58 +00:00
---
2020-11-27 18:02:05 +00: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 22:01:58 +00:00
Here's an example submit button:
2020-11-27 18:02:05 +00:00
`<button type="submit">this button submits the form</button>`
# --instructions--
2021-02-01 19:56:07 +00: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 18:02:05 +00:00
# --hints--
2021-02-01 19:56:07 +00:00
Your `form` should have a `button` inside it.
2020-11-27 18:02:05 +00:00
```js
assert($('form').children('button').length > 0);
2018-09-30 22:01:58 +00:00
```
2020-11-27 18:02:05 +00:00
Your submit button should have the attribute `type` set to `submit` .
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
```js
assert($('button').attr('type') === 'submit');
```
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00: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 22:01:58 +00:00
```html
< h2 > CatPhotoApp< / h2 >
< main >
< p > Click here to view more < a href = "#" > cat photos< / a > .< / p >
2018-10-08 00:01:53 +00:00
2018-09-30 22:01:58 +00:00
< a href = "#" > < img src = "https://bit.ly/fcc-relaxing-cat" alt = "A cute orange cat lying on its back." > < / a >
2018-10-08 00:01:53 +00:00
2018-09-30 22:01:58 +00: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 >
2020-07-15 09:56:49 +00:00
< form action = "https://freecatphotoapp.com/submit-cat-photo" >
2018-09-30 22:01:58 +00:00
< input type = "text" placeholder = "cat photo URL" >
< / form >
< / main >
```
2020-11-27 18:02:05 +00:00
# --solutions--
2018-09-30 22:01:58 +00:00
2019-02-14 19:28:40 +00:00
```html
2018-11-06 16:44:23 +00:00
< h2 > CatPhotoApp< / h2 >
< main >
< p > Click here to view more < a href = "#" > cat photos< / a > .< / p >
< a href = "#" > < img src = "https://bit.ly/fcc-relaxing-cat" alt = "A cute orange cat lying on its back." > < / 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 >
2020-07-15 09:56:49 +00:00
< form action = "https://freecatphotoapp.com/submit-cat-photo" >
2018-11-06 16:44:23 +00:00
< input type = "text" placeholder = "cat photo URL" >
< button type = "submit" > Submit< / button >
< / form >
< / main >
2018-09-30 22:01:58 +00:00
```