2021-10-14 23:33:13 +01:00
---
id: 60fad1cafcde010995e15306
2021-10-21 10:07:52 -07:00
title: Step 36
2021-10-14 23:33:13 +01:00
challengeType: 0
2021-10-21 10:07:52 -07:00
dashedName: step-36
2021-10-14 23:33:13 +01:00
---
# --description--
With form submissions, it is useful, and good practice, to provide each submittable element with a `name` attribute. This attribute is used to identify the element in the form submission.
Go ahead, and give each submittable element a unique `name` attribute of your choosing. _Except for the two `radio` inputs._
# --hints--
2022-04-06 03:23:16 +06:00
You should give the `input` expecting a first name a `name` attribtute. _PS I would have chosen `first-name`_
2021-10-14 23:33:13 +01:00
```js
assert.isNotEmpty(document.querySelector('fieldset:nth-child(1) > label:nth-child(1) > input')?.name);
```
2022-04-06 03:23:16 +06:00
You should give the `input` expecting a last name a `name` attribute. _PS I would have chosen `last-name`_
2021-10-14 23:33:13 +01:00
```js
assert.isNotEmpty(document.querySelector('fieldset:nth-child(1) > label:nth-child(2) > input')?.name);
```
2022-04-06 03:23:16 +06:00
You should give the `email` a `name` attribute. _PS I would have chosen `email`_
2021-10-14 23:33:13 +01:00
```js
assert.isNotEmpty(document.querySelector('input[type="email"]')?.name);
```
2022-04-06 03:23:16 +06:00
You should give the `password` a `name` attribute. _PS I would have chosen `password`_
2021-10-14 23:33:13 +01:00
```js
assert.isNotEmpty(document.querySelector('input[type="password"]')?.name);
```
2022-04-06 03:23:16 +06:00
You should give the `checkbox` a `name` attribute. _PS I would have chosen `terms`_
2021-10-14 23:33:13 +01:00
```js
assert.isNotEmpty(document.querySelector('input[type="checkbox"]')?.name);
```
2022-04-06 03:23:16 +06:00
You should give the `file` a `name` attribute. _PS I would have chosen `file`_
2021-10-14 23:33:13 +01:00
```js
assert.isNotEmpty(document.querySelector('input[type="file"]')?.name);
```
2022-04-06 03:23:16 +06:00
You should give the `number` a `name` attribute. _PS I would have chosen `age`_
2021-10-14 23:33:13 +01:00
```js
assert.isNotEmpty(document.querySelector('input[type="number"]')?.name);
```
2022-04-06 03:23:16 +06:00
You should give the `select` element a `name` attribute. _PS I would have chosen `referrer`_
2021-10-14 23:33:13 +01:00
```js
assert.isNotEmpty(document.querySelector('select')?.name);
```
2022-04-06 03:23:16 +06:00
You should give the `textarea` element a `name` attribute. _PS I would have chosen `bio`_
2021-10-14 23:33:13 +01:00
```js
assert.isNotEmpty(document.querySelector('textarea')?.name);
```
You should not give any of the `option` elements a `name` attribute.
```js
[...document.querySelectorAll('option')]?.forEach(option => assert.isUndefined(option?.name));
```
You should not give any of the `label` elements a `name` attribute.
```js
[...document.querySelectorAll('label')]?.forEach(label => assert.isUndefined(label?.name));
```
You should not give any of the `fieldset` elements a `name` attribute.
```js
[...document.querySelectorAll('fieldset')]?.forEach(fieldset => assert.isEmpty(fieldset?.name));
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
< html >
< head >
2022-03-14 15:54:43 +00:00
< title > Registration Form< / title >
2021-10-14 23:33:13 +01:00
< link rel = "stylesheet" type = "text/css" href = "styles.css" / >
< / head >
< body >
< h1 > Registration Form< / h1 >
< p > Please fill out this form with the required information< / p >
< form action = 'https://fcc-registration-form.com' >
--fcc-editable-region--
< fieldset >
< label > Enter Your First Name: < input type = "text" required / > < / label >
< label > Enter Your Last Name: < input type = "text" required / > < / label >
< label > Enter Your Email: < input type = "email" required / > < / label >
< label > Create a New Password: < input type = "password" pattern = "[a-z0-5]{8,}" required / > < / label >
< / fieldset >
< fieldset >
< label > < input type = "radio" name = "account-type" / > Personal Account< / label >
< label > < input type = "radio" name = "account-type" / > Business Account< / label >
< label >
< input type = "checkbox" required / > I accept the < a href = "https://www.freecodecamp.org/news/terms-of-service/" > terms and conditions< / a >
< / label >
< / fieldset >
< fieldset >
< label > Upload a profile picture: < input type = "file" / > < / label >
< label > Input your age (years): < input type = "number" min = "13" max = "120" / >
< / label >
< label > How did you hear about us?
< select >
< option value = "" > (select one)< / option >
< option value = "1" > freeCodeCamp News< / option >
< option value = "2" > freeCodeCamp YouTube Channel< / option >
< option value = "3" > freeCodeCamp Forum< / option >
< option value = "4" > Other< / option >
< / select >
< / label >
< label > Provide a bio:
< textarea rows = "3" cols = "30" placeholder = "I like coding on the beach..." > < / textarea >
< / label >
< / fieldset >
--fcc-editable-region--
< input type = "submit" value = "Submit" / >
< / form >
< / body >
< / html >
```
```css
body {
width: 100%;
height: 100vh;
margin: 0;
background-color: #1b1b32 ;
color: #f5f6f7 ;
}
label {
display: block;
margin: 0.5rem 0;
}
```
