Programming/HTML CSS
1. form, input, select, textarea 사용
<form>
이름 : <input type="input"> <br />
주소 :
<select>
  <optgroup label="컴퓨터">
   <option>CPU</option>
   <option>Memory</option>
   <option>HardDisk</option>
  </optgroup>
  <optgroup label="자동차">
   <option>트럭</option>
   <option>승용차</option>
  </optgroup>
 </select> <br />
자기소개 :
<textarea>안녕하세요.</textarea>
▶ 사용자에게 어떠한 입력을 받아들이기 위해 입력양식을 작성하며 form은 입력양식의 전체적인 부분을, input는 실질적으로 데이터입력을 받아들이는 역활을 합니다. 이때 form은 내부에 포함된 input에 입력사항을 지정된 곳으로 전송하도록 합니다.

select는 option태그로 항목을 추가하며 해당 항목이 콤보박스 형태로 표시되도록 합니다. optgroup 태그를 select 태그 내부에 사용하면 특정 항목을 group으로 나눌 수 있습니다. 다만 group으로 나눌 필요가 없는 경우에는 optgroup태그는 생략될 수 있습니다.

textarea는 여러줄의 텍스트 입력을 가능하게 합니다. 미리 어떠한 내용을 보이게 하려면 textarea내부에 원하는 내용을 입력하고, 그렇지 않으면 비워두면 됩니다.

textarea 태그는 특별한 경우가 위 예제와 같이 사용하고 아래 처럼은 쓰지 않는 것이 좋습니다. 원하는 방식대로 출력되지 않을 수 있기 때문입니다.
<textarea>
    안녕하세요.
    반갑습니다.
</textarea>
2. form, input, select, textarea 속성

(1) form 속성

 action  입력된 데이터를 처리하는 페이지를 지정합니다.
 enctype  action 속성에 설정된 페이지에 데이터를 보낼때의 휴형을 지정합니다. application/x-www-form-urlencoded 는 기본값이며 데이터를 encode합니다. multipart/form-data 값은 파일을 업로드하고자 하는 경우에 사용하며 text/plain은 공백을 +로 바꿀뿐 특수문자를 endcode하지 않습니다.
 name  form의 이름을 지정합니다.
 method  get과 post 두가지를 지정할 수 있는데 기본값은 get입니다. 대게는 post가 많이 사용되며 get으로 지정하면 'http://action주소?user_name=입력값' 형태로 주소뒤에 값을 붙여 전송하게 됩니다.
 target  target 에 action 속성과 같이 페이지를 지정하면 action 속성에 지정된 페이지로 데이터를 보낸 후 target에 지정된 페이지로 이동하게 됩니다. 대게는 action에서 데이터를 처리하고 결과를 target에서 보는 것으로 사용됩니다.

(2) input 속성

 type  input 이 어떤 형태로 데이터를 받아들일지 지정하며 사용할 수 있는 값은 별도의 표에 정리하였습니다.
 name  input 의 이름을 지정합니다.
 value  표시될 기본값을 지정하거나 form의 action에 데이터를 전송할때 실질적으로 전송되어야 하는 데이터를 지정합니다. 예를 들어 "<input type="checkbox" value="1">서울" 과 같이 사용된 경우 해당 input을 선택했을때 전달되는 데이터는 '서울'이 아니라 1이 됩니다.
 size  숫자로만 지정하며 type의 값이 text나 password인 경우 입력될 수 있는 최대문자열 길이를 지정합니다.

아래는 input 태그의 type에 일반적으로 사용되는 내용입니다.

 button  버튼
 checkbox  체크박스
 file  파일 업로드
 hidden  요소 숨김
 image  이미지 버튼
 password  비밀번호 입력
 radio  라디오 버튼
 reset  초기화 버튼
 submit  전송 버튼(입력완료 후)
 text  문자열 입력

아래 값은 HTML5 에서 새롭게 적용된 내용이며 일부 오페라를 제외한 일부 브라우저에서는 제대로 표현되지 않을 수 있습니다.

 color  색상 입력
 date  일 입력
 datetime  날짜 입력
 datetime-local  지역 선택
 email  이메일 입력
 month  월 입력
 number  숫자입력
 range  범위값 입력
 search  검색어 입력
 tel  전화번호 입력
 time  시간 입력
 url  url 입력
 week  주단위 입력

(3) select (optgroup, option) 속성

 name  select 의 이름을 지정합니다.
 value  option에 사용되는 속성으로서 form의 action에 select에서 선택한 option 데이터를 전송할때 실질적으로 전송되어야 하는 데이터를 전달합니다. 예를 들어 <option value="1">서울</option>으로 option을 추가해 놓고 select에서 서울항목을 선택했다면 전달되는 데이터는 '서울'이 아니라 '1'이 됩니다.
 multiple  select 항목은 기본적으로 하나의 항목만 선택이 가능하지만 이 속성에 multiple 값을 지정하면 여러개의 항목을 다중적으로 선택할 수 있습니다.
 label  select 항목을 여러개의 group으로 나누고자 optgroup 태그를 사용한 경우 해당 태그에 붙일 수 있는 속성입니다. 이 속성에는 각 항목에 대한 이름을 붙이는데 사용됩니다. 

(4) textarea 속성

 name  textarea 의 이름을 지정합니다.
 cols  textarea 의 넓이를 지정합니다.
 rows  textarea 의 높이를 지정합니다.

'Programming > HTML CSS' 카테고리의 다른 글

[CSS] vertical-align  (0) 2013.04.23
[HTML / HTML5] ruby, rt, rp (루비문자)  (0) 2013.04.22
[HTML / HTML5] form, input, select, textarea  (0) 2013.04.18
[HTML / HTML5] a (링크)  (0) 2013.04.17
[HTML5] audio (오디오)  (0) 2013.04.16
[CSS] color  (0) 2013.04.15
0 0