input 태그는 매우 많이 사용되며, 실용적인 태그 중 하나이다.
input 태그 중에서도 종류가 많으므로 잘 외우고 써먹길 바란다.
어떠한 사이트의 회원가입 페이지를 만든다고 생각하고 하나씩 추가하며 태그를 설명하겠다.
일반적인 input 태그
type을 지정하지 않은 상태의 일반적인 input 태그로, 사용자가 텍스트를 입력할 수 있게 해준다.
input 태그 (password type)
패스워드와 같은 외부로 노출되면 곤란한 값들을 입력하는 input 태그는 password 타입을 사용하여 노출을 막는다.
input 태그 (checkbox type)
여러 옵션들을 선택할 수 있게 해주는 (다중 선택) input 태그이다.
이후 자바스크립트를 통해 실제로 데이터를 수집하여 처리할 수 있다.
input 태그 (color type)
색깔을 선택할 수 있게 해주는 input 태그이다.
많이 쓰이진 않는 것 같다. (필자도 있는지 처음 알음)
input 태그 (date type)
날짜를 선택할 수 있게 해주는 input 태그이다.
클릭하면 연도와 월, 일을 각각 선택할 수 있는 창이 뜬다.
input 태그 (datetime-local type)
날짜와 시간을 선택할 수 있게 해주는 input 태그이다.
마찬가지로 많이 사용하지는 않는 것 같다.
input 태그 (email type)
이메일을 입력하는 input 태그이다.
자바스크립트에서 처리하거나, form으로 서버에 전송할 때 email인지 아닌지 유효성을 검사해주는 것 같다.
input 태그 (file type)
파일을 첨부할 수 있게 해주는 input 태그이다.
자바스크립트에서 해당 파일을 처리할 수 있다.
input 태그 (hidden type)
페이지에 보여지지 않는 input 태그이다.
html 코드에 값을 저장하고 자바스크립트에서 사용한다던지 꽤 많은 사이트에서 사용한다.
보이지 않으니 쓸모 없다고 생각할 수 있는데 자바스크립트를 사용하면 생각보다 쓸모가 많을 수 있다.
input 태그 (number type)
숫자만 입력가능한 input 태그이다.
유저로부터 input 태그를 통해 숫자만 받고 싶을 경우 위의 input 태그를 사용한다.
예외적으로 'e'와 '.' '-' '+' 이러한 문자들은 입력될 수 있는데, 이는 자바스크립트의 Number 타입을 따르기 때문이다.
자바스크립트 영역에서 설명할 것이다.
input 태그 (radio type)
한 옵션만 선택 가능한 input 태그이다.
유저로부터 input 태그를 통해 한 가지 선택만 받고 싶을 경우 위의 input 태그를 사용한다.
html 코드가 상당히 복잡할 수 있는데
각각의 프로퍼티에 대한 설명은 다음과 같다.
name="gender": gender라는 이름으로 3가지의 radio 타입 input들을 묶은 것이다.
이와 같이 통일시켜주지 않으면 남성 여성 기타 3가지 옵션 모두가 선택가능한 상황을 보게 될 것이다.
위의 예시에서는 3개의 옵션 모두 성별을 선택하기 위한 하나의 큰 프레임 내에 있으므로 name 프로퍼티를 통일하였다.
id 프로퍼티는 뒤의 label 태그와 함께 사용되는데, label 태그에서 for 프로퍼티가 가리키는 값과 일치하는 id의 input 태그와 연동된다.
예를 들어, 여성이라는 텍스트를 클릭하면 해당하는 radio 버튼이 자동으로 선택된다. (원래는 안됨)
input 태그 (submit type)
form 태그와 함께 쓰이는데, form 태그 내 작성된 모든 양식들을 (어딘가에) 제출한다.
어디에 제출할 지는 자바스크립트에서 처리할 수 있다.
'WEB > 웹개발 기초 강좌' 카테고리의 다른 글
| [웹개발] 6. CSS 요소 배치 - position (2) | 2021.09.13 |
|---|---|
| [웹개발] 5. CSS 파헤치기 (0) | 2021.09.01 |
| [웹개발] 3. HTML - 태그의 종류와 이해 (0) | 2021.08.28 |
| [웹개발] 2. HTML 파헤치기 (0) | 2021.08.22 |
| [웹개발] 1. 웹개발 시작하기 (0) | 2021.08.21 |
