3-9. HTML 태그 : 폼 요소<select><option selected><textarea cols="" rows="" placeholder><button type="submit/ reset/ button>

3-9. HTML 태그 : 폼 요소

  

■ <select>

  - 선택 목록 상자 또는 콤보박스이라 함

  - 자식태그는 <option>태그

  - <select>...</select>

▣ <option>

  - <select> 태그를 통해 출력되는 각 선택항목을 나타냄

  - 속성으로는 selected가 있음

  - <option>...</option>

⊙ selected 속성

  - checked 속성과 동일하게 기본적으로 미리 선택항목을 선택하게끔 하는 것 

  - 기본 값으로 선택할 해당 선택내용의 <option> 요소 안에 선언

 

  1 사는 지역 : <select> 

  2                        <option selected>제주</option>

  3                        <option>서울</option>

  4                </select>

                      ↓

 

■ <textarea>

  - 한 줄만 입력할 수 있는 <input type="text">와 달리 여러 줄의 텍스트 입력시 사용

  - 텍스트 상자의 크기를 조절하는 cols 및 rows 속성이 있음

  - <textarea>...</textarea>

⊙ cols 속성

  - 텍스트 상자의 가로 크기(가로 한 줄에 들어가는 글자의 수)를 조절하는 속성 

⊙ rows 속성

  - 텍스트 상자의 세로 크기(화면에 보여지는 세로 줄 수)를 조절하는 속성 

⊙ placeholder 속성

 

  1 자기소개 : <textarea cols="30" rows="5" placeholder="자기소개는 짧게 해주세요"> 

  2               </textarea>

                      ↓

 

■ <button>

  - 버튼을 만들 때 사용하는 태그

  - 사용자가 클릭 가능한 버튼

  - 태그 내용을 입력안하면 빈 버튼으로 출력됨

  - 속성으로는 type이 있고, 그 값으로는 submit, reset, button이 있음

  - <input> 태그 type 속성의 그 값인 submit, reset, button과 동일한 기능임

  - 단, <button>태그는 <input> 태그와 달리 빈태그가 아니어서 닫는태그가 있음

  - 또한, 내용을 안에 직접 넣을 수 있기에 조금 더 자유로운 스타일 표현이 가능

  - <button>...</button>

⊙ type 속성

ㆍ submit, reset, button 속성값

 

  1 <button type="submit">전송</button> 

  2 <button type="reset">취소</button>            

               ↓