본문 바로가기

Programming/HTML+CSS

 (76)
3. 입력 양식 작성(3) - 다양한 데이터, 텍스트 입력 태그 1 지금까지 살펴본 기본적인 input 태그들은 어느 정도 마무리 되었습니다. 지금부터는 input 이외에 단독으로 사용되는 몇 가지 입력 태그에 대해서 살펴보도록 하겠습니다. ○ : 여러 줄의 텍스트 입력 폼 가입 양식에서 여러 줄의 요청사항이나, 메모, 하고 싶은 말 등을 입력받기 위해서는 기존 input type에서 제공하는 텍스트 입력 방식으로는 공간이 부족할 것입니다. 여러 줄의 텍스트를 자유롭게 입력받기 위해서는 태그를 사용해야 합니다. 태그에서 사용되는 속성은 대표적으로 cols, rows가 있습니다. 이는 이름에서 유추할 수 있다시피, cols를 통해 가로의 길이를 지정하고 rows로 입력 필드 세로(줄)의 길이를 지정할 수 있습니다. cols의 경우 입력하는 숫자만큼의 영문 텍스트를 표시하는..
3. 입력 양식 작성(2) - input 태그 7 이번 시간에는 잠시 분위기를 환기하기 위해, 간단하게 텍스트용 input type에서 사용하게 되는 유용한 속성을 살펴보려고 합니다. 바로 autofocus / placeholder / readonly / required입니다. 이 속성들은 우리가 흔히 웹페이지나 앱에서 친숙하게 사용하는 기능들이라 금방 이해가 가실 것입니다. 필수적인 요소임에도, 사용법은 간단하기 때문에 빠르게 훑고 예제를 살펴보도록 하겠습니다. 우선 autofocus는 어떤 텍스트 입력 input type이 있는 페이지를 열었을 때, 유저가 클릭하지 않더라도 해당 폼에 커서가 자동으로 클릭되어 있도록 지정하는 속성입니다. placeholder는 우리가 앱이나 홈페이지에서 항상 접하는 것들입니다. 텍스트 입력 란에 '힌트'를 표시하는 ..
3. 입력 양식 작성(2) - input 태그 6 ○ input type="file" : 파일 첨부가 필요할 때 input type에서 file을 사용하게 되면, 우리가 흔히 PC에서 파일을 업로드할 때 사용하는 첨부파일 기능을 사용할 수 있게 됩니다. 물론, 일반적으로는 해당 파일이 저장되고 서버로 전송되는 과정을 거치게 되지만 여기서는 입력 폼만 간단하게 살펴보도록 하겠습니다. 배송정보 리스트 이름 주소 이메일 휴대전화번호 레드 옐로우 화이트 그레이 배송비 선택 선불결제 착불 할인 인증 서류 HTML 삽입 미리보기할 수 없는 소스 ○ input type="hidden" : 유저에게 보이지 않는 정보 input 태그를 작성하는 것은 대부분 유저에게 무엇인가 값을 입력받아, 그것을 서버로 전송하는 목적으로 사용됩니다. 히든 태그를 사용하게 되면, 해당 ..
3. 입력 양식 작성(2) - input 태그 5 ○ type="submit", type="reset" : 전송과 리셋 submit 타입은 우선 특정 form에 입력한 정보를 서버로 전송하는 역할을 합니다. 이를 통해서 전달되는 정보는 태그의 action 속성에서 지정한 처리 서버에 전달되고, reset 버튼은 말 그대로 해당 폼에 입력된 모든 값들을 지우게 됩니다. 두 타입 모두 value를 통해 버튼에 나타나는 텍스트를 입력하게 되죠. 중요한 역할을 하지만, 구현 자체는 간단하므로 바로 예시를 살펴보겠습니다. (참고로 예제에서는 form action 속성에 아무것도 연결되어 있지 않기 때문에, 전송을 하더라도 별도의 동작은 일어나지 않습니다. 각각의 폼에 텍스트와 체크 박스, 라디오 버튼을 클릭한 후 reset을 눌러 테스트해보시기 바랍니다) 배송정..
3. 입력 양식 작성(2) - input 태그 4 계속해서 input 타입의 여러 종류에 대해서 살펴보도록 하겠습니다. 이번에는 날짜, 시간과 관련된 태그를 살펴보도록 하겠습니다. ○ type="date" / "month" / "week" : 날짜 입력을 위한 input type 타입 값으로만 보았을 때는 일/월/주를 단일로 입력하는 필드일 것으로 보이지만, 실제로 각 타입에 따라 입력되는 값들은 다음과 같습니다. - data : yyyy-mm-dd - month : yyyy-mm - week : 특정 주를 선택해 표시(yyyy-w) 이 태그는 설명하는 것보다는 직접 태그를 입력하고, 결과를 보는 것이 좋을 것으로 보입니다. 아래 코드를 참고해 주세요. 날짜 지정 타입 사용예시 HTML 삽입 미리보기할 수 없는 소스 ○ type="time" / "dat..
3. 입력 양식 작성(2) - input 태그 3 이번에는 지난 시간에 이어서 주요 input type 중 숫자 입력 필드와 관련된 내용을 체크해 보도록 하겠습니다. ○ type="number" / "range" : 숫자 입력 전용 타입 '숫자'를 입력한다고 설명했는데, 단순히 키보드나 키패드로 입력하는 것을 의미하는 것이 아니라 숫자 전용 UI를 이용해 입력할 수 있는 필드를 의미합니다. 정확하게는 타입 "number"의 경우에는 스핀 박스(화살표를 클릭해 숫자를 증가/감소)를 의미하고 "range"의 경우에는 슬라이드 막대를 이용해 숫자 값을 조정하게 됩니다. 그럼 input type "number"와 "range"에서 사용할 수 있는 속성도 알아보겠습니다. - min : 필드 입력 최솟값(디폴트는 0) - max : 필드 입력 최댓값(디폴트는 10..
3. 입력 양식 작성(2) - input 태그 2 지난 아티클부터 input type 종류별 특성에 대해서 하나씩 살펴보고 있습니다. 계속해서 다양한 input type에 대해서 살펴보도록 하겠습니다. ○ type="search" / "url" / "email" / "tel" : 입력 유형 자동 인식타입 위 속성들의 경우, HTML5 이전까지 각 입력값의 종류를 직접 확인하는 등 텍스트 필드에서 구분하기 어려웠던 속성들입니다. HTML5에 들어서는 intput type을 명시해 주면 브라우저나 작동 환경에 따라서 다소 차이는 있지만, 해당 필드에서 입력되는 값이 어떤 유형인지 자동으로 인식해 분류할 수 있게 되었습니다. - search : 일반적인 텍스트 필드처럼 보이지만, '검색'을 위한 텍스트 필드로 인식됩니다. 자동으로 X 버튼이 노출됩니다. - ..
3. 입력 양식 작성(2) - input 태그 1 이번 아티클부터, 본격적으로 input 태그의 종류와 속성에 대해서 살펴보겠습니다. 사실 input 태그에는 꽤 여러 가지 종류의 타입과 속성이 존재하기 때문에, 일일이 망라하는 것은 어려운 일입니다. 우선은 최대한 자주 사용하는 것들 중심으로 살펴보겠습니다. 여기서 설명하는 것 이외의 타입이나 속성들이 궁금하면, 아래의 페이지에서 예시와 함께 살펴보시기를 추천드립니다. 본 내용들을 어느 정도 이해한 이후에는 이런 리스트에서 원하는 내용만 빠르게 찾아서 사용하실 수 있을 것입니다. : 입력 요소 - HTML: Hypertext Markup Language | MDN HTML 요소는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다. 사용자 에이전트에 따라서 다양한 종류의 입력 ..

티스토리툴바