본문 바로가기
웹표준

웹표준 간단한 폼(form) 양식

by 샷타이거 2010. 2. 18.

웹표준 간단한 폼(form) 양식

리스트를 이용한 간단한 폼을 만들어보겠다. 그전에 폼에 사용되는 엘리먼트부터 보자 가장 기본적으로 구축할 모습은 다음과 같다.

개인정보입력

form
form은 양식을 시작한다는 의미를가진다.또한 action옵션을 가짐으로서 입력완료하고 실행시 작동연결을 담당한다.
fieldset
fieldset은 양식의 테두리를 보여준다. 구역의 의미로 임력해야할여러 정보가있다면 큰범위로 나누어 줄때 사용한다.
legend
legend은 나누어진 구역의 의미를 가르켜준다.여기서는 개인정보입력이라고 되어있다.
label
label은 input엘리먼트가 사용될 목적을 지칭할때 사용된다.
input
input은 입력 양식을 보여준다, 잘 알다시피 라디오버튼,체크 박스, 텍스트등을 옵션으로 가진다.

리스트를 활용한 응용

위에서는 p엘리먼트로 labler과 input엘리먼트로 감싸주었다.리스트를 이용해보자

  
  1. 이름(필수)
  2. 연락방법을 선택하세요 (적어도 하나)
    • E-Mail(선택)
    • Phone(선택)
    • Fax(선택)

위와같은 모델로 폼을 만들어볼것이다.폼양식은 만들기가 다른 것에비해 복잡하기에 이와같이 미리 모델을 만들어보는것이 유용하다.

개인 정보 입력
  1. (필수)
  2. 연락방법을 선택하세요 (적어도 하나)
    • (선택)
    • (선택)
    • (선택)

위와같이하면 결과는 아래그림처럼 나올 것이다.

CSS로 마무리

먼저 마진 패딩, 리스트 꾸밈을 초기화 해준다

*{ margin : 0; padding : 0; }
ol,ul { list-style : none; }

나머지는 아래를 참고

fieldset{ padding: 30px;}
/*필드셋안에 너비를 30px준다*/
form{ position:absolute; 
      left:200px; top:100px; 
      width:600px;}
/*폼의 위치는 임의로 대충 잡아놨다.
가로 너비를 600px*/
ol li{ margin-top:20px;}
ol li ul li{ margin-top:5px;}
ul{float:left; margin-left:30px; }
ul li label{ float:left; width:100px;}
/*개별 마진값을 준다.*/

결과는 여기서확인http://sianasiatiger.cafe24.com/study/F_start.html

댓글