[HTML] 폼 요소 4, <input type="">의 속성 값

728x90

이번 포스트에서는 길고 길었던 폼 요소를 마무리 하려고 합니다. 사실 속성 편에서 <input type="">으로 퉁쳐도 되지만 그러기엔 type이 분량이 꽤 되어서 정리를 한 번 해보려고 합니다.

▽ text : 텍스트를 입력할 수 있게합니다. 한 줄만 입력 가능합니다.

▽ password : 텍스트를 입력하는데 입력내용이 사용자에게 보이지 않습니다.

이번에 알아볼 속성값들은 일반 텍스트에 속하지만 조금 특수한 입력의 경우들 입니다. 겉으로 보기만 했을 때는 일반 텍스트 필드와 같아 보이지만, 가상키보드 배열의 변경이나, 입력 방식에 조건이 있는 경우입니다.

▽ search : 검색상자를 만들어 줍니다. 일반 텍스트 필드와 같아 보이지만 전체를 지울 수 있는 X 박스가 표시됩니다.

▽ url : 주소를 입력할 수 있는 상자를 만들어 줍니다.

▽ email : 이메일 입력 필드를 만들어 줍니다. @의 존재유무를 통해 입력을 확인합니다.

▽ tel : 전화번호 입력 필드를 만들어 줍니다.

이번에는 텍스트가 아닌 숫자를 입력하는 속성값을 알아보겠습니다.

▽ number : 숫자를 입력하는 박스입니다. 필드를 클릭하면 수를 마우스로 증감시킬 수 있는 스핀박스가 생깁니다.

▽ range : 슬라이드를 이용해 수량조절을 할 수 있는 속성값입니다.

정보를 직접 입력하는 것 뿐만이 아니라 보기에서 선택해서 정보를 넘기는 방식도 존재합니다. 라디오와 체크박스 방식 두 가지가 존재합니다. 두 방법의 차이는 라디오는 한 가지의 선택만 가능하지만, 체크방식은 한 개 이상의 선택을 할 수 있습니다.

▽ radio : 라디오 선택을 만듭니다. 라디오 선택방식은 하나의 체크만 가능하기 때문에 <input>태그안에 name이라는 추가적인 속성을 줍니다. name속성은 같은 그룹끼리 같은 이름을 가지고 있어야합니다.

▽ checkbox : 여러 개가 선택 가능한 체크박스를 만듭니다.

▽ color : 색상을 선택할 수 있는 선택상자를 만들어 줍니다.

날짜를 텍스트나 정수형태로 넣어도 처리가 가능하지만 속성을 이용해서 편리하게 넣을 수 있기도 합니다. 텍스트 박스 오른쪽에 달력그림이 표시되며 달력그림을 누르면 달력에서 날짜를 선택할 수 있습니다.

▽ date : '년-월-일'의 정보를 표시 해 줍니다.

▽ month : '년-월'까지의 정보를 표시 해 줍니다.

▽ week : '년-n번째주'의 정보를 표시 해 줍니다.

날짜 뿐만이 아니라 시간 지정 또한 가능합니다.

▽ time : 시간을 표시합니다.

▽ datetime : 날짜와 시간을 함께 지정합니다. 표준 시간대를 명시해주어야합니다.

▽ datetime-local : 날짜와 시간을 함께 지정합니다.

정보 입력을 다했으면 다음에는 보통 엔터키를 누르거나 로그인등의 제출버튼을 누릅니다. 마지막으로 알아볼 속성값들은 바로 이 버튼들에 관한 속성값입니다.

▽ button : 아무기능도 없는 모양만 존재하는 버튼을 만듭니다. 보통 스크립트와 연결해서 기능을 넣습니다.

▽ image : 버튼대신 이미지를 넣습니다. 첨부된 이미지가 버튼역할을 하게 됩니다.

▽ file : 파일을 첨부 할 수 있는 버튼을 만들어 줍니다.

▽ submit : 입력한 정보를 서버로 넘겨주는 역할의 버튼을 만듭니다.

▽ reset : 입력한 정보를 기본값으로 재설정하는 버튼입니다.

이렇게 4개의 포스팅에 걸쳐서 폼 요소들이 종료되었습니다. 내용은 방대하지만 태그들과 속성의 의미가 명확해서 사용하는데는 어렵지 않으리라고 생각됩니다.

728x90

밤의 공간