웹표준 간단한 폼(form) 양식
리스트를 이용한 간단한 폼을 만들어보겠다. 그전에 폼에 사용되는 엘리먼트부터 보자 가장 기본적으로 구축할 모습은 다음과 같다.
- form
- form은 양식을 시작한다는 의미를가진다.또한 action옵션을 가짐으로서 입력완료하고 실행시 작동연결을 담당한다.
- fieldset
- fieldset은 양식의 테두리를 보여준다. 구역의 의미로 임력해야할여러 정보가있다면 큰범위로 나누어 줄때 사용한다.
- legend
- legend은 나누어진 구역의 의미를 가르켜준다.여기서는 개인정보입력이라고 되어있다.
- label
- label은 input엘리먼트가 사용될 목적을 지칭할때 사용된다.
- input
- input은 입력 양식을 보여준다, 잘 알다시피 라디오버튼,체크 박스, 텍스트등을 옵션으로 가진다.
리스트를 활용한 응용
위에서는 p엘리먼트로 labler과 input엘리먼트로 감싸주었다.리스트를 이용해보자
- 이름(필수)
- 연락방법을 선택하세요 (적어도 하나)
- E-Mail(선택)
- Phone(선택)
- Fax(선택)
위와같은 모델로 폼을 만들어볼것이다.폼양식은 만들기가 다른 것에비해 복잡하기에 이와같이 미리 모델을 만들어보는것이 유용하다.
위와같이하면 결과는 아래그림처럼 나올 것이다.
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;}
/*개별 마진값을 준다.*/
댓글