Forms

1. 서론
Think of the times you’ve had to fill out information for various applications like a job, or a bank account, or dropped off a completed suggestion card — each instance is a form!

이런 물리적 form처럼, Html의 <form>요소는 정보를 다른 곳에 보내기 위해 모으는 역할을 한다


2. How a Form Works
컴퓨터는 상호소통을 하기 위해선 HTTP request가 필요한데, HTTP는 전달받은 정보들을 어떻게 다룰지를 알려준다
Form요소는
-어디로 정보를 보낼지
-어떤 HTTP방식을 할 것인지
를 결정하기위해 공급해 주어야한다

<form>의 예시

위의 예시) POST 요청으로, example.html로 정보를 보내겠다!라는 의미
action 속성 : 어디로 정보를 보낼지 결정
method 속성 : http의 동작방식을 결정 (꼭 대문자로 쓸 필요는 없지만, 관례상 그렇게 함)

<form>요소 또한 자식 요소를 가질 수 있는데,
예를 들어,
             header를 제공하여, 이 form이 무엇인지 알려줄 수 있고
             paragraph를 추가하여 상세정보를 줄 수도 있다


3. Text Input
- <input> : type 속성 (웹 페이지에서 어떻게 전달될지, 어떤 종류가 전달될지 결정)
                              : text = user가 타이핑을 통해 입력할 수 있는 text field를 생성
                name 속성 (input 안 정보의 이름, name없이는 form이 제출되어도 정보는 전달되지 않음)

 

<form>예시 1

처음은 빈칸이지만, 정보를 입력하여 넘겨주면
(위의 예시) value 속성의 값은 우리가 입력해주는 값이 되며, 이 값은 name속성과 짝지어진다
form이 submit될 때, "first-text-field=important details"같이 text형식으로 /example.html로 보내진다

하지만, 미리 default값을 정해줄 수도 있다
value = "already pre-filled"를 적으면
처음부터 빈칸에 "already pre-filled"가 적혀있다


4. Adding Label
<input>을 구분하기 위해서는 label이 필요하다
- <label> : open tag + text + clos tag
<input>과 <label>을 연관짖기 위해서는, <input>이 id 속성을 필요로 한다
<label>의 for속성과 <input>의 id속성을 연결시켜준다

<label> associated with <input>

위 그림과 같이, 이제 사용자는 input 요소가 무엇을 위한 것인지 알 수 있다
                     또한 label을 누르면 input 요소가 강조된다


5. Password Input
password나 Pin번호를 <form>에 입력할 때, 정보들은 보이지 않는다
-> <input>의 type요소를 "password"로 설정
     type="password"은 *나 •으로 표기하게 한다

<input type="password">

6. Number Input
text뿐만 아니라, number형태의 정보도 넘길 수 있다
-> type = "number"
    정보를 숫자로만 한정시킬 수 있다 (또는 +나 .같은 것들도)
또한 step속성을 통해 input값을 증가, 감소시킬 수도 있다

<input type="number">

7. Range Input
위의 경우에, 숫자를 제한하고 싶은 경우
-> type="range"
    slider를 통해 정보 제공
min과 max속성을 부여하면서 제한할 수 있다
또한 step을 이용해 슬라이더의 매끄러운 정도를 지정할 수 있다 (숫자가 낮을수록 매끄럽게)

<input type="range">

슬라이더가 움직이면, input의 value의 값이 변한다

span태그를 사용하여 작성할 수 있다

8. Checkbox Input
여러 개의 선택지를 사용자에게 주고 싶을 때
-> type="checkbox"

<input type="checkbox">

위 코드를 보면 value속성에 값들이 할당되어있는데, 이 값들 자체는 보이지 않는다
checkbox를 구분하기 위해 관련된 <label>을 사용하기에 중요하다
각 input은 name속성과 같은 값을 가지는데, 각 input은 <label>과 짝 짖기위해 특정 <id>를 가진다
(더 공부 필요)


9. Radio Button Input
checkbox와 다르게 하나의 option만을 선택하는 것을 요구하는 경우도 있다
-> type="radio"

<input type="radio">

checkbox처럼 value의 값들은 보이지 않는다
또한 <label>과 연관시켜 표현한다
두 radio buttons을 그룹화시키기 위해서, 우린 같은 name을 부여한다


10. Dropdown List
정렬된 리스트 속에서 option을 선택할 때 유용하다

dropdown list

-> <select> : 자식 요소로 <option> 요소를 넣어준다
정보가 보내질 땐, <select>의 name과 <option>의 value가 함께 보내진다
ex. "lunch=pizza"


11. Datalist Input
너무 많은 option들이 있을 경우, 스크롤을 내리기가 어렵다
이 경우 datalist를 사용한다

<datalist>

datalist는 <input type="text">와 함께 사용한다 (text field를 생성)
input 요소 안에는 list라는 속성을 가지고, 이 속성과 <datalist>의 id를 연결지어
input과 datalist를 연관시킨다
데이터가 보내질 땐, 역시 <input>의 name과 <option>의 value가 함께 보내진다
입력하는 데이터가 match되지 않아도, 쓴 데이터 그대로 전송이 된다


12. Textarea element
블로그 post같은, 간단한 text외의 더 많은 정보들을 입력하기 위해 사용한다
-> <textarea>

<textarea>

더 확장을 원한다면 구석을 드래그하여 확장시킬 수 있다
box안에 쓰이는 정보들은 <textarea>의 value가 되고, default정보를 쓰고 싶다면
<textarea>Adding default text</textarea>
로 쓸 수도 있다


13. Submit Form
form의 목적은 제출되는 정보들을 모으기 위함이다
제출 할 경우엔 -> <input type="submit">

<input type="submit">

value는 default text를 의미

 

이번 포스팅 : form의 다양한 요소들
다음 포스팅 : form validation