Input 태그, 속성

오늘은 그동안 리액트 코드를 작성하면서 무작정 따라하기만 바빴었는데, 쭉 예제를 작성해오면서 빠지지않는 태그들이 있었다.

input태그가 참 많이 쓰였는데 계속 쓰면서 공부가 부족해서 제대로 쓰지 못하는 것 같아서 좀 찾아봤다.

 

<input
  ref={(ref) => this.input = ref}
  type='password'
  value={this.state.password}
  onChange={this.handleChange}
  className={this.state.clicked ? (this.state.validated ? 'success' : 'failure') : ''}
  onKeyPress={this.onKeyPress}
/>

 

이렇게 input 태그를 작성할때 태그 안에 작성되는 속성들을 더 다양하게 알고, 잘 활용하고 싶다는 생각에 찾아서 정리해보았다.

 

type 속성	내용
text	텍스트 입력 창
password	비밀번호 입력 창
radio	선택할 수 있는 라디오 버튼 생성
checkbox	체크박스 생성
file	파일 이름 입력 창
image	이미지를 전송 버튼으로 만듦
hidden	사용자에게는 안보이지만, 서버로 전송
submit	서버로 제출, 전송하는 버튼
button	일반 버튼 생성

 

이렇게 type 속성 이외에 많은 속성들이 존재한다.

input 태그에 사용이 가능한 다른 속성들!

요즘 리액트를 공부할 때 해보는 예제들에 보통 type, value 등의 속성들은 빠짐없이 나오고 있다.

 

속성	내용
value	전송할 입력값 지정
title	마우스를 올렸을 때 나타날 메시지
readonly	키보드로 수정 불가
required	반드시 입력되어야 form 전송
step	number타입에 간격을 지정
disabled	선택이나 수정이 불가능한 상태

 

이런 태그들 말고 또 쓰이고 발견되는 속성들이 있으면 추가해서 계속 눈에 익혀놔야겠다!