9. Form-related Elements
여러분이 웹사이트를 만들 경우 바라보는 관점에서
따라서 중요한 것들이 차이가 있을 수 있겠지만 웹사이트를 방문하는 사용자와의 상호작용 관련 부분은 공통적으로 중요하다고 생각할 것입니다..
HTML5에는 사용자로부터 문자, 숫자, 문자열
등과 같은 입력값들을 입력받을 수 있는 inputBox, 버튼(button),
체크박스(checkbox) 같은 컨트롤들을 자식 요소들로 가질 수 있는 컨테이너 역할을
하는 form이라는 웹 페이지의 요소를 이용합니다.
사용자들을 폼(Form)을 통해서 자신이 방문하는 웹사이트과 통신을 할 수 있습니다. 예를 들면 온라인 쇼핑, 선호도 조사 같은 온라인 조사에 참여 등과
같은 양방향 통신이 가능하도록 하는 것이 폼(Form)이라고 할 수 있습니다.
이러한 폼(Form)과 함께 사용되어 사용자로부터 입력 데이터를 받아들일 수 있도록 하는데
사용되는 HTML5 요소들을 폼 관련 요소들이라고도 하고 폼 컨트롤(Form
Controls)라고도 하는데 W3C의 현재(2012년 7월 25일) 문서를 참고하여
표로 나타내면 다음과 같으며 form 요소부터 차례대로 알아보도록 하겠습니다.
|
요소 |
기능 |
|
form |
label, input, button 등과 같은 요소들을
포함하여 사용자로부터 입력 데이터를 |
|
fieldset |
폼(form) 안에서 관련된 요소들을 그룹화하는데 사용 |
|
legend |
fieldset 요소에 대한 제목(title)이나 캡션으로 사용 |
|
label |
input 요소와 같은 입력 요소의 라벨을 정의하는데 사용 |
|
input |
사용자로부터 텍스트나 전화번호, 이메일 등과 같은 간단한 데이터을 입력받을 때사용하거나 체크박스나 라디오 버튼 형태로 나타내어 사용자로부터 주어진 항목을 선택/취소할 수 있도록 하는데 사용하며 전송(submit)이나 숨김(hidden) 정보를 저장할 때 사용 |
|
button |
하나의 버튼을 나타냄 |
|
select |
선택 가능한 리스트를 드롭다운 리스트(drop-down list) 형태로 나타내는데 사용 |
|
datalist |
다른 요소를 위해 사전에 정의된 항목을 option 요소를 이용하여 설정 |
|
optgroup |
드롭 다운 리스트에서 관련된 항목들을 그룹화하여 나타냄 |
|
option |
select, datalist, optgroup 요소의 자식 요소로 사용되어 해당 요소들의 항목을 구성 |
|
textarea |
사용자로부터 여러 라인으로 구성된 긴 텍스트 문장을 입력 받아야 할 때 사용 |
|
keygen |
키(key) 한 쌍을 생성하는데 이용 |
|
output |
계산 결과를 나타내는데 이용하는 요소로 일반적으로 javaScript 같은 스크립트를 통한 계산 결과를 나타냄 |
|
progress |
작업의 진행과정을 나타내기 위해 사용 |
|
meter |
범위를 알고 있거나 아주 적은 값의 범위 내에서 수치 측량에 사용 |
9.1 form 요소(Element)
기본적인 form 요소의 형식은 다음과 같이 form 요소의 시작 태그 내에 name, method 등과 같은 속성들을 정의하여 사용하는 형태입니다.
<form name=”폼(form)이름” method=”post”>
input, legend, button, …
</form>
폼(form)과 관련한 주요 속성(Attribute)들을 보면 다음과
같습니다.
|
속성 |
기능 |
|
method |
폼(form) 데이터를 전송(submit)될 때 이용할 HTTP 프로토콜의 get, post 메서드를 명시. method 속성값이 명시되지 않으면 기본적으로 get 을 사용 |
|
action |
폼(form) 데이터가 전송(submit)될 때 폼(form) 데이터를 어디로 보내야 하는지를 명시 |
|
enctype |
method 속성값이 “post”일 경우에 해당하는 속성으로 폼(form) 데이터가 전송(submit)될 때 어떻게 인코딩되어야 하는지 명시 |
|
target |
폼(form) 데이터가 전송(submit)한 후 받게 되는 결과를 어떻게 나타낼 지를 명시하는 속성으로 _blank, _self, _parent, _top 속성값이 가능 |
9.1.1 method 속성 알아보기
이제 폼(form)의 주요 속성에 대한 예제를 하나씩 알아볼까요? 먼저 method에 대하여 알아봅니다. 메모장을 열어서 <html>로 시작하는 기본적인 코드를 작성한 후 다음과 같이
<body> 시작태그와 마침 태그 안에 코드를 작성합니다.
<body>
<form>
이름 : <input type="text" name="s_name"
size="20" /><br /><br />
학번 :
<input type="text" name="s_number" size="12"
/><br /><br />
<button
type="submit">전송(submit) 버튼</button>
<button type="reset">초기화(reset) 버튼</button>
</form>
</body>
위와 같이 form 요소를 이용하여 현재 method 속성값을 설정하지 않은
상태로 이름, 학번 데이터를 input 요소를 이용하여 사용자로부터
입력받아 서버로 전송하는 코드를 작성합니다.
그리고 “form_method.html”로 저장한 후 아파치 웹서버의 htdocs 디렉토리에 복사한 후 IE9를 열고 URL 창에 “http://localhost/ form_method.html”을
입력합니다. 그러면 다음과 같이 로컬 호스트에 동작 중인 아파치 웹서버에 접속하여 웹서버에 존재하는 form_method.html 파일을 열어서 나타냅니다.
이제 이름, 학번 옆에 input 요소 입력 부분에 데이터들을 입력하는데 여기서는
각각 “John”, “9801”으로 입력합니다. 그리고 전송(submit) 버튼을 클릭하면 URL창에 다음과 같이 여러분이 입력한
데이터들이 모두 URL 문자열에 노출되어 나타나게 됩니다.
http://localhost/form_method.html?s_name=John&s_number=9801
이와 같이 여러분이 입력한 데이터들에 대하여 URL 문자열에 노출되는 형태가 바로 HTTP 프로토콜의 GET 메서드를 이용한 방법으로 위에서 form 요소 사용시 method 속성값을 method=”get”으로 입력하지 않았지만 명시하지 않을 경우 기본적으로
get을 처리되는 것을 알 수 있습니다.
다음으로 method 속성값이 post에 대해서 볼까요? 메모장으로 여러분의 하드 드라이브에 저장되어 있는 “form_method.html”
파일을 메모장을 열고 다음과 같이 form 요소의 시작 태그 안에 method 속성값을 설정합니다.
<form method="post">
이름 : <input
type="text" name="s_name" size="20" /><br
/><br />
저장한 후 “form_method.html” 파일을 아파치 웹서버의 htdocs 디렉토리에 복사한 후 IE9를 열고 URL 창에 “http://localhost/form_method.html”을
입력하면 조금 전 실행화면과 동일하게 나타납니다. 이제 동일한 데이터들을 입력하고 전송(submit) 버튼을 클릭하면 URL창에는 get일 때와는 달리 “http://localhost/
form_method.html” 상태로 있습니다.
정리하면 form 요소의 method 속성값으로 사용되는 HTTP 프로토콜의 GET(get) 메서드는 여러분들이 입력하는 폼
데이터가 모두 URL 문자열에 노출되는 형태이고 HTTP 프로토콜의
POST(post) 메서드는 폼 데이터가 URL 문자열 노출되지
않고 HTTP Body에 포함되어 전송되게 되는 차이점이 존재합니다.
9.1.2 action 속성 알아보기
form요소의 action 속성은 앞서 표에서 언급한 것처럼
폼(form) 데이터가 전송(submit)될 때 폼(form) 데이터를 어디로 보내야 하는지를 명시하는 것으로 폼 데이터들을 웹 서버에 존재하는 “student_login.aspx”나 “student_login.jsp” 페이지로
전달하고자 할 경우 다음과 같이 사용할 수 있습니다.
<form action=”student_login.aspx “>
이름 : <input type="text" name="s_name"
size="20" /><br /><br />
학번 :
<input type="text" name="s_number" size="12"
/><br /><br />
…
<button
type="submit">전송(submit) 버튼</button>
</form>
<form action=”student_login.jsp“>
이름 :
<input type="text" name="s_name" size="20"
/><br /><br />
학번 :
<input type="text" name="s_number" size="12"
/><br /><br />
…
<button
type="submit">전송(submit) 버튼</button>
</form>
9.1.3 enctype 속성 알아보기
form요소의 enctype 속성은 method 속성값이 post로 설정되었다는 전제하에서 사용되는 속성으로
폼(form) 데이터가 전송(submit)될 때 어떻게 인코딩(부호화)되어야 하는지 명시하는 속성입니다. 그래서 enctype 속성값으로는 “application/x-www-form-urlencoded”, “multipart/form-data”,
“text/plain” 3 가지 값 중 하나로 설정할 수 있습니다.
먼저 "application/x-www-from-urlencoded“는 form요소의 enctype 속성이 설정되지 않으면 기본적으로 사용되는 값으로 모든 문자들(공백
문자, 알파벳 문자, 숫자 등)이 폼(form) 데이터가 전송(submit)될
때 인코딩(부호화)되는 형태로 공백문자들은 “+”로, 숫자들은 “%HH”와
같은 %+ASCII 헥사코드 값의 형태로 인코딩됩니다.
다음으로 “multipart/form-data”는 기본값인"application/x-www-from-urlencoded“는 용량이 큰 사진, 동영상 같은 이진 데이터를 전송하기에는 적합하지 않기 때문에 이에 대한 대안으로 사용되는 속성값으로 주로 폼(form)에서 file upload 기능을 구현할 때 사용합니다.
마지막으로 “text/plain”은 스페이스(space)를 “+”로 변환만 이루어지는 형태로 이메일(email) 관련된 폼(form) 데이터를 처리할 때 유용하게 사용할
수 있는 속성값으로 다음과 같은 형태로 사용하게 됩니다.
<form action="mailto:yourname@you.com" method="get" enctype="text/plain">
…
</form>
정리하면 폼(form)에서 파일 업로드(file upload) 기능이 포함되는
형태가 아니라면 폼(form)에서 enctype 속성값을
설정하지 않고 사용하면 됩니다. 즉 디폴트값을 적용하여 사용하면 된다는 것입니다.
9.1.4 target 속성 알아보기
form 요소의 target 속성은 폼(form)을 전송(submit) 한 후 웹 서버로부터 받게 되는 응답을 어디에 나타낼 지를 설정하는 속성으로 a 요소에서 마찬가지로 “_blank”, “_self”, “_parent”, “_top”, “framename” 속성값을 가질 수 있으며 다음과 같이 target 속성값으로 4 가지 속성값 중 하나를 설정하여 사용하거나 설정하지 않으면 내부적으로 target 속성값은 “_self”로 설정됩니다.
<form action=”” target="_blank | _self | _top | framename”> … </form>
이에 대한 실제 예제는 웹 서버 단의 추가적인 프로그래밍이 필요하므로 이에 대한 예제는 생략합니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 HTML5 요소(Element)에 대한 부분을 그대로를 공개하는 것으로
본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
끝으로 책 한권 분량에 대한 목차(링크 포함)은 "http://fromyou.tistory.com/581"에서 다운로드 받아서 필요하신 학습을 하실 수 있으며 조금이나마 도움이 되셨으면 합니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 9.3 lable 요소 (0) | 2013.07.31 |
|---|---|
| 9.2 fieldset, legend 요소 (0) | 2013.07.31 |
| 8.5 셀 내부 정렬하기 (0) | 2013.07.31 |
| 8.5 여백 주기 (2) | 2013.07.31 |
| 8.4 셀 합치기 (0) | 2013.07.31 |