HTML 15단계 - 폼(Form) 3탄

안녕하세요

HTML 15단계 폼(Form) 3탄 시간이 돌아왔습니다.

저번 시간에는 폼(Form) 2탄을 알아봤는데요 혹시나 잊지는 않으셨겠죠?~

오늘도 화이팅하며, 부담없이 봐주시면 감사하겠습니다.

자 그럼 HTML 15단계 폼(Form) 3탄을 시작해볼께요~

 

1. 텍스트 에어리어(Textarea)

 

텍스트 에어리어(Textarea)는 텍스트 필드(Text Field)가 한줄만 입력할 수 있는 반면에 텍스트 에어리어(Textarea)는 여러줄에 걸쳐 입력 할 수 있는 폼 필드 입니다. 상세설명 같이 텍스트를 여러줄 입력받을때 주로 사용하는 입력양식입니다.

텍스트 에어리어(Textarea)에서는 넓이와 높이를 지정하기 위해 cols속성과 rows 속성이 사용됩니다.

 

자 그럼 간단한 예문 소스를 살펴보겠습니다.

<textarea cols="50" rows="5" name="content">기본 입력값은 이 부분에 적으시면 됩니다.</textarea>

 

그리고 기본입력값은 위의 예문 소스에 보신것처럼 <textarea>와 </textarea>태그 사이에 입력해주면 됩니다.

 

2. 셀렉트박스(select)

 

셀렉트박스(select)는 콤보박스라고도 부르며, Pull=Down Menus라고 표현하기도 합니다.

셀렉트박스(select)는 <select> 태그와 <option> 태그로 구성됩니다.

<option> 태그에서 사용하는 value 속성은 텍스트 필드에서 value 속성과는 조금 다릅니다. 텍스트 필드에서 value 속성 값을 입력하면 기본값이 입력되지만 <option> 태그는 <option>이 선택된 경우 전송되는 값을 지정하는 것입니다.

 

자 그럼 간단한 예문 소스를 살펴보겠습니다.

<select name="job">

  <option value="">직업선택</option>

  <option value="회사원">회사원</option>

  <option value="공무원">공무원</option>

  <option value="자영업">자영업</option>

  <option value="프리랜서">프리랜서</option>

</select>

 

위의 예문소스에서 직업선택 부분을 만약에 "회사원"을 선택하셨으면 폼값을 전송했을때 job 필드의 value값은 <option value="회사원">회사원</option>의 value 값인 "회사원"으로 전송됩니다. 

만약에 기본값을 지정하고 싶을때는 selected 속성을 사용하시면 됩니다.

 

"회사원"을 기본값으로 지정하고 싶을때의 예문 소스를 살펴보겠습니다.

<select name="job">

  <option value="">직업선택</option>

  <option value="회사원" selected="selected">회사원</option>

  <option value="공무원">공무원</option>

  <option value="자영업">자영업</option>

  <option value="프리랜서">프리랜서</option>

</select>

 

위의 예문소스를 실행해 보시면 기본값으로 회사원이 선택되어있는것을 확인 하실 수 있습니다.

 

그리고 <optgroup> 는 <option>에 카테고리를 만들 수 있는 속성입니다. 

예문 소스를 살펴보겠습니다.

<select name="hobby">

  <option value="">취미</option>

  <optgroup label="스포츠">

    <option value="축구">축구</option>

    <option value="농구">농구</option>

    <option value="배구">배구</option>

  </optgroup>

  <option value="낚시">낚시</option>

  <option value="음악감상">음악감상</option>

</select>

 

위의 예문에 보시다싶이 "스포츠"라는 카테고리를 만들고 축구, 농구, 배구 등의 옵션을 추가했습니다. 

 

어떠신가요? 이해가 잘 되시나요?

항상 드리는 말씀이지만 반복해서 연습하셔야 된다는건 필수인거 아시죠?ㅎ

다음시간에는 폼(Form) 4탄에 대해서 포스팅 해볼껀데요. 많은 응원과 기대해주세요. 감사합니다.