다음에서는 추가 HTML 파일을 만든다고 가정합니다. 어쨌든 이 파일을 kontakt.html이라는 이름으로 저장합니다. contact.html은 이미 익숙한 index.html과 같은 수준입니다.
이 첫 번째 부분에서는 양식에 대한 기본 설정이 이루어집니다. 둥근 모서리, 색상 그라데이션 등은 다음 튜토리얼에서 다룰 예정입니다.
양식은 contact.HTML 내에 만들어집니다. 양식은 콘텐츠 클래스가 있는 div 영역 내에 정의됩니다. 그런 다음 어떤 필드를 만들지 생각해 보세요. 저는 다음 정보를 요청하기로 결정했습니다:
- 이름
- 이메일 주소
- 댓글
물론 어떤 정보를 수집할지는 스스로 결정해야 합니다. 하지만 원칙적으로 실제로 필요한 데이터만 요청하는 것이 좋습니다. 대부분의 웹사이트 방문자는 광범위한 양식을 기피합니다. 따라서 짧게 작성하세요.
제 양식의 기본 구조는 다음과 같습니다.
<div class="content"> <formclass="form" action="#" method="post"> <fieldset> <legend>Contact us</legend> <ol> <li> <label for="name">이름:</label> <input type="text" name="name "id="name" value="" /> </li> <li> <label for="email">이메일 주소입니다:</label> <input type="text" name="email" id="email "value="" /> </li> <li> <label for="comment">댓글:</label> <textarea cols="32" rows="7 "name="content" id="content"></textarea> </li> <li class="button"> <li입력 유형="제출" 이름="제출" id="제출" 값="제출" /> </li> </ol> </fieldset> </form> </div>
이 양식에는 특별한 기능이 포함되어 있지 않습니다. 양식 필드 주위에 필드 집합 정의가 적용되었습니다. 양식 필드를 만드는 방법과 레이블 요소가 무엇인지에 대해서는 이미 충분히 설명했습니다. 따라서 이 시점에서는 양식의 디자인에 전적으로 집중하겠습니다.
브라우저에서 결과를 불러오면 처음에는 특별히 매력적이지 않은 양식을 보게 될 것입니다.
물론 이 부분은 개선이 필요합니다.
우선 양식에 대한 기본 정보가 제공됩니다.
form { padding: 3px 0 0; margin: 10px auto; width: 550px; }
여기서 외부 및 내부 간격이 정의됩니다. 또한 양식의 너비는 550픽셀로 설정되어 있습니다.
필드세트 디자인을 계속 진행합니다.
fieldset { padding: 10px 20px 25px; }
간격도 여기에서 정의됩니다.
양식 필드 자체는 정렬된 ol 목록 안에 만들어집니다.
ol { list-style-type: none; margin: 0; padding: 0; }목록 스타일 유형: none; 은 이 목록을 시각적으로 더 이상 목록으로 인식할 수 없도록 하기 위해 사용됩니다. 또한 여백과 내부 간격은 각각 0으로 설정됩니다.
목록 항목은 다음 단계에서 정의됩니다. 이들은 왼쪽으로 떠 있고 내부 간격은 10픽셀입니다.
li { float: 왼쪽; padding: 10px; }
양식 아래 버튼과 관련하여 특별한 기능이 있습니다. 이 버튼은 오른쪽에 정렬되어야 합니다.
li.button { float: none; clear: both; text-align: right; }양식 제목
이제 범례 요소로 시선을 돌려보겠습니다. 양식 제목은 그 위에 정의되어 있습니다.
제목에 대한 정의는 다음과 같습니다:
fieldset legend { font-weight: 굵게; font-size: 22px; margin: 20px 0 0 10px; }레이블
이 시리즈에서 이미 레이블 요소를 접하셨습니다. 이 레이블은 필드 레이블과 실제 양식 필드 사이에 논리적 링크를 만드는 데 사용할 수 있습니다. 참고로 여기에는 CSS 정의와 관련하여 특별한 기능이 있습니다.
레이블 { display:블록; 커서: 포인터; 글꼴 굵기: 굵게; 줄 높이: 24px; }
저는 무엇보다도 레이블 요소에 커서 사양을 지정했습니다. 이는 방문자에게 필드 레이블을 클릭할 수 있다는 신호를 보냅니다. 방문자가 실제로 필드 설명을 클릭하면 커서가 자동으로 해당 필드에 배치됩니다.
양식 필드 디자인하기
다음 단계는 실제 양식 필드를 디자인하는 것입니다. 우선 입력 및 텍스트 영역에 대한 일반적인 사양을 지정합니다.
입력, 텍스트 영역 { 색상: #3399FF 테두리: 1px 솔리드 #3399FF; 글꼴: 13px Helvetica, Arial, Serif; 패딩: 8px 10px; 너비: 190px; }
이는 전적으로 디자인적인 문제입니다. 프레임에 특별한 주의를 기울여야 합니다. 필드에 커서를 놓는 즉시 프레임 색상이 변경됩니다. 덧붙여서 이것은 단순히 미적인 측면만이 아닙니다. 실제로 방문자가 양식을 작성하는 데 도움이 됩니다. 방문자는 항상 커서가 현재 어느 필드에 있는지 즉시 확인할 수 있습니다.
다음은 여러 줄 텍스트 입력 필드에 대한 몇 가지 세부 사항입니다.
텍스트 영역 { 너비: 430px; 오버플로: 자동; }
이 필드의 너비는 430픽셀로 설정되어 있습니다. 여러 줄 입력 필드와 관련된 오버플로: 자동 명령은 언뜻 보기에 다소 이상하게 보일 수 있습니다. 이 줄은 이전 버전의 Internet Explorer 때문입니다. 이 브라우저는 실제로 필요하지 않은 경우에도 여러 줄 입력 필드에 스크롤 막대를 표시했습니다. 이 미관상의 문제는 오버플로: 자동을 사용하면 피할 수 있습니다.
보내기 버튼 디자인하기
현재 보내기 버튼은 아직 꾸미지 않은 상태입니다. 이제 변경될 예정입니다. 결과는 다음과 같습니다:
버튼에 다양한 속성이 할당됩니다.
- 배경 색상
- 글꼴 모양
- 테두리
- 간격
해당 CSS 구문은 다음과 같습니다:
input[type="submit"] { 배경색: #3399FF; 색상: #fff; 커서: 포인터; 글꼴: 굵은 1em/1.2 Georgia, "Times New Roman", Serif; 테두리: 1px 솔리드 #000; 패딩: 5px 10px; 너비: 자동; }입력[type="submit"] 사양도 여기서 언급할 가치가 있습니다. 이 선택기는 속성-값 조합이 type="submit" 인 입력 요소에 액세스하는 데 사용됩니다.
