[웹 개발] HTML 태그 (3)

type="file"

파일을 서버에 올릴 때 사용합니다.

브라우저에 따라 표현되는 형태는 조금씩 다르지만, 모두 같은 역할을 합니다.

 

type="submit|reset|image|button" 

submit, reset, image, button 타입은 모두 클릭 가능한 버튼을 만듭니다.

• submit : form의 값을 전송하는 버튼
• reset : form의 값을 초기화하는 버튼
• image : 이미지를 삽입할 수 있는 버튼 (submit과 동작이 동일함)
• button : 아무 기능이 없는 버튼

이미지 버튼은 이미지 관련 속성인 src, alt 속성이 반드시 필요하며 width/height 속성을 적용할 수도 있습니다.

 

<select>

<select>는 선택 목록 상자 또는 콤보박스라고도 합니다.

몇 개의 선택지를 리스트 형태로 노출하고 그중 하나를 선택할 수 있게 하는 태그입니다. (multiple 속성을 사용하면 다중 선택도 가능합니다.)

<select>내부의 <option>으로 각 항목을 나타냅니다.

<option>의 속성으로는 selected가 있으며 이는 선택된 항목을 의미합니다.

 

<textarea>

한 줄만을 입력할 수 있는 <input type="text" >와 달리 여러 줄의 텍스트를 입력할 때 사용합니다.

<textarea>에는 텍스트 상자의 크기를 조절하는 rows, cols 속성이 있습니다.

• cols : 가로 크기를 조절하는 속성(한 줄에 들어가는 글자의 수, 수치의 의미는 평균적인 글자의 너비로 정확히 글자 수를 나타내지는 않습니다.)
• rows : 세로 크기를 조절하는 속성(화면에 보여지는 줄 수)

<button>

버튼을 만들 때 사용하며 submit, reset, button 3가지의 타입이 있습니다.

 

<label>

<label>은 form 요소의 이름과 form 요소를 명시적으로 연결시켜주기 위해 사용합니다.

모든 form 요소에 사용할 수 있습니다.

form 요소의 id 속성값과 <label>의 for 속성값을 같게 적어주어야 합니다.

<label>을 사용하면 이를 클릭했을 경우 해당 form 요소를 클릭한 것처럼 동작합니다.

또한, 스크린 리더기를 통해 듣게 되면 해당 form 요소에 접근 시 <label>을 함께 읽어주게 됩니다.

<label>은 사용성, 접근성적인 측면으로 중요한 역할을 하므로 반드시 써주는 것이 좋습니다.

 

<fieldset>, <legend>

<fieldset>, <legend>는 form 요소를 구조화 하기 위해 필요한 태그입니다.

• <fieldset> : 여러 개의 폼 요소를 그룹화하여 구조적으로 만들기 위해 사용
• <legend> : 폼 요소의 제목으로 <fieldset> 내부에 작성

<fieldset>은 보통 form의 성격에 따라 구분합니다.

<legend>는 <fieldset>의 자식으로 반드시 최상단에 위치해야 합니다.

 

<form>      

<form>은 form 요소들을 감싸는 태그로 데이터를 묶어서 실제 서버로 전송해주는 역할을 하는 태그입니다.

만약 <fieldset>으로 구조화되어있다면 <fieldset>도 함께 감싸는 역할을 합니다.

 

<form>에는 대표적인 2가지 속성이 있습니다.

• action: 데이터를 처리하기 위한 서버의 주소
• method: 데이터를 전송하는 방식을 지정

method 속성값에는 get/post 2가지 방식이 존재합니다.

get 방식은 데이터가 전송될 때 주소창에 파라미터 형태로 붙어 데이터가 노출됩니다.

반면, post 방식은 데이터가 전송될 때 데이터가 노출되지 않습니다.