[Web/HTML] - 폼에서 사용하는 태그들

✏️ 여러 줄을 입력하는 <textarea> 태그

<label for="memo">메모</label>
<textarea cols="40" rows="2" id="memo"></textarea>

// 너비 크기를 조정하는 cols 속성과 몇 줄을 표시할지 지정하는 rows 속성을 사용
// 보통 한글 1글자는 영어 2글자에 해당하므로 cols="40"으로 지정하면 한 줄에 20글자 정도를 입력 가능

 

✏️ 드롭다운 목록을 만들어주는 <select>, <option> 태그

사용자가 내용을 입력하지 않고 여러 옵션 중에서 선택하게 하려면 드롭다운 목록이나 데이터 목록을 사용

드롭다운 목록은 목록을 클릭했을 때 옵션이 요소 아래쪽으로 펼쳐저서 붙여진 이름

<select> 태그로 드롭다운의 시작과 끝을 표시하고 그 안에서 <option> 태그로 원하는 항목을 추가

<option> 태그에는 value 속성이 있어 서버로 넘겨주는 값을 지정 가능

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

// <select> 태그의 속성
// size : 화면에 표시할 드롭다운 항목의 개수를 지정
// multiple : 드롭다운 목록에서 둘 이상의 항목을 선택할 때 사용

// <option> 태그의 속성
// value : 서버로 넘겨주는 값을 지정
// selected : 드롭다운 메뉴를 삽입할 때 기본적으로 선택해서 보여 줄 항목을 선택

✏️ 데이터 목록을 만들어 주는 <datalist>, <option> 태그

<label for = "prod2">데이터</label>
<input type="text" list="pack" id="prod2">
<datalist id="pack">
  <option value = "서버로 넘길 값1">옵션 1</option>
  <option value="서버로 넘길 값2">옵션 2</option>
</datalist>

// 데이터 목록을 사용하게 되면 텍스트 필드에 값을 직접 입력하지 않고 미리 만들어 놓은 값 중에서 선택 가능
// <datalist>태그를 통해서 데이터 목록의 시작과 끝을 표시하고 그 안에서 <option> 태그로 데이터의 옵션을 표시

✏️ 버튼을 만들어 주는 <button> 태그

<button type="submit">제출</button>
<button type="reset">리셋</button>
<button type="button">버튼</button>

// <input> 태그의 필드를 삽입해서 버튼을 만든 것과 같은 원리
// <button> 태그의 속성
// submit : 폼을 서버로 제출, <input type = "submit">과 동일 
// reset : 그냥 초기화 , <input type="reset">과 동일
// button:  버튼 형태만 하게 됨, <input type = "button">과 동일