온라인 강의/React 완벽 가이드 [Udemy]
55. 양식 입력 추가하기
유호야
2023. 6. 2. 17:54
반응형
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 파일 출처, 여기서 확인 가능
그리고 아래와 같은 화면까지 만들어 봤다
css는 거의 복붙
반응형