프론트에 대해서 잘 알지 못하지만 <input>은 javascript 등등과 함께 조합했을때 매우 빛을 발한다고는 생각한다.
하지만.... 나는 코린이니까.... 오늘은 과제로 <input>태그의 type 속성의 종류에 대해서만 살짝 맛만 보자
먼저
HTML에서 태그의 속성이란 태그의 문법 명령어가 다루지 못하는 명령어를 보조적으로 담당한다. 쉽게 이해하자면... 의성어? 의태어? 형용사, 부사 같은 느낌?? 좀 더 세밀한 설정을 할 수 있게 도와주는 것이다.
그러니까 input 태그는 값을 사용자로부터 받아온다는 건 알지만 어떤 형태로 받을건지 등등을 속성을 통해 설정해 줄 수 있다는 말이 되겠다.
그리고 태그마다 쓸 수 있는 속성이 정해져있으니 만약 더 많은 종류의 속성값 종류가 필요하다면 구글링을 추천한다.
<input>태그의 기본값은 "text"이며 따로 설정을 안해주면 text로 값을 받는 것 같다.
그리고 다른 언어와 어떻게 조합해 기능을 부여하느냐에 따라 같은 속성을 사용하더라도
입력값을 가려받기도 하고 굉장히 다양하게 응용이 가능하다!
+) 속성값은 사실 너무 많아서 표를 긁어왔다ㅋㅋㅋ
| button | 클릭할 수 있는 버튼을 정의함. | |
| checkbox | 체크박스(checkbox)를 정의함. | |
| color | 색을 선택할 수 있는 입력 필드(color picker)를 정의함. | |
| date | 날짜를 선택할 수 있는 입력 필드를 정의함. (year, month, day) | |
| datetime-local | 날짜와 시간을 선택할 수 있는 입력 필드를 정의함. (year, month, day, hour, minute) | |
| 이메일 주소를 입력할 수 있는 입력 필드를 정의함. | ||
| file | 업로드할 파일을 선택할 수 있는 입력 필드와 “파일 선택” 버튼을 정의함. | |
| hidden | 사용자에게는 보이지 않는 숨겨진 입력 필드를 정의함. | |
| image | 제출 버튼(submit button)으로 사용될 이미지를 정의함. | |
| month | 날짜를 선택할 수 있는 입력 필드를 정의함. (year, month) | |
| number | 숫자를 입력할 수 있는 입력 필드를 정의함. | |
| password | 비밀번호를 입력할 수 있는 입력 필드를 정의함. | |
| radio | 라디오 버튼(radio button)을 정의함. | |
| range | 슬라이드 바를 조정하여 범위 내의 숫자를 선택할 수 있는 입력 필드를 정의함. | |
| reset | 리셋 버튼(reset button)을 정의함. | |
| search | 검색어를 입력할 수 있는 텍스트 필드를 정의함. | |
| submit | 제출 버튼(submit button)을 정의함. | |
| tel | 전화번호를 입력할 수 있는 입력 필드를 정의함. | |
| text | type 속성의 기본값으로, 한 줄로 된 텍스트 필드를 정의함. | |
| time | 시간을 선택할 수 있는 입력 필드를 정의함. (hour, minute) | |
| url | URL 주소를 입력할 수 있는 입력 필드를 정의함. | |
| week | 날짜를 선택할 수 있는 입력 필드를 정의함. (year, week) |
728x90
'블록체인기반 SW 개발자 과정(feat.경일게임아카데미) > 과제' 카테고리의 다른 글
| < JAVASCRIPT >22.05.23일자 과제 / 가위바위보 게임 (2가지 방법)/ 난수 발생시키는 방법 / Math.random() 정수로 변환하는 방법 / 변수에 범위 지정해서 저장 / 변수 범위로 지정 / isNaN() (0) | 2022.05.23 |
|---|---|
| 영화 포스터 (0) | 2022.05.19 |
| <HTML>22.05.17일 과제2 / HTML로 표 만들기 (KY사이트 만들기)(feat. <colspan>, <rowspan>) (0) | 2022.05.17 |
| <HTML>22.05.17일 과제 / HTML 로 이력서 만들기 (1) | 2022.05.17 |
| 2022.05.16일자 과제 (0) | 2022.05.16 |
