반응형
HTML 5 의 Semantic 관련 태그 공부에 이어서 Form 관련 Tag에 대해 공부하겠습니다.
Form 은 웹페이지에서 아이디 비밀번호를 넣고 버튼을 누르면 로그인이 되는 부분.
그리고 회원가입할 때 이름,주소, 전화번호 뭐 이런거 넣을 때 버튼 누르면 회원가입이 되는 부분.
뭐 이렇게 유저가 데이터를 Type하고 그 데이터를 서버에 보내서 어떤 일을 처리할 수 있도록 하는 부분의 처음에 HTML 웹페이지의 Form에서 이뤄집니다.
일단 이것을 사용하려면 HTML의 <body> </body> 태그 사이에 <form> </form> Tag를 사용해서 구현합니다.
서버로 보내려면 <form > 태그 안에 정보 보낼 목적지가 들어가야 되고 그 목적지에서 PHP나 ASP 같은 Server side script 언어로 서버에 데이터를 보내는 등의 작업이 이뤄져야 하는데요.
이 부분은 여기서 공부하는 HTML5와는 다른 부분이라서 이 글에서는 HTML5 내의 <input> 태그의 종류(Type)에 대해서만 다루겠습니다.
이전 HTML보다 훨씬 진보된 여러 기능이 HTML5에서 지원 됩니다.
우선 아래와 같이 html을 작성 하세요.
<!doctype html>
<html lang="en">
<head>
<title> Dougy's HTML5 Form</title>
<meta charset="utf-8"/>
</head>
<body>
<form>
<fieldset>
<legend> This is the Web Form of HTML5. </legend>
</fieldset>
</form>
</body>
</html>
우선 <form></form>태그로 감싸고 그 사이에 <fieldset>과<legend> 로 내용이 들어갈 테두리와 그 제목을 넣습니다.
이제부터 이 <legend></legend> 밑에 코드들을 넣어 가면서 공부하겠습니다.
우선 아주 기본적인 요소인 <label> 태그와 <input> 태그 중에서 type이 text 인 것 과 email 인 것을 넣어 보겠습니다.
그리고 </fieldset> 바로 위에는 버튼을 넣겠습니다.
<label name="name"> Name</label>
<input name="name" type="text" /> <br/>
<label name="email"> Email </label>
<input name="email" type="email" /> <br/>
<input type="submit" value="Enter" />
이 코드를 넣으면 아래와 같이 됩니다.
위에는 Opera 브라우저에서 본 화면이고 아래는 Chrome 브라우저에서 본 겁니다.
나중에 배울 date와 color type 등은 아직까지 Opera에서만 지원이 되는 것 같더라구요.
그래서 아마 Opera 브라우저 화면으로 테스트를 진행하시면 좋을 겁니다.
여기서 label은 그냥 글자 써 넣을 때 사용하는 것이고 input 태그의 type 이 text 인 것은 user로부터 입력을 받기 위한 것입니다. text type 은 user 가 아무것이나 입력할 수 있도록 허용합니다.
반면에 type 이 email 인 경우에는 email 형식이 아닐 경우 즉 중간에 @이 들어가야 되고 그 이후는 도메인 주소가 되야되고 하는 그런 형식에 위배되면 메세지를 띄웁니다.
예전에는 이런것들을 모두 JavaScript에서 했는데 이제는 그냥 HTML5에서 다 처리해 줍니다.
마찬가지로 blog,숫자,전화번호에 대한 type 들도 따로 있습니다.
<label name="blog"> Blog </label>
<input name="blog" type="url" /> <br/>
<label name="number"> Number </label>
<input type="number" value="1900" min="1900" max = "2200"/><br/>
<label name="phone"> Phone </label>
<input id="phone" type="tel" /><br/>
blog는 인터넷 주소 규칙에 맞게 써야 합니다. 그렇지 않으면 위 화면 같이 메세지가 뜹니다. (http://coronasdk.tistory.com 이렇게 완벽하게 쳐 넣어야 합니다.)
그런데 오페라에서는 앞에 http://가 없으면 자동으로 넣어 주기도 하더라구요.
HTML5가 모든 브라우저에서 동일하게 적용되지 않기 때문에 이런 부분은 주의를 하셔야 합니다.
Mobile에서는 거의 모든 브라우저가 HTML5를 지원하기 때문에 제약이 덜 하겠지만요....
일단 type 이 blog 인 것은 웹 주소 형식을 체크해 주도록 되 있구요.
다음 number와 tel 은 모바일 웹을 개발 할 때 유용할 겁니다.
이곳 input box를 유저가 선택하면 모바일에서는 숫자 입력키보드나 전화번호 입력 키보드가 뜨게 될 테니까요.
number 는minimum 값과 maximum 값을 지정할 수도 있구요. 1단위로 넘어갈지 2단위로 넘어갈지 아니면 10씩 넘어갈지 정하는 step 이라는 인수도 있습니다.
type이 tel 이면 설명 드렸듯이 전화번호를 입력할 거라는 의미인데 모바일 폰에서 유용하게 사용 될 수 있습니다.
오늘은 여기까지 하구요.
다음 시간에는 Opera 브라우저에서 잘 지원되고 있는 date, color type을 비롯해서 range, file 업로드 그리고 datalist 기능 등에 대해 공부 해 보겠습니다.
Form 은 웹페이지에서 아이디 비밀번호를 넣고 버튼을 누르면 로그인이 되는 부분.
그리고 회원가입할 때 이름,주소, 전화번호 뭐 이런거 넣을 때 버튼 누르면 회원가입이 되는 부분.
뭐 이렇게 유저가 데이터를 Type하고 그 데이터를 서버에 보내서 어떤 일을 처리할 수 있도록 하는 부분의 처음에 HTML 웹페이지의 Form에서 이뤄집니다.
일단 이것을 사용하려면 HTML의 <body> </body> 태그 사이에 <form> </form> Tag를 사용해서 구현합니다.
서버로 보내려면 <form > 태그 안에 정보 보낼 목적지가 들어가야 되고 그 목적지에서 PHP나 ASP 같은 Server side script 언어로 서버에 데이터를 보내는 등의 작업이 이뤄져야 하는데요.
이 부분은 여기서 공부하는 HTML5와는 다른 부분이라서 이 글에서는 HTML5 내의 <input> 태그의 종류(Type)에 대해서만 다루겠습니다.
이전 HTML보다 훨씬 진보된 여러 기능이 HTML5에서 지원 됩니다.
우선 아래와 같이 html을 작성 하세요.
<!doctype html>
<html lang="en">
<head>
<title> Dougy's HTML5 Form</title>
<meta charset="utf-8"/>
</head>
<body>
<form>
<fieldset>
<legend> This is the Web Form of HTML5. </legend>
</fieldset>
</form>
</body>
</html>
우선 <form></form>태그로 감싸고 그 사이에 <fieldset>과<legend> 로 내용이 들어갈 테두리와 그 제목을 넣습니다.
이제부터 이 <legend></legend> 밑에 코드들을 넣어 가면서 공부하겠습니다.
우선 아주 기본적인 요소인 <label> 태그와 <input> 태그 중에서 type이 text 인 것 과 email 인 것을 넣어 보겠습니다.
그리고 </fieldset> 바로 위에는 버튼을 넣겠습니다.
<label name="name"> Name</label>
<input name="name" type="text" /> <br/>
<label name="email"> Email </label>
<input name="email" type="email" /> <br/>
<input type="submit" value="Enter" />
이 코드를 넣으면 아래와 같이 됩니다.
위에는 Opera 브라우저에서 본 화면이고 아래는 Chrome 브라우저에서 본 겁니다.
나중에 배울 date와 color type 등은 아직까지 Opera에서만 지원이 되는 것 같더라구요.
그래서 아마 Opera 브라우저 화면으로 테스트를 진행하시면 좋을 겁니다.
여기서 label은 그냥 글자 써 넣을 때 사용하는 것이고 input 태그의 type 이 text 인 것은 user로부터 입력을 받기 위한 것입니다. text type 은 user 가 아무것이나 입력할 수 있도록 허용합니다.
반면에 type 이 email 인 경우에는 email 형식이 아닐 경우 즉 중간에 @이 들어가야 되고 그 이후는 도메인 주소가 되야되고 하는 그런 형식에 위배되면 메세지를 띄웁니다.
예전에는 이런것들을 모두 JavaScript에서 했는데 이제는 그냥 HTML5에서 다 처리해 줍니다.
마찬가지로 blog,숫자,전화번호에 대한 type 들도 따로 있습니다.
<label name="blog"> Blog </label>
<input name="blog" type="url" /> <br/>
<label name="number"> Number </label>
<input type="number" value="1900" min="1900" max = "2200"/><br/>
<label name="phone"> Phone </label>
<input id="phone" type="tel" /><br/>
그런데 오페라에서는 앞에 http://가 없으면 자동으로 넣어 주기도 하더라구요.
HTML5가 모든 브라우저에서 동일하게 적용되지 않기 때문에 이런 부분은 주의를 하셔야 합니다.
Mobile에서는 거의 모든 브라우저가 HTML5를 지원하기 때문에 제약이 덜 하겠지만요....
일단 type 이 blog 인 것은 웹 주소 형식을 체크해 주도록 되 있구요.
다음 number와 tel 은 모바일 웹을 개발 할 때 유용할 겁니다.
이곳 input box를 유저가 선택하면 모바일에서는 숫자 입력키보드나 전화번호 입력 키보드가 뜨게 될 테니까요.
number 는minimum 값과 maximum 값을 지정할 수도 있구요. 1단위로 넘어갈지 2단위로 넘어갈지 아니면 10씩 넘어갈지 정하는 step 이라는 인수도 있습니다.
type이 tel 이면 설명 드렸듯이 전화번호를 입력할 거라는 의미인데 모바일 폰에서 유용하게 사용 될 수 있습니다.
오늘은 여기까지 하구요.
다음 시간에는 Opera 브라우저에서 잘 지원되고 있는 date, color type을 비롯해서 range, file 업로드 그리고 datalist 기능 등에 대해 공부 해 보겠습니다.
반응형
'WEB_APP > HTML5' 카테고리의 다른 글
| HTML5 Storage 3 - IndexedDB - (0) | 2012.01.10 |
|---|---|
| HTML5 Storage 2 - Web SQL DB - (7) | 2012.01.10 |
| HTML5 Storage 1 - Web Storage - (2) | 2012.01.10 |
| HTML5로 게임 만들기 워밍업 (0) | 2012.01.08 |
| HTML5 Form 공부하기 -2- (3) | 2012.01.02 |
| HTML5 기본 Semantic Tag 들 알아보기 -3- (0) | 2012.01.01 |
| HTML5 기본 Semantic Tag 들 알아보기 -2- (0) | 2012.01.01 |
| HTML5 기본 Semantic Tag 들 알아보기 -1- (1) | 2012.01.01 |
| HTML5 Web Storage -01- (2) | 2011.12.27 |
| HTML5 드래그 앤 드롭 하기 Drag and Drop (0) | 2011.12.26 |