친절한효자손 취미생활

오늘은 홈페이지를 만들 때, 가장 기본이 되는 여러가지 폼에 대해서 배웠습니다. 어떤 종류의 폼이 있는지 알아보고, 어떻게 태그를 사용하는지, 어떻게 적용시키는지에 대해서 간단히 알아볼 것입니다.


먼저 아이디를 입력해야 한다면, 빈 칸을 구성하는 네모 상자가 필요하겠습니다. 그리고 비밀번호 입력 항목도 있어야 합니다. 성별을 선택하는 메뉴도 필요할 것 같고, 주민번호를 요구하기도 하겠죠? 그리고 비밀번호 분실 시 질문을 선택하는 항목도 있는 경우를 종종 경험해보셨을 겁니다. 그리고 오픈마켓에서 흔하게 볼 수 있는 제품 구매 후기 칸도 한번 구성해 보도록 하겠습니다.



input type="text" / id / name / method / action / enctype


먼저 폼을 사용하기 위해서 본문인 body 안쪽에 <form> 태그를 사용했습니다. 그리고 인라인 적용 방식으로 id, name, method, action, 그리고 enctype="multipart/form-data" 라는 요소들을 만들어 주었는데, 각각의 설명을 하자면 다음과 같습니다.


● id : 스타일을 지정하기 위해서 만드는 것 (꼭 필요한건 아님)

● name : id와 비슷한 개념인데, 그야말로 이름을 지어주어 관리 함. 왜냐하면 하나의 웹페이지에 최소 2개 이상의 폼이 존재할 수 있기 때문.

● method : 전송 방식을 뜻함. get 방식과 post 방식이 있음. 대부분 post 방식을 사용함.

● action : 서버로 전송하기 위한 요소.

● enctype="multipart/form-data" : 전송되는 데이터 형식. 파일첨부가 있을 시, 무조건 이대로 작성해야 함.


get 방식과 post 방식에 대해서는 서버와 관련이 있으므로 그냥 이 두가지가 있구나 정도만 알고 계시면 좋을 것 같습니다. action 부분도 마찬가지 입니다.


현재 form 요소 안에 p태그로 텍스트를 입력했고, 바로 이어서 input 태그를 사용했습니다. 바로 이 요소가 폼을 만들어주는 요소 입니다. 그리고 input 다음에 오는 type 으로 어떤 폼을 만들지를 결정하게 됩니다. text는 말 그대로 텍스트를 입력하는 폼을 만들어 줍니다. 이렇게 입력해두면 어떤 식으로 웹 상에서 보여지게 되는지 확인해 보겠습니다.




이렇게 출력됩니다.



input type="password" / size / maxlength


이번에는 갑자기 확 많은 것들을 마크업 했습니다. 하나하나 천천히 살펴보시면 type 부분에서 못보던것이 하나 있다는걸 눈치 채셨을 것입니다. 바로 password 입니다. text와의 차이점이라고 한다면, 아마 한번이라도 로그인을 해보셨을테니 금방 이해하실 수 있으실텐데요, 아이디 입력할때는 문자로 정상 출력이 되죠? 하지만 비밀번호 혹은 주민번호 뒷자리의 경우는 ●으로 표시되는것을 확인하실 수 있습니다. 다른 사람이 볼 수도 있으니 문자를 감추는 것입니다. 그럴 경우에 인풋 타입을 password 로 하는 것입니다. 그리고 input 요소 안쪽에 size 라는 태그가 사용되었습니다. 사이즈는 네모 칸의 가로 길이를 정의합니다. 숫자가 올라갈수록 길어지며, 낮을수록 짧아집니다. 그리고 maxlength 에 대해서도 사용되었는데, 이것은 최대 글자수를 의미합니다. 한글은 자음 모음 따로 계산되며, 영어혹은 숫자 기준으로 지정해놓은 수치만큼만 작성할 수 있습니다. 보통 주민번호에 사용되죠. 왜냐하면 주민번호 숫자는 전 국민 모두 정해져 있는 부분이니까요. 다시한번 정리해 보겠습니다.


input="text" → 텍스트를 입력하는 폼 생성

input="password" → 텍스트이긴 하지만 문자열이 동그라미로 표시됨

size="숫자" → 폼 가로 사이즈를 정함

maxlength="숫자" → 폼의 최대 글자수를 제한함 (한글일 때, 자음, 모음 따로 계산)


또한 form 안쪽에 table 요소를 구성할 수 있습니다. 테이블에 대한 방법은 앞시간에 많이 설명해 두었으니 참고하시면 좋을 것 같습니다.




이대로 코딩해서 웹으로 출력해보면 이렇게 구성이 됩니다. 여기서 주민번호 입력 폼을 살펴봅시다. 아시다시피 주민번호 자릿수는 대한민국 주민등록증을 소지하신 모든 국민의 공통 부분입니다. 그러므로 해당 폼에 maxlength 요소를 추가해주면 좋을 것 같고, 주민번호 뒷자리는 비공개 입니다. 그러므로 뒤에 들어갈 폼은 text 타입이 아닌 password 타입으로 해주고 여기에도 maxlength 값을 입력하는게 좋을 것 같습니다.




마크업을 살펴보시면 이렇게 되어 있습니다.




그래서 이렇게 자릿수 제한, 그리고 주민번호 뒤는 비밀번호처럼 나오도록 진행할 수 있습니다.



fieldset / legend


그리고 이러한 폼을 구성할 때에는 fieldset 이라고 하는 태그를 써서 감싸주는게 거의 대부분 입니다. 폼 안의 div 같은 것이라고 생각하면 쉽게 머릿속에 기억할 수 있을 듯 합니다. 또한 fieldset 안쪽에는 바로 legend 라고 하는 요소가 들어오는데, 해당 필드셋에 대한 명칭을 작성하는 공간 입니다.




fieldset 이 빨간색 화살표로 출력된 부분이며, 녹색은 legend 요소 입니다.




이번에는 성별 부분입니다. 사람은 남성 아니면 여성으로 태어납니다. 따라서 폼은 둘 중 하나로 선택되어지게 해야 합니다. 여기에서는 type="radio" 라고 하는 태그가 쓰입니다. 그리고 중요한게 name 부분입니다. 일종의 아이디를 부여하는 기능으로, radio 요소가 두 개가 들어가야 하는 상황이고, 이 두개의 name이 같아야 중복 선택이 되지 않습니다.



type="radio" / type="checkbox"


출력해보면 이런 형태를 띄고 있습니다. 중복 선택이 되지 않게 하기 위해서 name 값을 똑같이 부여해야 한다는 것을 꼭 기억해 주세요.




그리고 여러가지 복수선택에 대한 폼 부분입니다. 여기에서는 type="checkbox" 요소를 사용합니다. 제가 실수한게 있는데 이건 name 값이 다 달라야 합니다. 왜냐하면 각 요소별로 다른 종류의 것이기 때문에 웹상에서 이를 인식하기 위해서 각각 다른 name을 부여해야 합니다. 아까 위에서 말씀드린 성별은 절대 복수가 될 수 없기 때문에 같은 name을 설정한 것입니다.




출력하면 이렇게 나옵니다. 보시는 것 처럼 복수선택이 가능합니다.



textarea / cols / rows


그리고 오픈마켓 상품 페이지의 아래에는 늘 구매후기 폼이 있습니다. 이것은 이렇게 만듭니다. input 요소가 아닌, textarea 를 사용합니다. 안쪽에 사용된 cols 태그는 가로 칸 크기를 뜻 합니다. 그리고 row는 세로 칸 크기를 뜻 합니다. 지난 시간에 배웠던 테이블 요소 중 col, row와 같은 개념이라고 생각하시면 좋을 것 같습니다.




출력하면 이런 모습입니다.



input type="file"


그리고 파일첨부 폼 입니다. input type = "file" 을 사용합니다.




출력해보시면 이런 모습을 하고 있습니다. 근데 이게 브라우저마다 다릅니다. 위의 화면은 크롬에서 보여지는 모습입니다.




이건 익스플로러에서 보여지는 모습입니다. 모습은 달라도 기능은 똑같습니다.



submit / reset / button / image


파일첨부에 몇가지를 더 추가해 보겠습니다. 바로 아래쪽에 전송버튼, 취소버튼, 확인버튼을 볼 수 있습니다. 이 부분은 어떤 요소를 사용할까요? type 부분에서 보통 button 이라고 생각할 수 있지만, 전송버튼과 취소는 다소 특별합니다. 위의 마크업을 살펴보시면 다르다는걸 알 수 있습니다. 이렇게 마크업 하면 어떻게 출력되는지 살펴보겠습니다.




보시는 것 처럼 전송버튼, 취소버튼, 확인버튼이 생성되었습니다. 이 때 value 값은 입력한 그대로 한글로 출력됨을 확인할 수 있습니다. value는 서버로 전송되어지는 데이터의 값으로서 한글로 입력하셔도 무방합니다.


확인 버튼 오른쪽은 이미지가 들어가는 공간입니다. 절대경로로 이미지를 지정하셔도 되며 별도의 이미지파일을 올리시고 경로를 지정하실 수 있습니다. src 다음으로 width / height 태그를 써서 이미지 크기를 원하시는대로 변경하실 수 있으며 수치에는 px을 빼고 숫자만 입력하셔도 상관 없습니다. 끝.




"친절한효자손 취미생활" 을 검색!


이 블로그를 후원해주실 분들을 모집합니다!

이 글을 공유합시다

facebook twitter googleplus kakaostory naver

댓글 작성

TOP