55. 양식 입력 추가하기

 

input에 step 기능

몰랐는데

정의 및 특징
<input> 태그의 step 속성은 <input> 요소에 입력할 수 있는 숫자들 사이의 간격을 명시합니다.
 
만약 step 속성값이 2라면, <input> 요소에 입력할 수 있는 숫자는 ..., -4, -2, 0, 2, 4, ... 등이 됩니다.
step 속성은 min, max 속성과 함께 <input> 요소에 입력할 수 있는 유효한 값의 범위를 설정하는데 사용할 수 있습니다.
 
step 속성이 제대로 동작하는 <input> 요소의 type 속성값은 다음과 같습니다.
- date, datetime, datetime-local, month, number, range, time, week

그렇다고 한다
즉 숫자 사이 간격 설정

 

NewExpense.js 파일과 
ExpenseForm.js 파일 그리고 각각의 css 파일을 생성했다

NewExpense.js

import React from "react";
import "./NewExpense.css";
import ExpenseForm from "./ExpenseForm";
const NewExpense = () => {
  return <div className="new-expense">
    <ExpenseForm />
  </div >
}

export default NewExpense;

ExpenseForm.js

import React from "react";
import "./ExpenseForm.css";
const ExpenseForm = () => {
  return <form>
    <div className="new-expense__controls">
      <div className="new-expense__control">
        <label htmlFor="">Title</label>
        <input type="text" />
      </div>
      <div className="new-expense__control">
        <label htmlFor="">Amount</label>
        <input type="number" min="0.01" step="0.01 " />
      </div>
      <div className="new-expense__control">
        <label htmlFor="">Date</label>
        <input type="date" min="2021-01-01" max="2023-12-31" />
      </div>
      <div className="new-expense__actions">
        <button type="submit">Add Expense</button>
      </div>
    </div>
  </form>
}

export default ExpenseForm;

 

css 파일 출처, 여기서 확인 가능  

https://github.com/academind/react-complete-guide-code/blob/04-react-state-events/extra-files/ExpenseForm.css

 

그리고 아래와 같은 화면까지 만들어 봤다
css는 거의 복붙