메뉴 건너뛰기

2014.09.04 19:02

HTML5 Form 공부하기 -1-

조회 수 5839 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
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 이면 설명 드렸듯이 전화번호를 입력할 거라는 의미인데 모바일 폰에서 유용하게 사용 될 수 있습니다.

List of Articles
번호 제목 날짜 조회 수
117 안드로이드 종료 취소 다이얼로그 코드 2015.07.26 6389
116 폰갭 비콘 디텍팅 안될 때 (기본적인건 다 되있어야됨) 2015.07.26 6528
115 안드로이트 비콘 스캐닝시 고려 사항 2015.07.26 6658
114 블루투스 및 비콘 관련 정리 2015.07.26 10828
113 블루투스(Bluetooth) 통신에 대해 알아보자 file 2015.07.26 14046
112 안드로이드 팝업창 만들기(xml 내용 집어넣기) file 2015.07.23 9285
111 안드로이드 스튜디오 gradle error 해결 2015.07.23 6683
110 [안드로이드] 화면추가 버튼 리스너 file 2015.07.22 7681
109 [안드로이드] 페이스북 같은 슬라이드 메뉴 만들기 file 2015.07.21 8182
108 안드로이드 ( Android ) APK 파일 생성하기 file 2015.07.17 7305
107 안드로이드 webview (웹뷰) 개발 #4 - 멀티터치 ( 확대 / 축소 ) 적용 file 2015.07.17 7552
106 안드로이드 webview (웹뷰) 개발 #3 - 초기 로딩화면 (splash) 띄우기 + 아이콘 적용하기 file 2015.07.17 8697
105 안드로이드 webview (웹뷰) 개발 #2 - 파일 첨부 및 플러그인 적용하기 file 2015.07.17 8282
104 안드로이드 webview (웹뷰) 개발 #1 - 웹사이트를 어플로 만들어 보자! file 2015.07.17 8903
103 [안드로이드] 버튼 이벤트 처리하기 file 2015.07.17 7029
102 [안드로이드] 뷰(View)에 여백넣기 file 2015.07.17 7225
101 [안드로이드] 뷰(View)의 너비와 높이 지정하기 file 2015.07.17 7140
100 [안드로이드] 레이아웃의 기본2 file 2015.07.16 7071
99 [안드로이드] 레이아웃의 기본1 file 2015.07.16 6962
98 [안드로이드] Activity에 대해서 file 2015.07.16 6767
Board Pagination Prev 1 ... 3 4 5 6 7 8 9 10 11 12 13 Next
/ 13

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved