2018-09-30 23:01:58 +01:00
---
id: bad87fee1348bd9aede08830
title: Create a Form Element
challengeType: 0
2019-07-31 11:32:23 -07:00
forumTopicId: 16817
2021-01-13 03:31:00 +01:00
dashedName: create-a-form-element
2018-09-30 23:01:58 +01:00
---
2020-11-27 19:02:05 +01:00
# --description--
2021-01-16 20:25:13 +01:00
You can build web forms that actually submit data to a server using nothing more than pure HTML. You can do this by specifying an `action` attribute on your `form` element.
2020-11-27 19:02:05 +01:00
2018-09-30 23:01:58 +01:00
For example:
2021-01-16 04:11:47 -05:00
```html
2022-02-23 00:34:33 +05:30
< form action = "url-where-you-want-to-submit-form-data" >
2021-01-16 04:11:47 -05:00
< input >
< / form >
```
2020-11-27 19:02:05 +01:00
# --instructions--
2020-08-31 06:50:46 +01:00
2021-04-26 19:04:53 +02:00
Nest the existing `input` element inside a `form` element and assign `"https://www.freecatphotoapp.com/submit-cat-photo"` to the `action` attribute of the `form` element.
2020-08-31 06:50:46 +01:00
2020-11-27 19:02:05 +01:00
# --hints--
2018-09-30 23:01:58 +01:00
2020-11-27 19:02:05 +01:00
The existing `input` element should be nested within a `form` element.
2018-09-30 23:01:58 +01:00
2020-11-27 19:02:05 +01:00
```js
const inputElem = document.querySelector('form input');
assert(
inputElem.getAttribute('type') === 'text' & &
inputElem.getAttribute('placeholder') === 'cat photo URL'
);
```
2021-06-14 17:14:23 +02:00
Your `form` should have an `action` attribute which is set to `https://www.freecatphotoapp.com/submit-cat-photo` .
2018-09-30 23:01:58 +01:00
2020-11-27 19:02:05 +01:00
```js
2021-05-06 06:36:33 +02:00
const action = $('form').attr('action');
assert(action.match(/^https:\/\/(www\.)?freecatphotoapp\.com\/submit-cat-photo$/i))
2018-09-30 23:01:58 +01:00
```
2020-11-27 19:02:05 +01:00
Your `form` element should have well-formed open and close tags.
```js
assert(
code.match(/< \/form > /g) &&
code.match(/< form [ ^ < ] * > /g) & &
code.match(/< \/form > /g).length === code.match(/< form [^<]* > /g).length
);
```
2018-09-30 23:01:58 +01:00
2020-11-27 19:02:05 +01:00
# --seed--
2018-09-30 23:01:58 +01:00
2020-11-27 19:02:05 +01:00
## --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 >
< input type = "text" placeholder = "cat photo URL" >
< / main >
```
2020-11-27 19:02:05 +01:00
# --solutions--
2018-09-30 23:01:58 +01:00
2019-02-25 19:50:58 -08:00
```html
2019-02-25 22:23:08 -05:00
< h2 > CatPhotoApp< / h2 >
< main >
< p > Click here to view more < a href = "#" > cat photos< / a > .< / p >
2020-08-31 06:50:46 +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 >
2020-08-31 06:50:46 +01:00
2019-02-25 22:23:08 -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" >
2019-02-25 22:23:08 -05:00
< input type = "text" placeholder = "cat photo URL" >
< / form >
< / main >
2018-09-30 23:01:58 +01:00
```