[html] form과 form 요소

form과 form 요소

사용자로부터 데이터를 받아야 하는 경우 사용되는 요소이다.

폼 요소는 서버에 데이터를 전달하기 위한 요소이다.

폼 관련 요소들을 하나씩 알아보자.

(아래 설명하는 태그들이 폼 요소들이다. form이 form요소가 아니다. form은 form이다.)

input 요소

input은 내용이 없는 빈 요소이며 type 속성을 통해 여러 종류의 입력 양식으로 나타낼 수 있다.

input의 타입들

type="text"

<input type="text" placeholder="플레이스홀더">

주로 아이디, 이름, 주소, 전화번호 등의 단순한 텍스트를 입력할 대 사용한다.

type="text" 는 placeholder 속성이 존재하는데 사용자가 입력하기 전에 미리 화면에 노출되는 값이다.

type="password"

<input type="password">

암호와 같이 공개할 수 없는 내용을 입력할 때 사용한다.

type="radio"

<input type="radio" name="gender">남자
<input type="radio" name="gender">여자

라디오 버튼을 만들 때 사용한다.

라디오 버튼은 중복 선택이 불가능하며 하나의 항목만을 선택해야 한다.

type="checkbox"

<input type="checkbox" name="hobby">등산	
<input type="checkbox" name="hobby">독서
<input type="checkbox" name="hobby">운동

체크박스를 만들때 사용한다.

체크박스는 중복 선택이 가능하다.

라디오 버튼과 체크박스에는 checked, name 속성이 존재한다.

checked 속성은 boolean값으로 true이면 체크표시를 해주는 속성이다.

name 속성은 라디오 버튼과 체크박스를 그룹화시켜주는 속성이다.

type="file"

<input type="file">

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

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

type="submit|reset|image|button"

<form action="./test.html">
    메시지: <input type="text" name="message"><br>
    <input type="submit" value="전송">
    <input type="reset" value="취소">
    <input type="image" src="http://placehold.it/50x50?text=click" alt="click" width="50" height="50">
    <input type="button" value="버튼">
</form>

submit, reset, image, button 타입은 모두 클릭 가능한 버튼이다.

기본동작을 적용하기 위해서는 form태그 안에 위치 해야한다.

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

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

value 속성으로 버튼의 텍스트를 변경할 수 있다.

select 요소

선택 목록 상자 또는 콤보박스라고도 한다.

몇 개의 선택지를 리스트 형태로 노출하고 그 중 하나를 선택할 수 있게 하는 태그이다.

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

multiple 속성을 사용하면 다중 선택도 가능하다.

<select> 내부에서 <option> 으로 각 항목을 나타낸다.

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

textarea 요소

여러줄의 텍스트를 입력할 때 사용한다.

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

텍스트 사자의 크기를 조절하는 rows, cols 속성이 있다. rows, cols 속성에 입력하는 값은 글자수와 보여지는 줄 수 이다.

장문의 텍스트를 입력하는 방식은 크게 2가지가 있다.

• textarea (전통적인 방식)

<textarea></textarea>

• contents editable

<div contentEditable="true"></div>

장점으로는 html의 태그요소를 작성하여 편집할 수 있다.

button 요소

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

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

input의 타입 submit, reset, button과 모두 같은 기능을 한다.

다만 빈 태그가 아니며 내용을 안에 직접 넣을수 있으므로 좀 더 자유로운 스타일 표현이 가능하다.

label 요소

form 요소의 이름과 form 요소를 명시적으로 연결시켜주기 위해 사용한다.

폼 컨트롤과 연결 시켜주기 위함으로 웹 접근성 향상에 도움이 되므로 필수적이다.

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

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

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

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

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

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

fieldset, legend 요소

form 요소를 구조화 하기 위해 필요한 태그이다.

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

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

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

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

form

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

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

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

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

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

method 속성값에 get/post 2가지 방식이 존대한다.

get 방식은 데이터가 전송될 대 주소창에 파라미터 현태로 붙어 데이터가 노출된다.

post 방식은 데이터가 전송될 때 데이터가 노출되지 않는다.