[HTML] Form 정리 (5)

• select태그
  • 옵션 메뉴를 제공하는 드롭다운 리스트(drop-down list)를 정의할 때 사용.
  • 요소 내부의 요소는 드롭다운 리스트(drop-down list)에서 사용되는 각각의 옵션을 정의.
  • 사용자로부터 입력을 받기 위한 폼(form)에 사용될 수 있습니다.
• select태그의 속성
  • multiple : 여러 옵션을 선택할 수 있는지 여부 지정
  • size : 한 번에 표시할 옵션 수를 지정
  • autofocus : 페이지가 로드될 때 자동으로 포커스(focus)가 드롭다운 리스트로 이동됨을 명시함.
  • disabled : 해당 드롭다운 리스트가 비활성화됨을 명시함.
• option태그의 속성
  • value : 서버에 제출할 데이터 값이 포함.. value속성이 포함되지 않은 경우 기본값은 요소 내부에 포함된 텍스트.
  • selected : 페이지가 처음 로드될 때 기본적으로 선택되도록 하는 속성
• textarea태그
  • 사용자가 여러 줄의 텍스트를 입력할 수 있는 텍스트 입력 영역을 정의할 때 사용.
  • 텍스트 입력 영역에는 개수의 제한 없이 문자를 입력할 수 있으며, 입력된 문자는 고정폭 글꼴로 렌더링된다.그리고 입력폼 안에 사용된 태그 및 띄어쓰기가 그대로 출력된다.
  • 텍스트 입력 영역의 크기는 요소의 cols 속성과 rows 속성으로 지정할 수 있다.
  • 참고로, 브라우저별로 편차가 있기 때문에 가급적 CSS를 통해서 넓이 및 높이의 스타일을 지정하는 것이 좋다.
• textarea태그의 속성
  • cols: 가로 텍스트 수. 지정한 크기가 넘어가면 다음 줄로 자동으로 넘어감.
  • rows : 세로 텍스트 수. 지정한 크기가 넘어가면 스크롤이 생김.
  • TEXTAREA 에 width, height를 줄 경우 cols, roes의 속성 적용이 안 됨.
  • name 요소 이름 지정.
  • readonly/disabled (둘 중 하나만 사용 가능)
  • maxlength : 요소에서 허용되는 최대 문자수를 명시함.

• fieldset,legend태그
  • <form>요소에서 연관된 요소들을 하나의 그룹으로 묶을 때 사용.
  • <fieldset>요소는 하나의 그룹으로 묶은 요소들 주변으로 박스 모양의 선을 그려준다. 또한, <legend> 요소를 사용하면 <fieldset> 요소의 캡션(caption)을 정의할 수 있다.

  <fieldset> 
     <legend>개인 정보</legend> 
     <ul> 
        <li> 
          <label for="name">이름</label> 
          <input type="text" id="name"> 
        </li> 
        <li> 
          <label for="mail">메일 주소</label> 
          <input type="text" id="mail"> 
        </li> 
     </ul> 
  </fieldset>

이렇게 쓰면 아래처럼 fieldset태그가 그룹을 짓고 legend태그에 써있는 텍스트로 캡션을 적어줄 수 있다.

• value는 사용자가 타이핑한 내용의 값이다. 하지만 이것은 필수가 아니다. 또한 value는 페이지를 로딩했을 때 해당 폼컨트롤태그에 미리 노출되는 문자이다.
  • value가 필수 - radio, checkbox, select
  • value가 선택 - text, password, textarea