[HTML] form(1)

html5 로고

폼 태그

폼(form)은 백엔드, 다른 페이지에 요청을 보내는 특수 기능을 가집니다. 요청을 보낼 때, 폼 내에 있는 데이터들도 함께 전송할 수 있습니다.

폼(form) 태그는 회원가입, 로그인, 회원 정보, 주문 페이지 등 다양한 곳에 활용됩니다. 아래는 로그인 페이지를 만들어 본 것입니다. 폼의 동작 방식을 로그인으로 알아보겠습니다.

• 사용자가 아이디와 비밀번호를 입력합니다.
• 사용자가 로그인 버튼을 클릭합니다.
• 폼에 매핑되어 있는 주소로 아이디와 비밀번호를 가지고 요청을 보냅니다.
• 백엔드 프로그램에서 요청으로 온 아이디와 비밀번호를 가지고 데이터베이스에서 아이디와 비밀번호가 일치하는 검사를 진행합니다.
• 일치하면 로그인되도록 처리 일치하지 않으면 아이디나 비밀번호가 틀렸다고 메시지를 띄워줍니다.

이렇게 폼이 요청을 보낼 때 전송될 데이터들은 모두 form 태그 안의 태그 형태로 (중첩태그) 존재해야됩니다.

 

폼 제작을 위한 기본 form 태그

form 태그가 폼을 만드는 기본 태그입니다. 이 태그 안에서 다양한 폼 관련 태그를 사용하고, 전송될 데이터도 포함할 수 있습니다. 

form 태그에는 method, name, id, action 등의 속성을 가집니다. 그 중에서 method는 전송할 방식을 지정하며, get, pst만 지정할 수 있습니다.

1. get은 url 주소에 사용자가 입력한 정보가 모두 나옵니다. 보안이 취약하겠죠? 그래서 256~4096바이트 내의 정보만 전송할 수 있습니다.
2. post는 url 주소에도 입력한 정보가 노출되지 않습니다. 이 점으로 보안에 유리하므로 중요한 정보를 넘긴다면 대부분 post 방식을 사용합니다.
3. name은 하나의 웹 문서에 여러 form을 사용한다면 헷갈릴 수 있는데, 이를 각각 구분하고자 지정하는 속성으로 name을 사용합니다.
4. id는 한 웹 문서 안에서 여러개의 폼을 사용할 때 각각 구분하고자 지정하는 속성입니다.
5. action은 요청을 보낼 url을 지정하는 속성으로, url 매핑된 소스는 대부분 java의 메소드로 되어있습니다.

이렇게 보면 id와 name이 똑같아 보입니다. 차이가 있다면 id는 유일한 값으로 중복되지 않고, name은 중복을 허용합니다.

 

폼 안의 태그들에 제목을 달아주는 label

레이블(label)은 입력창(input) 옆에 아이디나 비밀번호 같은 텍스트를 붙여주는 태그입니다.

label 태그 사용 방식은 두가지가 있습니다.

1) label 태그가 input 태그를 감싸기

<label>아이디
    <input type="text">
</label>

2) input 태그의 아이디를 label 태그의 for 속성으로 지정

<label for="userId">아이디</label>
<input id="userId" type="text">

input type의 속성으로 라디오 버튼이나 checkbox같은 input을 만들 수 있는데, label이랑 같이 사용했을 때 효용성이 올라갑니다.

label 없이 checkbox나 radio 사용시 진짜 버튼을 클릭해야 동작합니다. label과 함께 사용하면 label에 지정한 텍스트를 클릭해서 동작하는데, label과 함께 사용한다면, label에 지정한 텍스트를 클릭해도 radio나 checkbox가 동작하도록 구성할 수 있습니다.

 

폼 태그들을 그룹으로 묶어주는 fieldset, legend

쇼핑몰 사이트에서 주문서 폼을 사용할 때 사용자 정보와 배송 정보, 주문 정보를 분리해서 표시할 때 주로 사용합니다.

하나의 폼에서 여러 구역을 나눠 표시할 때도 사용하고, fieldset 태그는 특히 폼 안의 여러 태그를 하나의 영역으로 묶어주는 외곽선을 그립니다.

 

예를 들어보겠습니다. 아래는 주문자 정보와 배송지 정보를 fieldset으로 묶고, legend를 주었을 때 나타나는 그림입니다.

주문자 정보만 한번 코드를 살펴보겠습니다.

    <form action="">
        <fieldset>
            <legend>주문자 정보</legend>
            <ul>
                <li>
                    <label for="userName">이름</label>
                    <input type="text" id="userName">
                </li>
                <li>
                    <label for="phoneNum">연락처</label>
                    <input type="text" id="phoneNum">
                </li>
            </ul>
        </fieldset>
	</form>

fieldset 내에 legend에 주문자 정보가 있고, 이 legend가 저 테두리 박스 가운데에 있는 제목이 됩니다. 그 내부에는 ul>li 리스트 태그로 label과 input을 쌍으로 입력했습니다. 이렇게 fieldset이 여러 태그를 감싸서 하나의 그룹을 만드는 점을 알 수 있습니다.

 

이번에는 radio와 checkbox를 사용해보겠습니다. 라디오는 쉽게 말해서 하나만 선택하는 창으로 볼 수 있고, checkbox는 여러 옵션을 입력할 수 있는 버튼입니다.

 

이 두가지 옵션 중 특히 하나만 선택하는 radio는 약간의 주의사항이 있습니다. 기본적으로 두가지 옵션 다 name이라는 것으로 그룹화해서 사용합니다. 만약 이 그룹화 옵션인 name을 라벨마다 다르게 제공하면 어떻게 될까요?

 

 

한번 위의 코드의 name에 들어간 값인 day를 각 input마다 다르게 변경해보겠습니다.

      <fieldset>
            <legend>수강일자</legend>
            <label>
                <input type="radio" name="day1" value="mon">월요일
            </label>
            <label>
                <input type="radio" name="day2" value="tue">화요일
            </label>
            <label>
                <input type="radio" name="day3" value="wedn">수요일
            </label>
        </fieldset>

그러면, 아래와 같이 선택이 여러번 중복되는 radio 화면을 만날 수 있습니다.

여기서 알 수 있는 점은 name이 그룹화의 기준이 되며, name을 다르게 제공하면 서로 다른 그룹으로 인식이 된다는 것입니다. radio 버튼은 그룹 내에서 한 번만 선택이 되어야하는데, 그렇지 않고 모든 그룹이 다 한 번씩 선택하게 됩니다. 따라서, 특히 radio 버튼을 구현할 때는 이 name 값을 같은 그룹이면 동일하게 주어야 원하는 결과가 나타남을 알 수 있습니다.

 

사용자 입력을 위한 input

웹에서 사용하는 폼(form)은 사용자가 입력하는 부분과 요청을 보내는 버튼 부분으로 나눌 수 있습니다. input 태그로 입력 가능한 항목은 텍스트, 비밀번호, 이메일주소, 전화번호, 날짜, 시간, 이미지, 버튼 등 다양하고, 이 모든 속성은 type으로 지정할 수 있습니다.

id, name 속성은 태그를 구분하고자 사용하는 속성인데, 그 차이점을 다시 정리해보겠습니다.

id	name
한 웹문서에서 유일해야 하며, 그렇지 않더라도 에러는 발생하지 않으나 웹 접근성 검사를 하면 에러를 반환합니다.	한 웹 문서에서 중복해서 사용가능하고 checkbox 같이 중복선택이 가능한 태그들에서 그룹을 묶는 역할도 합니다.
Javascript나 css에서 선택자로 활용이 많이 된다. 웹 문서에서만 사용합니다.	속성은 요청을 보낼 때 input의 데이터만 전달하지 않고 key와 value로 매핑되어 넘어가는데 여기서 key역할을 합니다.

예를 들어, 아래처럼 기본 type 속성은 text 타입이며, 아이디를 입력할 수 있습니다. 이 input에 사용자가 입력한 값과 함께 요청을 보낼 때 백엔드 단에서 사용자가 입력한 값을 키인 userId로 꺼내서 사용할 수 있습니다. 즉, name이 하나의 키 값으로 활용해서 접근할 수 있는 것입니다.

<input type="text" name="userId">

 

input 태그의 type 속성

살펴보니 생각보다 많은 유형이 있음을 알 수 있습니다. 간단하게 살펴보면 다음과 같습니다.

 

type	설명
hidden	화면에서 보이진 않지만 요청을 보낼 때 데이터 전송은 됩니다.
text	한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자를 생성합니다.
tel	전화번호 입력 필드 생성합니다. 여기에 pattern을 넣으면 완벽하죠.
url	url 주소 입력 가능한 필드 생성합니다.
email	메일주소 입력 가능한 필드 생성합니다.
password	비밀번호를 입력할 수 있는 필드 생성. 입력한 텍스트가 *로 표출합니다.
date, month, week	date는 사용자 지역 기준 년, 월, 일을, month는 년, 월을, 마지막으로 week는 년, 주를 지정할 수 있습니다.
number	숫자를 조절할 수 있는 화살표 생성합니다.
range	숫자를 조절할 수 있는 슬라이드를 생성합니다.
color	색상을 선택할 수 있는 색상표를 생성합니다.
checkbox, radio	중복선택 가능한 checkbox를 생성하거나 단일 선택만 가능한 radio 버튼을 생성합니다.
file	파일을 선택할 수 있는 팝업창을 띄워주는 버튼을 생성합니다.
submit, reset	submit은 form의 action 속성값으로 지정되어 있는 url로 요청을 보내는 버튼을 생성합니다. (요청보낼 때 입력된 데이터들도 함께 전송). reset은 폼에 입력되어 있는 내용을 초기화하는 버튼을 만듭니다.
image	submit 버튼 대신 사용할 이미지를 삽입합니다.
button	기능 없는 버튼을 하나 만듭니다. (button 태그와 동일하되, button 태그는 type의 기본값이 submit). javascript 메소드를 매핑하여 동작이 일어날 수 있도록 직접 동작을 생성할 수 있습니다.

 

input 태그의 다른 속성

input 태그에는 type 말고도 다른 속성들이 있습니다.

속성	설명
autofocus	페이지가 로딩될 때 원하는 input태그에 커서를 표시합니다.
	HTML5부터 제공하는 기능으로, 간단하게 속성만 사용하면 원하는 태그에 커서를 가져다 놓을 수 있습니다.
placeholder	해당 input의 입력할 내용에 대한 힌트를 제공할 수 있습니다.
readonly	읽기 전용 태그로 변경해서, 사용자 입력을 막을 수 있습니다.
	readonly, readonly="true", readonly="readonly" 로 설정할 수 있습니다. 기본값은 false로 입력을 막지 않는 상태입니다.
	읽기 전용 속성을 해제할 때는 readonly 설정을 삭제합니다.
required	필수적으로 입력돼야 하는 태그에 지정합니다.
	required로 설정된 태그에 입력 값 없이 submit을 하게될 경우 경고창이 뜨면서 submit 이 안 됩니다.

각각에 대해 회원가입 화면을 통해 살펴보겠습니다.

위 화면에서 자세히 보면 아이디 창이 활성화되어 있고 커서가 깜박입니다. 아무런 동작없이 아이디 칸을 활성화시키고 커서를 입력하게 하는 것이 바로 autofocus 기능입니다.

<label>아이디
    <input type="text" autofocus required placeholder="20자 이내로 입력하세요.">
</label>

그리고 입력 전에 회색 글자로 20자 이내로.. 혹은 특수문자.. 이렇게 입력되어 있는것이 placeholder 속성입니다.

<label>비밀번호
    <input type="password" required placeholder="특수문자, 숫자, 영문자 조합으로 9자리 이상 입력하세요.">
</label>

마지막으로 이름란에 홍길동으로 입력(required value)되어 있고, 추가적인 입력은 안됩니다. required라는 옵션이 있어서 입력이 안될 수는 없고, 편집이 안되는 것은 readonly 속성 때문입니다.

<label>이름
    <input type="text" required value="홍길동" readonly>
</label>

 

다음 글에도 이어서 input과 폼 태그에 관해 정리해보겠습니다.