폼(3)

여러 줄을 입력하는 텍스트 영역 태그

• <textarea> 태그
  • form에서 텍스트를 여러 줄 입력하는 영역
  • ex) 게시판에서 글을 입력하거나 회원 가입 양식에서 사용자 약관을 표시할 때 사용
  • 기본형 :

        <textarea>내용</textarea>​

  • 자주 사용 하는 속성 :
    1. cols :
       ⓐ 텍스트 영역의 가로 너비를 문자 단위로 지정함
       ⓑ 지정하는 글자 수는 영문자를 기준으로 함 (한글 1글자 = 영문자 2글자)
            ex) col="100" 으로 지정할 경우 한글은 50글자에 해당함
    2. rows :
       ⓐ 텍스트 영역의 세로 길이를 줄 단위로 지정함
       ⓑ 지정한 숫자보다 줄 갯수가 많아지면 스크롤 막대가 생김
       ⓒ 지정하는 글자 수는 사용하는 글꼴이나 글자 크기에 따라 달라질 수 있어서 정확하게 크기를 지정할 수 없기 때문에 대략의 크기를 지정한다고 보면 됨

-(예시) :

<label for="memo">메모</label>
<textarea id="memo" cols="100" rows="10"></textarea>

-(결과) :

---

드롭다운 목록을 만들어 주는 태그

• 드롭다운 목록 : 목록을 클릭했을 때 옵션이 요소 아래쪽으로 펼쳐진 것
• <select> 태그
  • 드롭다운 목록의 시작과 끝을 표시함
  • 자주 사용하는 속성 :
    1. size : 화면에 표시할 드롭다운 항목의 개수를 지정함
    2. multiple : 드롭다운 목록에서 둘 이상의 항목을 선택할 때 사용함
• <option> 태그
  • 원하는 항목을 추가함
  • value 속성을 이용하여 서버로 넘겨주는 값을 지정함
  • 자주 사용하는 속성 :
    1. value : 해당 항목을 선택할 때 서버로 넘겨줄 값을 지정함
    2. selected : 드롭다운 메뉴를 삽입할 때 기본적으로 선택해서 보여 줄 항목을 지정함
• 기본형 :

        <select>
      <option value="값1">내용1</option>
      <option value="값2">내용2</option>
      ...
  </select>

---

데이터 목록을 만들어 주는 태그

• <datalist> 태그
  • 데이터 목록의 시작과 끝을 표시함
• <option> 태그
  • 각 데이터의 옵션을 표시함
  • value 속성을 사용하여 서버로 넘겨줄 값을 지정함
    이 값은 텍스트 필드에서도 나타남
• 기본형 :

        <input type="text" list="데이터 목록 id">
  <datalist id="데이터 목록 id">
      <option value="서버로 넘길 값1">선택 옵션1</option>
      <option value="서버로 넘길 값2">선택 옵션2</option>
  </datalist>​

-(예시) :

<label for="ex">예시</label>
<input type="text" id="ex" list="example">
<datalist id="example">
    <option value="choose">선택</option>
    <option value="no_choose">선택 안함</option>
</datalist>

-(결과) :

---

버튼을 만들어 주는 태그

• <button> 태그
  • <input> 태그의 필드를 사용한 버튼을 삽입한 것과 비슷해 보이지만 
    form을 전송하거나 리셋하는 버튼을 삽입할 수 있음
  • type 속성은 버튼이 활성화되었을 때 어떤 동작을 할지 지정함
    default 값은 submit
  • 콘텐츠를 포함할 수 있어서 아이콘을 추가하거나 CSS를 이용하여 원하는 형태로 꾸밀 수 있음
  • 기본형 :

          <button type="submit">내용</button>
    <button type="reset">내용</button>
    <button type="button">내용</button>

  • 자주 사용하는 속성 :
    
    1. submit : form을 서버로 전송함
                       <input type="submit">과 같은 기능을 함
    2. reset : form에 입력한 내용을 초기화함
                   <input type="reset">과 같은 기능을 함
    3. button : 버튼 형태만 만들 뿐 자체 기능은 없음
                       <input type="button">과 같은 기능을 함

-(예시) :

<button type="submit">확인</button>
<button type="reset">취소</button>

-(결과) :