<input> 태그 사용할 때 자주 놓치는 부분들과, 반드시 고민해야 할 사항들을 정리한 글입니다. 간단히 써뒀고 계속 업데이트 예정입니다.
- type
- name
- required
min, max, length를 고려하자.
type="number" 인 input 엘리먼트를 사용하고 있다면 반드시 min, max 값을 고려하자. 이 부분은 기획단에서 고려 되어야 할 사항이지만, 기획자가 놓칠 수 있다.
type="text" 도 마찬가지 minLength와 maxLength를 고려해야 한다.
리액트 컴포넌트 작성시, 위 값들을 반드시 true/false 값의 props로 전달할 수 있게 type 지정해두면 좋다.
숫자 키패드 소환
type='number' 속성을 부여했다 하더라도 iOS 에서는 일반 자판이 나옵니다. 숫자 키패드를 소환하려면 pattern='\d*' 속성을 추가해줍니다.
<input type='number' pattern='\d*' />trim()
사용자가 input 내용 처음 또는 끝부분에 공백을 넣는 경우가 생각보다 많이 있었습니다. 패스워드나 이메일등을 어디선가 복사-붙여넣기 했을 때 공백이 따라 붙는 경우도 있습니다. 그럴 경우 이메일 또는 비번 등이 틀렸다고 에러 메시지가 출력 될 것입니다.
닉네임을 만들 때는 심지어 그냥 공백만으로 닉네임은 만드는 사람도 있었습니다. <- 이렇게요.
그러한 경우를 대비하기 위해 꼭 value.trim(); 메소드를 사용하여 데이터를 다뤄야 합니다.
리액트를 사용할 경우, onChange() 함수로 value를 업데이트할 때 trim() 을 처리하게 되면, 띄어쓰기 조차 할 수 없게 되므로, trim() 메소드는 hangleSubmit 함수에서 처리 하도록 해야 합니다.
