05. HTML의 태그 - 폼 태그

폼 태그

form 태그는 웹 페이지에서의 입력 양식을 의미한다. 사용자가 텍스트 필드나 체크박스, 라디오 버튼을 통해 데이터를 입력하면 이 데이터는 서버에 전달되고 정보를 처리하게 된다. 여기서의 텍스트 필드, 체크박스, 라디오 버튼이 바로 폼 태그의 예이다.

폼 태그 속성

폼 태그 속성에는 name, method, target 등이 있다. 속성을 통해 폼을 어디로 전송하고 어떤 방식으로 전송할지를 설정한다.

• name: 폼을 식별하기 위한 이름을 지정
• action: 폼이 제출되었을 때, 데이터를 보낼 웹 페이지를 지정
• method: 어떤 유형의 HTTP 메서드를 사용할 지를 지정

input 태그

input 태그는 내용이 없는 빈 태그로, 사용자로부터 입력을 받기 위한 입력 필드를 정의할 때 사용한다. form 태그의 내부에서 사용되는 자식태그이며, type을 통해 폼의 종류를 설정할 수 있다.

type 속성

type 속성은 input 태그의 필수 속성은 아니지만, 항상 명시하는 것이 좋다. 기본값은 텍스트 필드를 정의하는 text이며, 그 외에도 아래와 같은 속성 값이 추가적으로 존재한다.

button: 클릭할 수 있는 버튼을 생성
checkbox: 다중 선택이 가능한 체크 박스(check box)를 생성
flie: 업로드할 파일을 선택할 수 있는 입력 필드와 파일 선택 버튼을 생성
hidden: 사용자에게 보이지 않는 숨겨진 입력 필드를 생성
password: 입력 값이 가려지는 텍스트 필드를 생성
radio: 단일 선택만 가능한 라디오 버튼을 생성
reset: 입력한 값이 모두 리셋되는 버튼을 생성
submit: 입력한 값을 제출하는 버튼을 생성
text: 한줄로 된 텍스트 필드를 생성 (기본값)

name 속성

name 속성은 input 태그의 이름을 명시하는 속성이다. 폼이 제출된 후 서버에 폼 데이터를 참조하기 위해 사용되거나, 자바스크립트에서 태그를 참조할 때 사용된다.

value 속성

value 속성은 input 태그의 초깃값을 설정하는 속성이다. input 태그의 type 속성값에 따라 다른 용도로 사용된다. type 속성값이 file인 경우 value 속성을 사용할 수 없다.

• button, submit, reset: 버튼 내의 텍스트를 정의
• checkbox, image, radio: 해당 입력 필드 선택 시 서버에 전송될 값을 정의
• hidden, password, text: 입력 필드의 초깃값을 정의

<form>
  <input type="text" value="초깃값을 지정합니다."><br>
  <input type="button" value="버튼의 내용도 설정 가능합니다."><br>
  
  <!-- 사과와 복숭아 선택 시 fruit=apple&fruit=peach가 전송됨 -->
  <input type="checkbox" name="fruit" value="apple"> 사과 
  <input type="checkbox" name="fruit" value="peach"> 복숭아
  <input type="checkbox" name="fruit" value="melon"> 메론
<form>

placeholder 속성

placeholder 속성은 입력 필드에 입력할 값에 대한 힌트를 제공하는 속성이다. 보통 입력할 값에 대한 예시나 입력 형식에 대한 설명이 속성값으로 들어간다.

value 속성을 통해 지정한 입력 필드의 초깃값은 사용자가 직접 지우고 입력해야 하지만, placeholder 속성은 입력 필드에 포커스를 두면 자동으로 지워진다는 장점이 있다.

<form>
  <input type="text" name="email" placeholder="ex) abc@naver.com">
</form>

size 속성

size 속성은 텍스트 필드(text, email, password, search, tel)의 가로 길이를 조절하는 속성이다. 기본 셋팅인 20을 기준으로 값을 늘리거나 줄이면 폼의 가로 길이가 조절된다. size 속성은 폼의 길이를 조절하는 속성이기 때문에 폼에 들어가는 글자수에는 제한이 생기지 않는다.

<form>
  <input type="text" size="30">
</form>

minlength & maxlength 속성

minlength와 maxlength 속성은 폼에 들어가는 글자수를 제한하는 속성이다. 영문이나 숫자는 minlength와 maxlength에 부여한 값과 일치하지만, 한글의 경우 자음이나 모음의 개수가 아닌 한 칸의 단어를 1개로 카운트 한다.

<form>
  <input type="text" maxlength="30">
</form>

autocomplete 속성

autocomplete 속성은 form 태그나 input 태그에 입력된 정보를 저장할 지에 대한 설정을 하는 속성이다. autocomplete를 on으로 설정하면 브라우저는 사용자가 입력하는 정보를 자동으로 저장하고, 이를 바탕으로 입력 값을 자동 완성 해준다.

해당 속성은 다음과 같은 타입에서만 사용 가능하다.

• text, password, email, url, tel, search (텍스트 필드)
• date, datetime-local, month, week (날짜 입력 필드)
• range, color (그 외 입력 필드)

<!--form에 autocomplete를 사용할 경우, 모든 input에 자동완성 기능이 켜짐
    단, autocomplete="off"를 한 항목은 제외됨 -->

<form action="/examples/media/request.php" autocomplete="on">
  이름: <input type="text" name="name"><br> 
  나이: <input type="text" name="age" autocomplete="off">
</form>

required & disabled 속성

required 속성은 값을 사용자가 데이터를 필수로 입력하도록 정의하는 속성이고, disabled 속성은 사용자가 데이터를 입력하지 못하도록 비활성화하는 속성이다.

required 속성이 설정된 input 태그에 입력값이 존재하지 않을 경우 서버로 전송되지 않는다. disabled 속성과 required 속성이 한 태그에 같이 정의되어있을 경우 required 속성은 무시된다.

<form action="/examples/media/request.php">
  이름: <input type="text" name="name" required><br> 
  나이: <input type="number" name="age" min="1">
  공란: <input type="text" value="입력할 수 없습니다." disabled>
</form>

min & max 속성

input 요소에 입력할 수 있는 최솟값과 최댓값을 명시하는 속성이다.

해당 속성은 다음과 같은 타입에서만 사용 가능하다.

• number, range (숫자 관련 입력필드)
• date, time, datetime-local, month, week (날짜 및 시간 입력 필드)

<form> 
  <input type="number" name="age" min="1" max="100"><br>
  <input type="date" name="birth" min="1994-01-01" max="2004-12-31">
</form>

step 속성

step 속성은 입력 가능한 숫자의 간격을 명시하는 속성이다. step="3"을 적용했을 경우, 입력 가능한 숫자의 범위는 -6, -3, 0, 3, 6.. 가 된다.

해당 속성은 다음과 같은 타입에서만 사용 가능하다.

• number, range (숫자 관련 입력필드)
• date, time, datetime-local, month, week (날짜 및 시간 입력 필드)

<form>
  <p>좋아하는 숫자를 입력해주세요. [ 단, 3의 배수인 정수만 가능 ]</p>
  <input type="number" name="favnum" min="0" step="3">
</form>

multiple 속성

multiple 속성은 input 요소에 값을 두 개 이상 입력하는 것을 허용해주는 속성이다.

해당 속성은 email과 file 타입에서만 사용할 수 있다.

<form>
  <input type="file" name="uploadfile" multiple><br>
  <input type="submit" value="전송">
</form>

pattern 속성

pattern 속성은 input 요소에 입력된 값을 검사하기 위한 정규 표현식을 명시하는 속성이다. 여기서 정규 표현식은 입력한 문자열에서 특정한 규칙을 가지는 문자열의 집합을 찾아내기 위한 검색 패턴을 말한다.

해당 속성은 text, password, email, tel, url 타입에서만 사용할 수 있다.

<form>
  <input type="email" name="email"
         pattern="[a-zA-Z0-9]+[@][a-zA-Z0-9]+[.]+[a-zA-Z]+[.]*[a-zA-Z]*" title="이메일 양식">
</form>

• [a-zA-Z0-9]: 영어 소문자, 영어 대문자, 숫자가 개수에 상관없이 나올 수 있음
• [@]: @만 나와야 함
• [.]: .만 나와야 함
• [.]*: .이 나올 수도 있고 안 나올 수도 있음
• [a-zA-Z]*: 영어 소문자, 영어 대문자가 나올 수도 있고 안 나올 수도 있음

checked 속성

checked 속성은 타입이 radio일 때 사용 가능한 속성으로, 라디오 버튼이 체크가 되도록 기본값을 부여한다. radio 타입은 name이 동일하게 부여된항목들 중 하나의 항목만 선택할 수 있기 때문에 checked 속성이 두 번 이상 사용되었을 경우 가장 나중에 사용된 항목에 속성이 적용된다.

---

select 태그

select 태그는 선택 목록 상자 혹은 드롭다운 리스트를 정의하는 태그이다. select 태그 내부에 option 태그를 사용하여 각 항목을 정의한다.

<select>
  <option value="apple">사과</option>
  <option value="peach">복숭아</option>
  <option value="melon">메론</option>
</select>

option 태그

option 태그는 select 태그의 자식 태그로, 드롭다운 목록에 표시되는 옵션들을 지정해준다.

option에서 사용할 수 있는 속성은 다음과 같다.

• value: 해당 옵션 선택 시 서버에 전송될 값을 정의
• selected: 화면에 표시될 기본 옵션을 지정

name 속성

name 속성은 드롭다운 리스트 이름을 명시하는 태그이다. input 태그의 name 속성과 마찬가지로 폼이 제출된 후 서버에 폼 데이터를 참조하기 위해 사용되거나, 자바스크립트에서 태그를 참조할 때 사용된다.

form 속성

form 속성은 드롭다운 리스트가 포함될 form 태그를 명시하는 속성이다.

<!-- form 속성을 사용하지 않았을 때 -->

<form action="https://naver.com" id="favorite">
  이름: <input type="text" name="name" required>
  <input type="submit"><br>
</form>

좋아하는 과일:
<select name="fruit">
  <option value="apple">사과</option>
  <option value="peach">복숭아</option>
  <option value="melon">메론</option>
</select>

• 예시: 이름은 홍길동, 좋아하는 과일은 사과

form 태그와 별개로 select 태그를 명시한 상황에서 예시와 같이 폼을 작성하고, submit 버튼을 눌러 전송하면 form 태그 안에 있는 input 태그의 데이터인 name=홍길동만 https://naver.com으로 이동하게 된다.

fruit=apple도 함께 전송하기 위해 사용하는 것이 form 속성이다. form 속성을 사용하지 않고, select를 form의 자식태그로 명시하는 것도 하나의 방법이다.

<!-- form 속성을 사용했을 때-->

<form action="https://naver.com" id="favorite">
  이름: <input type="text" name="name" required>
  <input type="submit"><br>
</form>

좋아하는 과일:
<select name="fruit" form="favorite">
  <option value="apple">사과</option>
  <option value="peach">복숭아</option>
  <option value="melon">메론</option>
</select>

required & disabled 속성

required 속성은 드롭다운 리스트의 옵션을 필수로 선택하도록 정의하는 속성이고, disabled 속성은 사용자가 옵션을 선택하지 못하도록 비활성화하는 속성이다.

disabled 속성과 required 속성이 한 태그에 같이 정의되어있을 경우 required 속성은 무시된다.

<select name="fruit" required>
  <option value="apple">사과</option>
  <option value="peach">복숭아</option>
  <option value="melon">메론</option>
</select>

size 속성

size 속성은 한 번에 보일 드롭다운 리스트의 옵션 개수를 정의하는 속성이다. 만약 size 속성보다 옵션 개수가 더 많을 경우, 드롭다운 리스트에 스크롤바가 추가된다.

<select name="fruit" size="3">
  <option value="apple">사과</option>
  <option value="peach">복숭아</option>
  <option value="melon">메론</option>
  <option value="orange">오렌지</option>
  <option value="kiwi">키위</kiwi>
</select>

multiple 속성

multiple 속성은 드롭다운 리스트 옵션을 복수 선택할 수 있도록 정의하는 속성이다. windows의 경우 ctrl이나 shift를 통해 옵션을 여러 개 선택 가능하다.

<select name="fruit" multiple>
  <option value="apple">사과</option>
  <option value="peach">복숭아</option>
  <option value="melon">메론</option>
  <option value="orange">오렌지</option>
  <option value="kiwi">키위</kiwi>
</select>

textarea 태그

textarea 태그는 여러 줄의 텍스트를 입력할 때 사용하는 태그이다. textarea 태그의 크기를 조절하는 속성으로는 rows와 cols가 있다.

• cols: 가로 크기를 조절하는 속성 (한 줄에 들어가는 글자 수)
• rows: 세로 크기를 조절하는 속성 (화면에 보여지는 줄 수)

<!-- input type="text"는 한줄 -->
<input type="text" size="50"/>

<!-- textarea는 여러 줄 -->
<textarea cols="50" rows="5"> </textarea>

label 태그

label 태그는 폼 태그에 이름, 텍스트를 붙이는 태그이다. 만약 label이 없을 경우 무수히 많은 텍스트 입력 필드들을 보며, 어떤 값을 입력해야 하는지 혼란스러울 것이다.

label 태그는 입력 필드에 이름을 붙여줄 뿐만 아니라 이름을 누르면 해당 label 태그와 연결된 요소에 포커스를 맞춰 준다. 또한 스크린 리더기를 사용할 경우 해당 요소에 접근 시 label을 함께 읽어줘 웹 접근성 측면에서도 중요한 역할을 한다.

label 태그를 input과 연결시키는 방법에는 두 가지가 있다.

<!-- 첫 번째 방법 -->
<label>이름 : <input type="text"></label>

<!-- 두 번째 방법 -->
<label for ="user-name">이름 : </label>
<input type="text" id="user-name">

fieldset & legend 태그

fieldset 태그와 legend 태그는 폼 요소를 구조화하기 위해 그룹으로 묶을 때 사용하는 태그이다. 이를 사용할 경우 까만 테두리가 생성된다.

• <fieldset>: 여러 폼 요소를 그룹화하기 위해 사용
• <legend>: 폼 요소의 제목. fieldset 태그 최상단에 작성