sitelink1 http://kiara77.tistory.com/213 
sitelink2  
sitelink3  
sitelink4  
extra_vars5  
extra_vars6  

HTML5 강좌 19강 - HTML5 태그 - 입력양식 form 사용 예제

 

이번엔 지난 강좌에서 테스트 했던 form 입력양식을 이용하여

회원가입 페이지를 하나 만들어 보겠습니다.

 

예제는 학교에서 동아리에 가입을 신청하는 신청서로 만들어보겠습니다.

가입 신청서에 들어가는 일반적인 항목들을 넣어볼까요~

 

(1)이름

(2)학부/학과

(3)학년

(4)학번

(5)대학 입학 년도

(6)이메일

(7)주소

(8)연락처

(9)취미

(10)SNS 주소

(11)가입 동기

(2)자기 소개


이정도 항목을 넣어보겠습니다.

 

 

01.jpg

 

 

 

테이블 태그와 입력양식 이용하여 form을 만들었습니다.

지난 강좌들에서 배웠던 입력양식 타입들을 이용했죠.

붉은색 * 표시는 required 타입의 항목들 입니다.

그리고 이메일이나 전화번호 같은 항목은 양식을 정해주었습니다.

 

 

02.jpg

 

 

 

required 타입의 필수항목만 입력해도 전송을 할 수 있습니다.

폼을 전송할 페이지도 하나 만들어 보겠습니다.

단지 형식적인 페이지이지 실제로 내용을 받진 못합니다.

이전 강좌들에서 종종 언급한바 php나 jsp 같은 프로그래밍 작업이 필요합니다.

 

 

03.jpg

 

 

 

필수항목을 입력하고 가입하기 버튼을 누르면

임의로 생성한 ok.html 페이지로 이동합니다.

 

 

04.jpg

 

 

 

form 입력양식은 회원가입 외에 다양한 분야에서 사용합니다.

그러니 많이 익숙해질 필요가 있습니다.

 

(예제는 첨부파일에서 받을 수 있습니다.)

 

19.zip

번호 제목 글쓴이 날짜 조회 수
54 HTML FRAMESET 태그 예제 황제낙엽 2020.11.06 13
53 네이버의 무료 나눔 글꼴 황제낙엽 2020.05.06 1110
52 HTTP/2 소개 황제낙엽 2018.10.12 59
51 Pragma와 Cache-Control 황제낙엽 2018.03.28 61
50 로드밸런싱(L4)+아파치를 운영시 etag제거로 캐시 성능 최적화 file 황제낙엽 2018.03.28 226
49 재미난 로그인 페이지 만들기 file 황제낙엽 2018.03.26 202
48 내 웹사이트의 속도를 빠르게! file 황제낙엽 2018.03.07 184
47 성능을 위한 초간단 HTTP 304 Not Modified 구현 방법 file 황제낙엽 2018.03.07 97
46 [MIME type/content type/media type] text/javascript와 application/javascript의 차이점 황제낙엽 2017.11.23 166
45 User Agent 에 관련된 링크 황제낙엽 2017.11.20 595
44 [보안] 혼합 콘텐츠(Mixed Content) 방지 황제낙엽 2017.04.13 112
43 <img> image 엘리먼트에서 이미지를 base64로 인코딩해서 사용하기 file 황제낙엽 2017.04.01 977
42 [ActiveX] CAB파일 수동 설치(레지스트리 등록) 방법 황제낙엽 2017.03.16 3162
41 ActiveX 에서 CLASSID 가 맞지 않을때의 현상 황제낙엽 2017.02.17 187
40 HTML5 강좌 23강 - 위치 정보(Geolocation API), 지도 서비스 file 황제낙엽 2016.12.03 218
39 HTML5 강좌 22강 - 파일접근, 파일정보 file 황제낙엽 2016.12.03 103
38 HTML5 강좌 21강 - 웹 스토리지 file 황제낙엽 2016.12.03 55
37 HTML5 강좌 20강 - HTML5 태그 - 드래그 앤 드롭 file 황제낙엽 2016.12.03 140
» HTML5 강좌 19강 - HTML5 태그 - 입력양식 form 사용 예제 file 황제낙엽 2016.12.03 141
35 HTML5 강좌 18강 - HTML5 태그 - 입력양식 form 사용하기 file 황제낙엽 2016.12.03 33