🎲 목표: 사용자의 데이터를 입력받기 위해 중요한 form&input 태그 뽀개기~~

▶ 목차

🔎 form
🔎 label
🔎 button
🔎 input
🔎 select & option
🔎 textarea

뭐가 너무 많아서 헷갈리는데 🔎가 붙은 건 tag고, 🖍로 표시된 건 attribute!

🔎 form

테이블로 치면 <table>같은 역할! <table>이 <tr>, <td>, <th>, <thead> 등을 감싸듯이 <form>도 <input>, <button> 등을 그룹핑한다. 하지만 단순히 묶는 것을 넘어서 submit된 데이터를 어디로 보내야 하는지 알려 줌!

🖍 action="URL"

form을 submit하면 HTTP request를 보내게 되고, action 속성을 통해 해당 요청을 어디로 보낼지 지정할 수 있음. 데이터가 도착할 URL.

🖍 autocomplete="on"/"off"

자동완성기능. 속성값을 on으로 주면 사용자의 과거 입력값에 기반해 브라우저가 자동으로 값을 채워 넣음.

🖍 method="get","post" 등

양식을 submit할 때 사용할 HTTP method

• post: 데이터를 요청 본문으로 전송함
• get(defualt): 데이터를 [action의 url] + [?] 뒤에 이어붙여 전송함

🖍 target="_blank", "_self" 등

sumbit 후 서버로부터 받은 응답을 어떻게 표시할지 관리하는 속성

• _blank: 새 탭이나 윈도우로 열기
• _self(defualt): 링크가 위치한 현재 프레임에서 열기
• _parent: 현재 프레임의 부모 프레임에서 열기

🔎 label

• 어떤 text가 어떤 input에 대한 것인지 연관시켜 주는 태그 (label의 text를 클릭하면 연결된 input이 활성화됨!)
• 관련된 label의 for과 input의 id가 일치해야 한다
• input 앞에 위치해도, 뒤에 위치해도 상관없음!

<label for="username">What's your name?</label>
<input type="text" name="username" id="username" placeholder="enter your name!">

<input type="checkbox" id="cheese"><label for="cheese"> I like cheese</label>

결과🔻

What's your name?

I like cheese

벨로그 포스팅에서는 label의 텍스트를 누르면 해당 input이 활성화되는 기능이 안 먹힌다. 🙄

🔎 button

form 태그의 attribute 속성에 따라 submit됨

🖍 type="submit", "reset", "button"

• submit(default): 서버로 양식 데터를 제출함
• reset: 모든 컨트롤을 초깃값으로 돌림
• button: 클릭했을 때 아무것도 나타나지 않음 (기본행동이 없음)

🖍 autofocus

페이지 로드 후 자동으로 해당 버튼에 포커스를 주는 속성 (한 페이지당 하나의 요소만 autofocus를 가질 수 있음!)

🖍 disabled

누르거나 클릭하는 것을 막음 (데이터 입력 전에 submit하는 걸 방지할 수 있을 듯!)

🔎 input

form에서 가장 중요한 input 태그! type에 따라 여러 가지 입력 양식을 만들 수 있고, 클로징 태그가 없는 게 특징. id, name, value 등의 속성은 실제로 화면에 구현되지는 않지만 데이터 연결을 위해 중요함!

🖍 type

• input의 양식을 지정하는 속성
• 많이 쓰이는 text, password, number부터 checkbox, range, radio, color, date, weak, month 등...... 매우매우 다양

🖍 name

• submit했을 때 action으로 주어진 url 뒤에 덧붙여 전달되는 값
• {attribute 속성값}?{name}={입력받은 data} 의 형태

🖍 id

label의 for 속성값과 매치되어야 하는 속성

🖍 placeholder

• text, password, number 등 직접 타이핑 가능한 input 요소에서 아무것도 입력하지 않았을 때 디폴트로 보여주는 값
• 사용자가 값을 입력하면 자동으로 사라짐 (value와의 차이)

🖍 value

• text를 타이핑해야 하는 input 요소에 value를 설정할 경우, 페이지 로드시 value값이 입력된 상태로 나타남 (사용자가 직접 value값을 지워야 하며, 지우면 placeholder값이 나타남)
• checkbox, radio 등의 input에 value를 설정하면, submit되었을 때 name과 함께 value값이 전달됨! (설정하지 않을 경우 선택여부에 따라 on/off로 표시)

🖍 required

입력 데이터가 없을 경우 submit하지 못하도록 하는 속성

🖍 minlength/maxlength, min/max

사용자의 입력값이 유효한 값이 되도록 범위를 제한하는 속성들!
input 값이 text 형식인 경우 minlength/maxlength 속성을 통해 입력해야 하는 최소/최대의 글자수를 지정할 수 있다. 마찬가지로 input 값이 number인 경우(number, date, range 등) min/max로 최솟값/최댓값을 지정할 수 있다.

🖍 pattern

마찬가지로 사용자의 입력값이 유효하도록 형태를 지정하는 속성!
정규표현식(Regular Expression)을 통해서 문자와 숫자가 포함되어야 하는지 등 패턴을 지정할 수 있음.

🖍 아래부터는 다양한 input type들

📋 type="text"

<lable for="mood">How are you today?</lable>
<input type="text" id="mood" name="mood" placeholder="Today I am...">

결과🔻
How are you today?

📋 type="number"

<lable for="age">How old are you?</lable>
<input type="number" id="age" name="age" placeholder="20" min="1" max="100">

결과🔻
How old are you?

📋 type="radio"

• checkbox와 다른 점: radio의 경우 여러 개의 input 중 한 가지만 선택할 수 있다
• 그룹화할 보기들은 동일한 name을 가져야 함!

<label for="xs">XS</label>
<input type="radio" name="size" id="xs" value="xs">
<label for="s">S</label>
<input type="radio" name="size" id="s" value="s">
<label for="m">M</label>
<input type="radio" name="size" id="m" value="m">

결과🔻
XS
S
M

label을 누르면 원래 연결된 radio input이 선택되어야 하는데... 벨로그에선 이것도 안 먹힌다 😒 그리고 원래 같은 name을 가진 input 중 하나만 선택되어야 하는데 여기선 중복선택도 되는 듯?? 머야 참나;;

📋 type="range"

<label for="volume">🔊</label>
<input type="range" id="volume" name="volume" min="0" max="100">

결과🔻
🔊
range에서도 value 속성으로 디폴트값을 설정할 수 있음!

🔎 select & option

• 아래로 펼쳐지는 드롭다운 박스를 만들 수 있는 태그!
• option에 selected 속성을 추가하면 해당 옵션이 디폴트로 선택되어 나타남

<select name='fruits'>
  <option value='' selected>-- 선택 --</option>
  <option value='apple'>레몬</option>
  <option value='banana'>딸기</option>
  <option value='lemon'>블루베리</option>
</select>

🔎 textarea

일반 input의 text보다 많은 텍스트를 입력해야할 때 사용하면 좋을 태그!
rows, cols로 영역의 크기를 지정할 수 있음

<textarea rows="10" cols="50" placeholder="입력하세요!"></textarea>

🙇‍♀️참고한 자료

코딩의 시작, TCP School