1. form 태그

사용자로부터 입력을 받기 위한 양식을 작성하는 태그들을 통틀어 form이라고 합니다.

🙋 꼭 form 태그로 묶어 주어야 하나요?

form 태그는 입력한 데이터를 제출, 전송하기 위해 사용하는 태그입니다. 별도 제출할 필요가 없다면 form 태그를 사용하지 않으셔도 됩니다.

ex) 단순히 입력받은 값을 화면에 뿌려주는 용도일 경우 (계산기 등)

<!DOCTYPE html>
<html lang="ko-KR">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>이름 입력받기</title>
  </head>
 
  <body>
    <label
      >이름
      <input id="text" type="text" />
    </label>
    <button id="button" type="button">입력</button>
    <p>이름:<strong id="strong"></strong></p>
    <script>
      const inputText = document.querySelector('#text');
      const button = document.querySelector('#button');
      const strong = document.querySelector('#strong');
 
      button.addEventListener('click', function () {
        strong.innerHTML = inputText.value;
      });
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="ko-KR">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>이름 입력받기</title>
  </head>
 
  <body>
    <label
      >이름
      <input id="text" type="text" />
    </label>
    <button id="button" type="button">입력</button>
    <p>이름:<strong id="strong"></strong></p>
    <script>
      const inputText = document.querySelector('#text');
      const button = document.querySelector('#button');
      const strong = document.querySelector('#strong');
 
      button.addEventListener('click', function () {
        strong.innerHTML = inputText.value;
      });
    </script>
  </body>
</html>

1.1 method 속성

양식을 제출할 때 사용할 HTTP 메서드

1. Get 메서드

<form method="get" action="http://naver.com">
  <div>
    <label for="user-name">이름</label>
    <input id="user-name" type="text" name="name" />
  </div>
  <div>
    <label for="user-age">나이</label>
    <input id="user-age" type="number" name="age" />
  </div>
  <button type="submit">버튼</button>
</form>

<form method="get" action="http://naver.com">
  <div>
    <label for="user-name">이름</label>
    <input id="user-name" type="text" name="name" />
  </div>
  <div>
    <label for="user-age">나이</label>
    <input id="user-age" type="number" name="age" />
  </div>
  <button type="submit">버튼</button>
</form>

https://example.com**?name=홍길동&age=20**
양식 데이터를 action URL과 ? 구분자 뒤에 이어 붙여서 전송.
GET 방식의 HTTP 요청은 브라우저에 의해 캐시되어 저장
보통 쿼리 문자열에 포함되어 전송되므로 길이의 제한이 있음(URL 길이제한은 브라우저마다 다름)
보안상 취약점이 존재하므로, 중요한 데이터는 POST 방식을 사용하여 요청

2. Post 메서드

폼 데이터를 별도로 첨부하여 서버로 전달하는 방식.
브라우저에 의해 캐시되지 않고, 브라우저 히스토리에도 남지 않음.
POST 방식의 HTTP 요청에 의한 데이터는 쿼리 문자열과는 별도로 전송
데이터의 길이제한이 없고, GET 방식보다 보안성이 높음.

	POST	GET
전송	양식 데이터를 요청 본문으로 전송	https://example.com?name=홍길동&age=20
캐시	X	O
길이제한	X	O
보안	GET 방식보다 높음	취약

1.2 enctype 속성

text/plain : 디버깅용 및 단순 텍스트 전송, 개발용으로만 사용 권장
application/x-www-form-urlencoded: 기본값(일반 텍스트만 전송)

multipart/form-data: 파일을 업로드할때(<input type="file">이 존재하는 경우) 사용

<form action="http://localhost:8000/"
method="post"
enctype="multipart/form-data"
>
  <input type="text" name="myTextField">
  <input type="checkbox" name="myCheckBox">Check</input>
  <input type="file" name="myFile">
  <button>Send the file</button>
</form>

<form action="http://localhost:8000/"
method="post"
enctype="multipart/form-data"
>
  <input type="text" name="myTextField">
  <input type="checkbox" name="myCheckBox">Check</input>
  <input type="file" name="myFile">
  <button>Send the file</button>
</form>

1.3 action 속성

양식 데이터를 처리할 프로그램의 URL을 적어줍니다.
데이터를 어디로 보낼것인지 지정합니다. 이 값은 반드시 유효한 URL 이어야 합니다.
이 속성을 지정하지 않으면 데이터는 form이 있는 페이지의 URL로 보내집니다.

1.4 autocomplete 속성

브라우저의 자동 완성 기능을 제어하는 속성입니다. 사용자가 이전에 입력했던 값을 브라우저가 기억하고 다시 제안할지 여부를 결정합니다.

off 자동입력 X

on 자동입력 O(기본값)

2. input 태그

input element | MDN

2.1 공통 속성

type	input 양식 컨트롤의 유형 (button, text, email, file…)
name	input 양식 컨트롤의 이름
value	input 양식 컨트롤의 값
autocomplete	on/off 양식 자동완성 기능에 대한 힌트(check, radio 제외)
palceholder	양식 컨트롤이 비어있을 때 나타나는 내용(입력에 대한 힌트 제공 - 숫자, 문자 조합의 6자 이상)
required	양식 전송을 위해 필수로 입력해야하는 값
disabled	비활성화
readonly	수정불가(읽기전용)

readonly vs disabled

readonly: 사용자가 입력할 수 없으나 value가 있다면 값을 넘길수 있음

disabled: 사용자가 입력할 수 없고 기존 value가 있어도 넘길 수 없음

2.2 type 속성

<input type=”___”>

button	버튼. 기본행동 없음. value로 버튼 텍스트 표시
text	텍스트 입력
email	이메일 입력
tel	전화번호 입력
password	비밀번호 입력(값이 가려짐)
url	웹페이지 주소 입력
checkbox	단일 값을 선택하거나 선택 해제
radio	선택 항목중 하나만 선택
date	날짜 입력(년,월,일) - 시간 없음
datetime-local	날짜와 시간을 지정
month	연과 월 입력
time	시간 입력
file	파일 업로드
color	색 선택
number	숫자 입력
range	슬라이드 바 형태
search	검색 문자열 입력(삭제 아이콘 포함)
reset	form 내용을 기본값으로 초기화
submit	양식 전송
hidden	보이지 않지만 값은 서버로 전송하는 컨트롤

🤔 Q. 그냥 email, tel, url, number 같은 경우 text로 값을 받아도 되지 않나요?

type을 통해 어떤 데이터를 받는지 예측할 수 있습니다. 코드의 가독성이 좋아집니다.
모바일에서 type에 따른 키패드 UI가 조금씩 다릅니다! 적절한 input type은 사용자의 경험을 개선시킬 수도 있습니다.

아래는 모바일에서의 키패드 이미지입니다

text/search

email

password

url

tel

number

button, reset, submit

<button type=”___”> 태그와 동일한 기능을 수행합니다.

<input type="button" value="버튼" />
<input type="reset" value="초기화" />
<input type="submit" value="전송" />
 
<button type="button">버튼</button>
<button type="reset">초기화</button>
<button type="submit">전송</button>

<input type="button" value="버튼" />
<input type="reset" value="초기화" />
<input type="submit" value="전송" />
 
<button type="button">버튼</button>
<button type="reset">초기화</button>
<button type="submit">전송</button>

text / password / url / search / tel

maxlength: 문자수 최대 길이
minlength: 문자수 최소 길이

checkbox / radio

checkbox: 다중선택이 가능한 체크박스. 하나의 체크박스를 선택하거나 해제해도 다른 체크박스에는 영향을 미치지 않습니다.

<fieldset class="fieldset">
  <legend>사용 기술</legend>
 
  <input type="checkbox" name="skill" id="html" />
  <label for="html">HTML</label>
 
  <input type="checkbox" name="skill" id="css" />
  <label for="css">CSS</label>
 
  <input type="checkbox" name="skill" id="js" />
  <label for="js">JavaScript</label>
 
  <input type="checkbox" name="skill" id="python" />
  <label for="python">Python</label>
 
  <input type="checkbox" name="skill" id="django" />
  <label for="django">Django</label>
</fieldset>

<fieldset class="fieldset">
  <legend>사용 기술</legend>
 
  <input type="checkbox" name="skill" id="html" />
  <label for="html">HTML</label>
 
  <input type="checkbox" name="skill" id="css" />
  <label for="css">CSS</label>
 
  <input type="checkbox" name="skill" id="js" />
  <label for="js">JavaScript</label>
 
  <input type="checkbox" name="skill" id="python" />
  <label for="python">Python</label>
 
  <input type="checkbox" name="skill" id="django" />
  <label for="django">Django</label>
</fieldset>

raido: 같은 name 값을 가진 여러개의 선택 옵션중에서 하나의 값만 선택할 수 있습니다.

<fieldset class="fieldset">
  <legend>성별</legend>
  <input type="radio" name="gender" value="male" id="male" />
  <label for="male">남성</label>
 
  <input type="radio" name="gender" value="females" id="female" />
  <label for="female">여성</label>
 
  <input type="radio" name="gender" value="no" id="no" />
  <label for="no">선택 안함</label>
</fieldset>

<fieldset class="fieldset">
  <legend>성별</legend>
  <input type="radio" name="gender" value="male" id="male" />
  <label for="male">남성</label>
 
  <input type="radio" name="gender" value="females" id="female" />
  <label for="female">여성</label>
 
  <input type="radio" name="gender" value="no" id="no" />
  <label for="no">선택 안함</label>
</fieldset>

checked: 체크 여부

file

파일을 지정할 수 있습니다.
accept: 허용하는 파일 유형을 지정할 수 있습니다.
multiple: 지정할 경우 사용자가 여러개의 파일을 선택할 수 있습니다.

<label for="profile">프로필 이미지</label>
<input type="file" id="profile" name="profile" accept="image/png, image/jpeg" />

<label for="profile">프로필 이미지</label>
<input type="file" id="profile" name="profile" accept="image/png, image/jpeg" />

number

숫자 입력. 화살표 컨트롤 제공
max: 최대값
min: 최소값
step: 증가값

2.3 name 속성

name 속성은 각 폼 요소에 고유한 이름을 부여합니다.
서버가 어떤 데이터인지 식별할 수 있게 합니다.
모든 input, select, textarea 요소에 필수적으로 설정됩니다.

2.4 value 속성

value 속성은 사용자가 입력한 값이나 기본 값을 나타냅니다.
폼이 제출될 때, name 속성의 값과 함께 서버로 전송됩니다.
주로 input 요소에 사용됩니다.

name과 value 속성은 이름/값(name/value)의 짝으로 양식과 함께 전송됩니다

3. label 태그

사용자 인터페이스의 항목을 나타냅니다.
input과 함께 사용해주세요!
- 스크린리더기에서 입력해야 하는 내용이 무엇인지 사용자에게 쉽게 이해할 수 있게 합니다.
- label을 클릭하여 input에 포커스를 이동시키거나 활성화 시킬 수 있습니다.

for-id를 이용해 연결하기

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

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

label 안에 input 중첩하여 연결하기

두 가지 방법 모두 HTML 표준에 맞으며, 상황에 따라 적절한 방법을 선택하여 사용하면 됩니다. 간단한 폼에서는 <label> 안에 <input>요소를 중첩하는 방법을 쓰기도 하고, 복잡한 레이아웃이 필요한 경우에는for및id 속성을 이용해 연결하는 방법이 더 적합합니다.

<label>
  아이디
  <input type="text" />
</label>

<label>
  아이디
  <input type="text" />
</label>

label 안에 a 또는 button 과 같은 인터랙티브 요소를 배치하지 말 것!

스크린 리더는 label 태그의 텍스트를 해당 폼 요소의 설명으로 읽습니다. a 또는 button 같은 인터랙티브 요소가 포함되면, 스크린 리더 사용자가 혼란스러울 수 있습니다. 또한 label 태그를 클릭하면 연관된 폼 요소에 포커스가 맞춰져야 합니다. 그러나 내부에 다른 인터랙티브 요소가 있으면 클릭 이벤트가 예상치 못한 동작을 할 수 있습니다.

label 안에 제목태그(h)를 배치 하지 말 것!

form에 제목이 필요한 경우 fieldset legend 사용하기

<input type="button">이 value 속성을 가지고 있다면 <label>요소가 필요하지 않습니다.value 속성의 값이 이미 버튼의 텍스트로 표시되므로, 사용자는 버튼의 목적을 이해할 수 있습니다

<input type="button" value="button" /> <button type="button">button</button>

<input type="button" value="button" /> <button type="button">button</button>

4. select 태그

옵션 메뉴를 제공합니다.

multiple : 여러개의 항목을 동시에 선택할 수 있습니다.
size : 한번에 노출되는 항목의 수를 조절합니다.
required : 선택 필수
disabled : 선택 불가

4.1 option

메뉴의 각 옵션을 정의합니다.
모든 option 은 자신이 선택됐을 때의 값으로 사용할 value 속성이 필요합니다.
- 지정하지 않은 경우, option 내 텍스트 값으로 사용합니다.
selected 특성을 지정하면 해당 옵션을 선택한 상태로 페이지를 불러옵니다.

<select name="options" required>
  <option value="">옵션 선택하기</option>
  <option value="1">FE</option>
  <option value="2">BE</option>
</select>

<select name="options" required>
  <option value="">옵션 선택하기</option>
  <option value="1">FE</option>
  <option value="2">BE</option>
</select>

4.2 optgroup

option 요소를 optgroup 요소 안에 배치하면 드롭다운 내에서 옵션그룹을 나눌 수 있습니다.

<label for="language">사용하는 개발 언어를 선택하세요</label>
<select id="language" name="language">
  <optgroup label="프로그래밍 언어">
    <option value="python">Python</option>
    <option value="javascript">JavaScript</option>
    <option value="java">Java</option>
    <option value="csharp">C#</option>
  </optgroup>
  <optgroup label="데이터베이스">
    <option value="mysql">MySQL</option>
    <option value="postgresql">PostgreSQL</option>
    <option value="mongodb">MongoDB</option>
    <option value="sqlite">SQLite</option>
  </optgroup>
</select>

<label for="language">사용하는 개발 언어를 선택하세요</label>
<select id="language" name="language">
  <optgroup label="프로그래밍 언어">
    <option value="python">Python</option>
    <option value="javascript">JavaScript</option>
    <option value="java">Java</option>
    <option value="csharp">C#</option>
  </optgroup>
  <optgroup label="데이터베이스">
    <option value="mysql">MySQL</option>
    <option value="postgresql">PostgreSQL</option>
    <option value="mongodb">MongoDB</option>
    <option value="sqlite">SQLite</option>
  </optgroup>
</select>

🙋‍♀️ select를 CSS로 꾸미고 싶어요

select 요소는 CSS를 사용해 스타일을 적용하기 어렵습니다. 물론 간단한 border, font, background 등의 일부 스타일을 바꿀 수는 있습니다. appearance 속성을 사용하면 기본 브라우저를 통해 설정된 외형을 제거할 수도 있습니다.

하지만, 브라우저별 해당 내부 구조가 복잡하기 때문에 select를 클릭했을때의 모습등 원하는 모습으로 완전히 커스텀 하기에는 어렵습니다. 그래서 select가 아닌 다른 html 요소들과 JavaScript 등을 사용해 완전히 별도의 드롭다운 메뉴를 만들어야 합니다!

5. fieldset 태그

다양한 선택 항목을 그룹화하는 태그입니다.
disabled 를 사용할 경우 모든 자손 컨트롤을 비활성화합니다.
<legend> 태그와 함께 사용하면 그룹의 제목을 지정할 수 있습니다.

5.1 legend

그룹의 제목을 제공합니다.

<fieldset>
  <legend>여행 선호도</legend>
  <input type="radio" name="travel" value="mountains" id="mountains" />
  <label for="mountains">산</label>
  <input type="radio" name="travel" value="beach" id="beach" />
  <label for="beach">바다</label>
  <input type="radio" name="travel" value="city" id="city" />
  <label for="city">도시</label>
  <input type="radio" name="travel" value="countryside" id="countryside" />
  <label for="countryside">시골</label>
</fieldset>

<fieldset>
  <legend>여행 선호도</legend>
  <input type="radio" name="travel" value="mountains" id="mountains" />
  <label for="mountains">산</label>
  <input type="radio" name="travel" value="beach" id="beach" />
  <label for="beach">바다</label>
  <input type="radio" name="travel" value="city" id="city" />
  <label for="city">도시</label>
  <input type="radio" name="travel" value="countryside" id="countryside" />
  <label for="countryside">시골</label>
</fieldset>

6. datalist 태그

<datalist> 태그는 <input> 요소에 미리 정의된 옵션 목록을 제공하는 태그입니다. 사용자가 입력할 때 자동완성 드롭다운 목록을 표시하여 선택할 수 있게 해줍니다.
input과 select 기능을 합친 개념입니다.
사용자에게 기본적으로 선택할 수 있는 옵션을 제공하고, 옵션값에 원하는 값이 없을 경우 사용자가 다른 값을 입력할 수 있도록 합니다.
<datalist> 내부에 <option> 요소들을 추가한 후, <input> 요소의 list 속성에 <datalist>의 id를 지정하여 입력필드와 연결합니다.

<label for="city">도시 검색:</label>
<input list="cities" id="city" name="city" placeholder="도시 이름 입력" />
<datalist id="cities">
  <option value="서울"></option>
  <option value="부산"></option>
  <option value="인천"></option>
  <option value="대구"></option>
  <option value="광주"></option>
  <option value="대전"></option>
  <option value="울산"></option>
  <option value="제주"></option>
</datalist>

<label for="city">도시 검색:</label>
<input list="cities" id="city" name="city" placeholder="도시 이름 입력" />
<datalist id="cities">
  <option value="서울"></option>
  <option value="부산"></option>
  <option value="인천"></option>
  <option value="대구"></option>
  <option value="광주"></option>
  <option value="대전"></option>
  <option value="울산"></option>
  <option value="제주"></option>
</datalist>

label 요소의 for 속성과 input 요소의 id 속성, 그리고 datalist 요소의 id 속성을 모두 같은 값을 사용하게 되면 요소 간의 혼동을 일으켜 자동 완성이 제대로 작동하지 않게 만듭니다. 다른 이름으로 지정해주는게 좋습니다.(위 예시의 경우 city와 cities로 다르게 지정되었습니다.)

7. textarea 태그

여러줄의 text를 입력받을 수 있습니다.

7.1 text 속성

cols: 입력창의 너비. 문자의 평균적인 넓이를 기준으로 합니다.
rows: 기본적으로 보여줄 입력 줄 수 를 의미합니다.
maxlength: 사용자가 입력할 수 있는 문자 최대 길이입니다.
minlength: 사용자가 입력해야 할 문자 최소 길이입니다.
placeholder: 컨트롤에 무엇을 입력해야하는지 알려주는 힌트

<textarea
  rows="10"
  cols="50"
  minlength="10"
  maxlength="100"
  placeholder="10자 이상 100자 이하로 내용을 입력해주세요"
></textarea>

<textarea
  rows="10"
  cols="50"
  minlength="10"
  maxlength="100"
  placeholder="10자 이상 100자 이하로 내용을 입력해주세요"
></textarea>

하단 우측의 시각적 레이블과 <label> 태그로 입력박스가 50자 이내 글자 수 제한이 있음을 정보 안내하고 있어 스크린리더 사용자가 글자 수 제한이 있다는 정보를 입력 전에 알 수 있습니다.

8. button 태그

사용자가 클릭하여 상호작용 할 수 있는 요소입니다.
form 내부뿐만 아니라 버튼이 필요한 곳이라면 어디에든 배치할 수 있습니다.

8.1 button의 타입

button: 기본 행동이 없습니다. 클릭했을 때 아무것도 하지 않습니다. JavaScript와 연결하여 사용합니다
- <button>의 기본타입 입니다.
- 양식 제출용이 아니라면 타입을 꼭 button으로 지정해주세요!
submit: 서버로 양식 데이터를 제출합니다.
- <form> 태그 내부에 위치해있는 <button>의 기본 타입은 submit 입니다.
reset: <input type="reset"> 과 동일하게 초깃값으로 되돌립니다.

<input type="button" value="버튼" />
<input type="reset" value="초기화" />
<input type="submit" value="전송" />
 
<button type="button">버튼</button>
<button type="reset">초기화</button>
<button type="submit">전송</button>

<input type="button" value="버튼" />
<input type="reset" value="초기화" />
<input type="submit" value="전송" />
 
<button type="button">버튼</button>
<button type="reset">초기화</button>
<button type="submit">전송</button>

🤔 어떤걸 써야할까? <input type=”button” value=”버튼”> <button type=”button">버튼</button>

<button> 안에는 텍스트뿐만 아니라 이미지, 아이콘, 다양한 HTML 요소를 넣을 수 있습니다. <input>의 경우 텍스트만 포함할 수 있고(value 속성을 통해), 다른 HTML 요소를 자식으로 가질 수 없습니다.

disabled: 누르거나 클릭하는 것을 막습니다.
- ex) 필수 입력정보를 다 입력하지 않았을 땐 disabled, 입력한 후 해제 처리

<a> vs <button> 두개는 어떤 차이가 있을까요?

a vs button 오른쪽 마우스 클릭, shift + click, cmd + click 마우스오버, 포커스가 되었을 때 url 브라우저 창 하단에 노출된다

	a	button
역할	하이퍼링크	사용자의 동작 실행을 위한 트리거
기능	다른 페이지 혹은 페이지 내의 특정 영역으로 이동	브라우저 기본동작 없음. JS를 이용하여 동작 추가 (submit: form 전송 / reset: form 초기화)
키보드	엔터	스페이스, 엔터
주의	href 값 없이 JS로 동작하게 하면 안됨!	JS로 동작

주의하기!

마우스커서의 모양 변경을 위해서 a 태그를 사용해서는 안됩니다.
- CSS의 cursor:pointer 로 처리합시다
button focus가 예쁘지 않아서 outline을 숨기면 안됩니다.
- focus도 예쁘게 디자인 하도록 합시다!
누르는 효과를 주기위해서 button을 사용해서도 안됩니다.
- CSS로 스타일링 해줍시다!
li, /images, span 등 다른 태그에 JS 기능으로 버튼처럼 만들면 안됩니다! - 각 태그는 각자의 역할이 있습니다. 역할에 맞게, 시맨틱하게 사용합시다!

🌐 접근성 측면에서, 버튼의 최소 44x44px 크기를 권고합니다.

운동 조절 장애, 마우스가 아닌 터치스크린과 같은 정확하지 않은 입력 도구를 사용하는 사용자에게 도움이 될 수 있습니다!

아래 그림대로 만들어보기!

HTML/CSS 에센셜

양식(form)