HTML 기본 폼 요소 태그들 사용 방법 (input type 에 따른 변화)
오늘은 홈페이지를 만들 때, 가장 기본이 되는 여러가지 폼에 대해서 배웠습니다. 어떤 종류의 폼이 있는지 알아보고, 어떻게 태그를 사용하는지, 어떻게 적용시키는지에 대해서 간단히 알아볼 것입니다.
먼저 아이디를 입력해야 한다면, 빈 칸을 구성하는 네모 상자가 필요하겠습니다. 그리고 비밀번호 입력 항목도 있어야 합니다. 성별을 선택하는 메뉴도 필요할 것 같고, 주민번호를 요구하기도 하겠죠? 그리고 비밀번호 분실 시 질문을 선택하는 항목도 있는 경우를 종종 경험해보셨을 겁니다. 그리고 오픈마켓에서 흔하게 볼 수 있는 제품 구매 후기 칸도 한번 구성해 보도록 하겠습니다.
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을 빼고 숫자만 입력하셔도 상관 없습니다. 끝.
"친절한효자손 취미생활" 을 검색!
