폼 요소 2) 기타

mandoo·2022년 10월 26일

form html label select 비전공자를_위한_HTML/CSS

HTML/CSS

목록 보기

6/12

비전공자를 위한 HTML/CSS 강의 공부 기록입니다.

1. select

<select>는 선택 목록 상자 혹은 콤보박스라고 부른다.

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

<select>
    <option>서울</option>
    <option>경기</option>
    <option>강원</option>
    ...
</select>

checked 속성을 활용하여 페이지가 로드되었을 때 미리 선택되어있는 옵션을 설정할 수 있다.

2. textarea

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

<textarea rows="5" cols="30">
    ...
</textarea>

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

3. button

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

<button type="submit"></button>
<button type="reset"></button>
<button type="button">버튼</button>

각 버튼은 이전에 배웠던 input 타입의 submit, reset, button과 모두 같은 기능을 가진 버튼이다.
다만, 빈 태그가 아니며 내용을 안에 직접 넣을 수 있으므로 좀 더 자유로운 스타일 표현이 가능하다.

4. label

<label>은 form 요소의 이름과 form 요소를 명시적으로 연결시켜주기 위해 사용하며 form 요소에 사용할 수 있다.

<label for="name">이름</label>: <input type="text" id="name">
<label for="nickname">이름</label>: <input type="text" id="nickname">
<label for="address">이름</label>: <input type="text" id="address">

form 요소의 id 속성값과 <label>의 for 속성값을 같게 적어야 한다.
<label>을 사용하면 이를 클릭했을 경우 해당 form 요소를 클릭한 것처럼 동작하며 스크린 리더기를 통해 듣게 되면 해당 form 요소에 접근 시 <label>을 함께 읽어주게 된다.

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

5. fieldset, legend

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

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

<fieldset>
    <legend>기본 정보</legend>
    ... 폼 요소들 ...
</fieldset>
<fieldset>
    <legend>부가 정보</legend>
    ... 폼 요소들 ...
</fieldset>

<fieldset>은 보통 form의 성격에 따라 구분하며 <legend>는 <fieldset>의 자식으로 반드시 <fieldset>의 최상단에 위치하여야 한다.

6. form

<form>은 form 요소들을 감싸는 태그로 데이터를 묶어서 실제 서버로 전송해주는 역할을 하는 태그이다.
만약 <fieldset>으로 구조화되어있다면 <fieldset>도 함께 감싸는 역할을 합니다.

<form action="" method="">
    <fieldset>
        <legend>기본 정보</legend>
        ... 폼 요소들 ...
    </fieldset>
    <fieldset>
        <legend>부가 정보</legend>
        ... 폼 요소들 ...
    </fieldset>
</form>

action: 데이터를 처리하기 위한 서버의 주소
method: 데이터를 전송하는 방식을 지정
- method="get": 데이터가 전송될 때 주소창에 파라미터 형태로 붙어 데이터가 노출된다.
- method="post": 데이터가 전송될 때 데이터가 노출되지 않는다.