# Добавление формы в Redux

На прошлом уроке мы узнали, что для полей ввода формы можно применить стейты, которые будут работать только внутри одного компонента, и создали пустую форму.

Давайте внутри тегов `form` разместим верстку для каждого поля, в которое будет вноситься информация. Первый инпут у нас будет отвечать за название продукта и его верстка будет такой:

`<form> <p> <label htmlFor="productName">Name:</label> <input id="productName" name="productName" value={name} onChange={onNameChanged} /> </p> </form>`

Вторым у нас будет `textarea` для описания продукта:

`<p> <label htmlFor="productDesc">Description:</label> <textarea id="productDesc" name="productDesc" value={desc} onChange={onDescChanged} /> </p>`

Напишите сами код для двух оставшихся инпутов для цены и количества с айди `productPrice` и `productAmount` соответственно.

После всех четырех полей ввода перед закрывающим тегом `form` добавьте кнопочку для сохранения:

`<button type="button">save</button>`

Наш компонент с формой готов. Давайте отобразим его на главной страничке. Для этого откроем файл `root.jsx`, импортируем в него компонент:

`import { NewProductForm } from '../parts/products/NewProductForm'`

И вставим его между тегом `hr` и компонентом `ProductsList` вот так:

`<hr></hr> <NewProductForm /> <ProductsList />`

Запустим наше приложение и полюбуемся на форму и список продуктов. Внесем еще стили в `index.css`:

`#main-page { max-width: 600px; } select, textarea, input, button { font-size: 18px; } form { margin-bottom: 20px; border-bottom: 2px solid lightgray; padding-bottom: 10px; } form p { margin: 5px; }`

Откройте ваше приложение со студентами. Сделайте верстку для вашей формы, как показано в уроке.

Добавьте законченный компонент `NewStudentForm` на главную страничку перед `StudentsList`

← →
↑