2018-10-10 18:03:03 -04:00
---
id: bad87fee1348bd9aedd08830
title: Add a Submit Button to a Form
challengeType: 0
2019-08-28 16:26:13 +03:00
videoUrl: https://scrimba.com/p/pVMPUv/cp2Nkhz
forumTopicId: 16627
2018-10-10 18:03:03 -04:00
localeTitle: Добавить кнопку отправки в форму
---
## Description
2019-08-28 16:26:13 +03:00
< section id = 'description' >
Давайте добавим кнопку < code > submit< / code > в вашу форму. Нажатие этой кнопки отправит данные из вашей формы по URL-адресу, указанному вами с помощью атрибута формы < code > action< / code > . Вот пример кнопки отправки: < code > < button type=" submit" > this button submits the form< /button> < / code >
< / section >
2018-10-10 18:03:03 -04:00
## Instructions
2019-08-28 16:26:13 +03:00
< section id = 'instructions' >
Добавьте кнопку в качестве последнего элемента вашего элемента < code > form< / code > с типом < code > submit< / code > и «Отправить» в качестве текста.
< / section >
2018-10-10 18:03:03 -04:00
## Tests
< section id = 'tests' >
```yml
tests:
2019-08-28 16:26:13 +03:00
- text: Your form should have a button inside it.
testString: assert($("form").children("button").length > 0);
- text: Your submit button should have the attribute < code > type</ code > set to < code > submit</ code > .
testString: assert($("button").attr("type") === "submit");
- text: Your submit button should only have the text "Submit".
testString: assert($("button").text().match(/^\s*submit\s*$/gi));
- text: Make sure your < code > button</ code > element has a closing tag.
testString: assert(code.match(/< \/button > /g) && code.match(/< button / g ) && code . match (/< \/button > /g).length === code.match(/< button / g ). length );
2018-10-10 18:03:03 -04:00
```
< / section >
## Challenge Seed
< section id = 'challengeSeed' >
< div id = 'html-seed' >
```html
< 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 >
< form action = "/submit-cat-photo" >
< input type = "text" placeholder = "cat photo URL" >
< / form >
< / main >
```
< / div >
< / section >
## Solution
< section id = 'solution' >
2019-08-28 16:26:13 +03:00
```html
< 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 >
< form action = "/submit-cat-photo" >
< input type = "text" placeholder = "cat photo URL" >
< button type = "submit" > Submit< / button >
< / form >
< / main >
2018-10-10 18:03:03 -04:00
```
2019-08-28 16:26:13 +03:00
2018-10-10 18:03:03 -04:00
< / section >