form 태그 (양식)

form태그는 회원가입, 로그인, 설문조사, 검색 등 사용자가 직접 정보를 입력하는 곳에 사용하는 양식 태그입니다.
form태그에 사용되는 속성엔 action속성과 method속성이 있습니다.

action 속성 안에는 받아온 데이터를 처리해줄 서버의 주소를 넣습니다.
method 속성은 get과 post 속성값을 가질 수 있습니다.

• get은 데이터가 url에 표시되는 방식입니다. 그래서 보안이 취약합니다. 주로 검색처럼 데이터를 받아오는 경우에 적용합니다.
• post는 데이터 내용이 드러나지 않습니다. 회원가입, 로그인 등 데이터 처리에 보안이 중요할 때 사용합니다.
  마지막으로, autocomplete 속성에 on off 값을 넣어 자동완성 기능을 켜거나 끌 수 있습니다.

이제 form태그 내에서 사용되는 여러가지 태그들을 알아보겠습니다.

input

input 태그는 양식에서 데이터의 입력을 담당합니다. 빈 태그(empty tag)이며, 필수 속성으로 name과 type이 필요합니다.

그 외에도 많은 속성들이 있으니 아래에서 설명하겠습니다.

name 속성

input에 입력되는 데이터를 식별할 수 있는 이름(분류)을 지정합니다. 데이터가 key: value 배열로 저장된다고 가정하면 key값에 해당합니다.

value 속성

input의 초기값, 내부값을 지정합니다. 말 그대로 초기값이기에 수정될 수 있습니다.

type 속성

input의 용도(형태)를 지정합니다.

• type="text"

  일반 텍스트를 입력할 수 있는 칸이 생성됩니다.

• type="email"

  이메일을 입력할 수 있습니다.
  주소에 @가 포함되지 않으면 경고문을 출력합니다.

• type="password"

  비밀번호를 입력하는 칸입니다.
  입력한 데이터가 바로 보이지 않고 가려져서 보입니다.

• type="button"

  입력창 대신 버튼이 생성됩니다.
  value를 지정해주어야 버튼 안에 텍스트가 생성됩니다.

• type="submit"

  제출용 버튼을 생성합니다. 내부텍스트가 '제출'로 자동 생성됩니다. value 속성으로 바꿀 수 있습니다.

• type="checkbox"

  체크박스를 생성합니다. radio버튼과 달리 다중 선택이 가능합니다.
  checked속성을 넣어 체크가 된 상태를 만들 수 있습니다.

  선택지1
  선택지2
  선택지3

• type="radio"

  동그란 선택 버튼을 생성합니다. checkbox와 달리 하나만 선택할 수 있습니다.
  단, 이 기능을 제대로 사용하려면 같은 종류의 radio 버튼들에게 동일한 name값을 부여해야 합니다.
  checkbox처럼 checked속성으로 초기값 설정이 가능합니다.

  잘못된 예시 (name값 설정 X)
  선택지1
  선택지2
  선택지3

  올바른 예시 (동일한 name값 설정)
  선택지1
  선택지2
  선택지3

• type="reset"

  현재 양식에 입력된 데이터를 모두 초기화하는 버튼을 생성합니다. 내부 텍스트의 기본값은 '초기화'이고, value속성으로 바꿀 수 있습니다.

placeholder 속성

어떤 데이터를 입력해야하는지 미리 보여주는 안내문같은 역할을 합니다.
초기값을 입력하는 value와는 다릅니다.
value는 실제 값이 입력된 것이기에 그대로 데이터로 보내거나 지울 수 있습니다.
하지만 placeholder는 실체가 없기에, 데이터가 한글자라도 입력되는 순간 사라집니다.

value 예시

placeholder 예시

size 속성

input의 가로 사이즈를 조정할 수 있는 속성입니다.
기본값은 20이며, 단위가 없는 숫자를 입력하면 됩니다.
정확한 크기를 주고 싶다면 css에서 width 속성을 쓰는 것을 권장합니다.
작성 예시

<input type="text" size="20">

button

<input type="button">처럼 버튼을 생성합니다.
input처럼 type속성을 줄 수 있습니다. 주로 type="submit"이 사용됩니다.
차이점은 input과 달리 빈 태그가 아닙니다.

작성 예시

<button type="button">눌러보세요</button>

출력 결과

눌러보세요

textarea

텍스트를 입력할 수 있는 칸을 생성합니다.

작성 예시
<textarea>Hello</textarea>

출력 결과

select & option

선택지를 제공할 때 사용할 수 있습니다.
select는 option을 감싸는 컨트롤의 역할을 합니다.
그리고 여러 개의 option을 optgroup으로 감싸서 그룹지어 분류할 수 있습니다.
이 때, optgroup에 label속성을 넣어 그룹명을 넣을 수도 있습니다.

option엔 선택되었을 때 값으로 사용될 value속성을 넣어주어야 합니다.

작성 예시

<select>
  <optgroup label="과일">
  	<option value="사과">사과</option>
  	<option value="귤">귤</option>
  	<option value="포도">포도</option>
  </optgroup>
  <optgroup label="야채">
  	<option value="배추">배추</option>
  	<option value="오이">오이</option>
  	<option value="당근">당근</option>
  </optgroup>
</select>

출력 결과

사과 귤 포도 배추 오이 당근

label

label은 input과 연결해서 사용합니다.
input에 id를 지정하고 for속성에 해당 id값을 넣으면, label을 클릭했을 때 해당 input이 선택(focus)됩니다.

작성 예시

<label for="user-id">아이디</label> 
<input id="user-id" type="text" />

출력 결과

아이디

또, for와 id를 쓰지 않고도 위 기능을 재현할 수 있습니다. 바로 label로 input을 감싸면 됩니다.
작성 예시

<label>
  이름 <input type="text" />
</label>

출력 결과

이름

fieldset & legend

fieldset은 양식의 특정 부분을 묶어줄 때 사용합니다. 보통 양식 그룹의 제목을 나타내는 legend태그와 함께 사용됩니다.

작성 예시

<form>
  <fieldset>
    <legend>회원가입</legend>
    <label for="my-id2">
      아이디 <input id="user-id" type="text" />
    </label><br>
    <label for="my-id2">
      비밀번호 <input id="user-pw" type="password" />
    </label>
  </fieldset>
</form>

출력 결과

회원가입 아이디
비밀번호