Do it 웹사이트 따라 만들기 -Contact Us 페이지 만들기

# 9-1. 폼 요소 살펴보기

폼 태그

• form : 서버와의 상호작용을 위한 콘텐츠로, 사용자의 요청을 받고 서버에서 그에 따른 처리를 진행한다.
• 동작 과정
  • 폼 내용을 입력 한 후 폼 안에 있는 모든 데이터를 웹 서버로 보낸다.
  • 웹 서버는 폼 데이터를 처리하기 위해 폼 안에 있는 데이터를 웹 프로그램으로 보낸다.
  • 웹 프로그램은 데이터를 처리한 후 결과를 웹 서버로 보낸다.
  • 웹 서버에서 받은 결과를 브라우저에 보내 사용자가 볼 수 있게 된다.
• 폼 태그 속성
  • action : 폼을 통해 전송한 정보를 처리하는 웹 페이지의 URL을 나타낸다.
  • method(default = get) : 브라우저가 폼을 전송하기 위해 사용하는 HTTP의 방식을 지정한다. 이 속성값은 get 또는 post 중 한 개를 갖는다.
  • autocomplete(default = on) : 폼 안에 있는 요소들의 기본값이 브라우저에 의해 자동으로 완성되게 하는지의 여부를 나타낸다. 속성값은 on 또는 off 중 하나를 갖는다.
  • name : 폼의 이름. 폼을 식별하기 위한 이름을 지정한다.
  • target(default = _self) : action에서 지정한 정보를 처리하는 페이지를 현재 창 또는 다른 위치에서 열리도록 지정한다.
  • <form name="폼 이름" action="데이터를 보낼 주소" method="서버에 전달되는 방식"><input>, <select>등의 입력 폼 요소</form>
• 데이터 전달 방식
  • get : 데이터 URL로 정보를 전달하는 방식. 파일의 URL에 물음표 기호를 사용하여 '변수명 = 전달되는 값'과 같은 방식으로 동작한다. 주로 조회나 검색 등에서 사용한다.
  • post : 정보를 숨겨서 보내는 방식으로, 정보가 노출되지 않아 보안에 강하고 길이에 대한 제약이 없다. 회원가입이나 로그인 폼에서 사용한다.

---

# 9-2. Contact Us 페이지 만들기

1. html 파일에서 "menu4" 태그로 이동한다. <h3> 태그로 제목을 작성하고 .from_fit으로 클래스를 지정한다.
2. 폼 태그에 클래스를 gform로 지정하고 method 속성은 post로 지정한다. name 속성은 contactus로 지정한다.
3. 폼 안의 내용을 그룹화 하기 위해 <fieldset> 태그를 작성하고, 해당 그룹에 제목을 지정하기 위해 legend로 태그를 작성하여 해당 폼의 제목을 작성한다.
4. 폼 안에 입력 받을 내용을 만든다. <div> 태그 클래스를 formlist로 지정하고 목록 태그인 <ul>, <li> 태그를 작성한다. <li> 태그 안에 입력 폼 양식의 이름을 붙이는 태그인 <label> 태그를 작성하고, <input> 태그를 <span> 태그로 감싸 영역을 나눈다. <span> 태그의 클래스는 inputbox로 작성, <input> 태그의 type은 text로 지정한다.
5. <label> 태그의 속성에는 for가 있어 for 속성값과 폼 요소(input, select)의 id를 동일하게 작성하면 <label> 태그를 클릭할 때 연결된 양식에 바로 입력이 가능하다. <input> 태그의 name 속성도 id와 같게 지정한다.
6. 폼의 내용이 모두 작성되어야 문의 글을 등록할 수 있도록 <input> 태그에 required 속성을 지정하고, 시각적으로 필수라는 것을 표현하기 위해 <label> 태그에 작성된 텍스트에 <sup> 태그를 작성하여 필수(*)표시를 한다.
7. 이메일을 작성할 수 있도록 <li> 태그를 추가한다. 문의할 내용을 작성하는 곳에는 <input> 태그 대신 <textarea> 태그를 작성하고 <span> 태그의 클래스는 textbox로 지정한다. id, for, name의 속성값은 모두 같게 지정한다.
8. <input> 태그의 placeholder 속성을 추가하여 입력 받을 형식을 안내해 주면 사용자는 데이터를 작성할 때 어떤 규칙으로 작성해야 하는지 쉽게 알 수 있다.

css 적용 전

1. 지금까지는 공통으로 사용하던 content_wrap 클래스를 사용해 공통으로 크기를 지정했다. contact us 페이지는 작게 디자인 되도록 #menu4 .content_wrap로 선택자를 만들어 해당 페이지만 width 속성 변경 및 디자인 요소를 지정한다.
2. 콘텐츠 영역의 제목 <h3 class="form_fit"> 태그의 속성값을 지정해 디자인한다.
3. .formlist 클래스로 폼 디자인을 지정한다. padding-bottom으로 여백을 지정해 이미지가 위치할 공간을 만든다.
4. .formlist ul li에 작성된 폼의 내용을 정렬한다. 각 항목 하단에 margin-bottom 속성값을 지정한다.
5. <label> 태그 영역은 position과 padding 속성으로 이용하여 고정 영역으로 만든다. 
6. <li> 태그가 시작점의 기준이 되도록 formlist ul li의 position 속성값을 relative로 지정하고 padding 속성값을 지정한다.
7. 필수 표시로 넣은 별표 문양을 빨간색으로 지정한다.
8. <input> 태그의 디자인은 기본 스타일을 제외한 후 .inputbox로 지정된 클래스에 지정한다. 즉, input 모양은 .inputbox에 지정하고 브라우저가 기본적으로 제공하는 <input> 태그의 스타일은 지워준다.
9. 문의 내용을 적은 <textarea> 태그 역시 .textbox 클래스에 지정한다.
10. <input>,<textarea> 태그의 width, height 속성값은 공통으로 100%로 지정한다.
11. 폼 처리를 위한 버튼 .btn_box 클래스를 디자인한다.
12. 6장에서 공통으로 사용하기 위핸 .commbtn 클래스에서 색상을 따로 지정하기 위해 .gray를 추가하여 background 속성값과 color 속성값을 지정한다. html 파일을 열어 버튼 태그에 gray 클래스를 추가한다.

#menu4 .content_wrap{width:800px; margin:100px auto 0 auto; padding:30px; background:rgba(255,255,255, 0.7); border-radius:5px;}
#menu4 .content_wrap .form_tit{margin-bottom:40px; font-size:24px; font-weight:700; color:#ea657b;}
.formlist{padding-bottom:150px; background:url(../images/contact_bg.png) no-repeat right bottom; background-size:200px;}
.formlist ul li{margin-bottom:15px; position:relative; padding:0 0 0 150px;}
.formlist ul li label{display:block; width:150px; position:absolute; left:0; top:0; font-size:14px; color:#555;}
.formlist ul li label sup{color:#ea657b;}
.formlist ul li span{display:block;}
.formlist ul li .inputbox{width:100%; height:40px; border:solid 1px #ddd; background:#fff;}
.formlist ul li .textbox{width:100%; height:200px; border:solid 1px #ddd; background:#fff;}
.formlist ul li input,.formlist ul li textarea{width:100%; height:100%;}
.btn_box{width:100%; margin-top:20px; text-align:center;}

.commbtn.gray{background:#3c4147; color:#fff;}

완성~

 

---

# 회고

 

input에는 다양한 타입이 있다.

• email : 이메일 형식 체크
• number : 숫자만 입려가능한 창을 만들고 범위 제한을 둘 수 있다.
• date : 날짜 입력창을 만든다.

속성도 다양하게 있다.

• required : 필수 입력 사항인지의 여부를 세팅할 수 있다.
• autofocus : 페이지가 열릴 때 처음으로 포커스가 이동한다.
• placeholder : 텍스트 박스에 흐린 글씨로 가이드 문장을 보여준다.

 

form 태그를 기다렸다. 실질적으로 개발자와 연관된 기능이라 해야하나??

특히 URL 입력이나 제한을 둘 때 신중하게 하지 않으면 프-백 연결 오류나기도 해서 관심이 많았다.