9.4 input 요소
input 요소는 일반적으로 사용자로부터 간단한 텍스트 문자부터 특정 데이터 형식을 취하는 전화번호, 이메일 등과 같이 비교적 간단한 데이터를 사용자로부터 입력받아야 할 경우 사용할 수 있는 요소로 많은 속성들이 있지만 그 중 몇 가지 속성들을 이용하여 일반적인 사용 형식을 나타내면 다음과 같습니다.
< input type=”속성값” name=”input 요소이름” maxlength=”최대길이”
value=”input요소값” pattern=”정규표현식”
required=”” placeholder=”힌트”>
</input>
위에서 pattern 속성은 정규표현식(Regular Expression)을 이용하여 사용자가 입력하는 데이터에 대해서 일정한 규칙을 따르도록 처리할 때 사용하는 속성으로 가장 간단한 주민번호에 대한 정규 표현식을 예로 들면 다음과 같이 나타낼 수 있습니다.
<input
type=”text” pattern=”d{6}-d{7}” />
다음으로 required 속성은 해당 폼(form)이 웹서버로 전송(submit)되기에 앞서 input 요소에 의해서 입력되어저야 함을 명시할 때 사용하는 속성으로 다음과 같이 3 가지 형태로 명시할 수 있으며 일부 브라우저에서는 지원이 되지 않는 속성입니다.
<input
type=”text” required/>
<input type=”text” required=”required”/>
<input type=”text” required=””/>
마지막으로 placeholder 속성은 input 요소에 입력되어야 할 데이터에
대한 힌트(hint) 역할을 하는 문자열을 명시할 때 사용하는 속성입니다.
required, placeholder, pattern 속성을 어떻게 사용할 수 있는지 알아보기 위해서 메모장을 열어서 HTML5 문서의 기본적인 코드를 작성하고 <body> …
</body>블록을 다음과 같이 작성합니다.
<body>
<form>
<label for="jumin_number">주민번호</label>
<input
name="jumin_number" type="text" placeholder="6자리-7자리 형태로 입력"/>
<input
type="submit"/>
</form>
</body>
위에서 placeholder 속성을 이용하여 input 요소에 입력될 텍스트의
내용을 “6자리-7자리 형태로 입력”과 같이 힌트(hint)를 나타내도록 합니다. “inputwithtextandplaceholder.html”로 저장한 후
Firefox를 이용하여 열어보면 다음과 같이 Input 요소 안에 placeholder 속성값으로 설정한 문자열이 나타나게 됩니다.
위에서 질의 보내기 버튼을 클릭해봅니다. 그러면 여러분이 주민번호를 입력하지 않았는데도 후속 처리가 진행되어 다음과 같이 주민번호에 대한 데이터 없이 전송이 되게 됩니다.
위와 같은 예상치 않은 상황을 방지하기 위해서 “inputwithtextandplaceholder.html”의 input 요소를 다음과 같이 required 속성을 이용하여 변경합니다.
<input
name="jumin_number" type="text" placeholder="6자리-7자리 형태로 입력"
required="required"/>
저장하고 Firefox로 다시 연 후 질의 버내기 버튼을 클릭하면 조금 전과는 달리 다음과
같이 주민번호를 입력하라는 메시지가 나타나게 됩니다.
다음으로 위에
“3333-2222”와 같은 값을 입력하고 질의 보내기 버튼을 클릭합니다.
그러면 위와
같이 정상적으로 처리가 됩니다만 우리가 원하는 데이터인 힌트로 명시한 주민 번호의 형식과는 다릅니다. 이와
같은 동일한 처리를 해주기 위해서 이제 pattern 속성을 이용하여 다음과 같이 코드를 수정합니다.
<input
name="jumin_number" type="text" placeholder="6자리-7자리 형태로 입력"
required="required" pattern="d{6}-d{7}"/>
위와 같이 input 요소에 입력되는 데이터에 대해서 “정수형 6자리-정수형 7자리” 형태로 입력되도록 pattern 속성을 설정하고 저장한 후 Firefox를 이용하여 열고 “3333-2222”와 같은 값을 입력하고
질의 버내기 버튼을 클릭합니다.
위와 같이 pattern 속성값으로 설정한 정규 표현식대로 데이터를 입력하라는 메시지가 나타나게 됩니다. 이와 같이 pattern, required 속성을 이용하면 웹서버로
사용자가 입력한 정보를 전송하기 에 앞서 사전에 입력 데이터에 대한 유효성 검사(Validation Check)를
수행할 수 있음을 알 수 있습니다.
이제 input 요소의 속성 중 가장 중요한 속성 중에 하나인 type 속성값으로 올 수 있는 값들을 정리하면 다음과 같습니다.
|
속성값 |
기능 |
|
text |
한 라인의 일반적인 문자 혹은 문자열 같은 텍스트를 입력받을 때 |
|
password |
사용자가 입력하는 텍스트를 별표(asterisk) 형태로 나타내고자 할 때 |
|
submit |
사용자가 입력해야 할 정보를 모두 작성했다는 것을 알리는 기능을 하는 역할하며 버튼(button) 형태로 나타냄 |
|
reset |
폼(form)을 초기화하는데 사용하며 버튼 형태로 나타냄 |
|
hidden |
사용자에게 보여지거나 수정되지 않아야 할 데이터를 다루어야 할 경우 사용. |
|
button |
버튼(button) 형태로 input 요소를 나타냄 |
|
radio |
일종의 radio button 형태로 input 요소를 나타내고 사용자가 선택(on), 비선택(off) 형태로 처리할 때 사용 |
|
checkbox |
체크 박스 형태로 input 요소를 나타내고 사용자가 선택(on), 비선택(off) 형태하도록 처리할 때 사용 |
|
file |
파일을 업로드할 때 사용 |
|
image |
전송(submit) 버튼을 image 형태로 만들 때 사용 |
메모장으로 HTML5 문서의 기본적인 코드를 작성한 후 <body>…</body>
블록을 다음과 같이 작성합니다.
<body>
<form>
<fieldset>
<legend><b>학생 정보 입력</b></legend>
이름
<input type="text" name="student_name"
size="15"/><br /><br />
학번
<input type="text" name="student_number"
size="12"/><br /><br />
비밀번호
<input type="password" name="student_passwd"
min="7" max="20"
size="25"/><br/><br/>
전화번호
<input type="text" name="tel"/
size="13"><br/><br/>
주소
<input type="text" name="address" size="50"
/><br /><br />
<input
type="hidden" name="id" value="007bbang" />
<input type="submit"
value="질의 보내기"/>
<input type="reset"
value="초기화"/>
</fieldset>
</form>
</body>
그리고 “inputwithresetandhidden.html”로 저장하고 이를 아파치 웹서버의 htdocs 디렉토리에 복사한 후 IE9를 열고 URL 창에 “http://localhost/inputwithresetandhidden.html”을
입력합니다. 그러면 학생 정보 입력 화면이 나타나는데 위 코드에서 작성한 input 요소의 type 속성값이
hidden 부분은 나타나지 않습니다. 여기에 필요한 정보를 다음과 같이 입력하고 input 요소의 type 속성값이
submit으로 설정된 질의 보내기 버튼을 클릭합니다.
그러면 해당
페이지의 모든 내용은 초기화되고 URL 문자열에 다음과 같이 나타납니다.
http://localhost/inputwithresetandhidden.html?student_name=%B1%E8%C3%A2%BC%F6&student_number=919021&student_passwd=123123&tel=031-888-9999&address=%B0%E6%B1%E2%B5%B5+%BF%EB%C0%CE%BD%C3+%B1%E2%C8%EF%B1%B8+%C7%E0%BA%B9APT+101%B5%BF+302%C8%A3&id=007bbang
위에서 보는
것처럼 가장 뒷 부분에 보면 hidden 속성값으로 설정한 input
요소에 대한 값(value)이 노출되어 나타나는 것을 알 수 있습니다. 즉 form 전송을 하면
hidden으로 설정된 부분도 같이 전송되는 것을 알려줌과 함께 이렇게 전송 문자열에 노출되는 것도 알 수 있습니다.
그러므로 hidden 속성값에 여러분의 패스워드나 주민등록번호 같은 중요한 정보를 저장, 사용하지 말기 바랍니다. 왜냐하면 다양한 방법으로 hidden 속성값에 설정된 값을 읽을 수 있기 때문입니다.
다음으로 file, image 속성값으로 설정하는 예를 보기로 할까요? 메모장으로 HTML5 문서의 기본적인 코드를 작성한 후 <body>…</body>
블록을 다음과 같이 작성합니다.
<body>
<form>
<fieldset>
<legend><b>파일 업로드하기</b></legend>
업로드할 파일을 선택
<input type="file" name="file_upload"/><br />
<input type="image"
src="upload_server.png" onsubmit="submit_form();"/>
</fieldset>
</form>
</body>
위에서 input 요소의 type 속성값에
image를 설정하고 해당 버튼을 클릭하면 폼(form)이 전송될 때 발생하는 submit 이벤트 발생시 처리해 줄 함수를 위와 같이 input 요소의 onsubmit 이벤트 속성에 바인딩해주면 submit 이벤트가 발생하면
위에서 바인딩된 submit_form() 함수를 실행하게 됩니다. 작성을
완료한 후 “inputwithfileandimage.html”로 저장하고 이를 아파치 웹서버의 htdocs 디렉토리에 복사한 후 IE9를 열고 URL 창에 “http://localhost/inputwithfileandimage.html”을
입력합니다. 그러면 다음과 같이 나타납니다.
위에서 찾아보기… 버튼을 클릭하면 업로드할 파일을 선택할 수 있는 OpenFileDialog 화면이
나타나며 여기서 원하는 파일을 선택해주면 됩니다. 그리고 밑에 이미지는 input 요소의 type 속성값에
image를 설정한 것입니다. 이제 다음과 같이 찾아보기를 클릭하여 원하는 파일을 선택하고
이미지를 클릭합니다.
그러면 다음과
같이 전송 문자열에 업로드되는 파일 이름(books.xml)이 포함되어 전송됩니다.
http://localhost/inputwithfileandimage.html?file_upload=books.xml&x=18&y=12
실제로 이에 대한 전체적인 구현은 상당히 복잡한 부분이 존재하므로 여기서는 실제 전체적인 구현 부분은 생략하며 여기서는 input 요소의 type 속성값으로 file, image를 어떻게 사용할 수 있는지에 대하여만 설명하였습니다.
끝으로 여기서
사용된 “upload_server.png” 이미지는 “http://www.fasticon.com”
사이트의 “Dirceu Veiga”님이 디자인한 것으로 “Dirceu
Veiga”님께 심심한 감사를 전합니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 HTML5 요소(Element)에 대한 부분을 그대로를 공개하는 것으로
본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
끝으로 책 한권 분량에 대한 목차(링크 포함)은 "http://fromyou.tistory.com/581"에서 다운로드 받아서 필요하신 학습을 하실 수 있으며 조금이나마 도움이 되셨으면 합니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 9.5 button 요소 (0) | 2013.07.31 |
|---|---|
| HTML5에 새롭게 추가된 input 요소의 type 속성값들 (1) | 2013.07.31 |
| 9.3 lable 요소 (0) | 2013.07.31 |
| 9.2 fieldset, legend 요소 (0) | 2013.07.31 |
| 9. Form-related Elements (0) | 2013.07.31 |