<input>사용자들에게 어떠한 텍스트, 숫자 즉 값을 받는다.
input에는 type이라는 속성이 있는데, 종류가 엄청 많다. (text, number, radio, checkbox, textarea 등등)
그 중에서 제일 중요한 input type="text"를 알아보려고한다.
<input type="text" />이렇게 입력하면, 이렇게 입력할 수 있는 창이 나온다. 추가로 input태그는 닫는 태그가 따로 존재 하지 않는다.
그리고, type="text"말고도 여러가지 속성들이 있다. 코드로 뭐가 있는지 살펴보자.
<input type="text" placeholder="입력해주세요!" value="지우면 없어져요" maxlength="13" minlength ="5" required />-
placeholder : 인풋창에 미리 뭔가 입력 해놓는다!선택이 안된다!
예시) -
value : 밸류 값을 미리 넣어 둘 수 있다.
예시) -
maxlength / minlength : 텍스트, 숫자길이의 최대길이, 최소길이를 정해 놓을 수 있다.
-
required : 반드시 입력을 해야하는 창, 입력하지 않고 제출을 하면, 써달라고 집요하게 요구한다.
추가로 input type의 여러 종류들을 살펴보겠다.
1. 이메일
<input type="email" />이메일을 입력하라는 창이 나온다. @가 포함되지않으면 입력하라고 요구한다.
2. 패스워드
<input type="password" minlength="6"/>입력하면 점으로 표시된다. 신기방기! text때처럼 minlength 속성을 줄 수 있다.
예시)
3. url
<input type="url"/>4. number
<input type="number" min="12" max="60"/>숫자를 키우고, 줄일수 있는 약간의 ui가 나온다.
최소값과, 최대값을 설정 할 수 있다.
예시)
5. file
<input type="file" accepted=".png, .jpg"/>파일을 올릴수 있는 폼이 생성된다. accepted라는 속성을 넣어 .png, .jpg 원하는 형식을 받을 수 있다.
예시)
이렇게 input type="text" 부터 사용자들에게 입력값을 받을 수 있는 정보들에 따라 다른 type들을 알아 보았습니다. 상황에 맞게, type을 선별하여 써야겠다.
