[4일차] Forms

<form>

 

Form은 정보를 입력하는 양식.

Form에 입력하고 제출하게 되면 데이터는 서버로 전송되고, 전송된 데이터는 웹서버가 처리하고, 처리 후 로그인 결과와 같은 다른 웹페이지를 클라이언트에 전송한다.

 

 

 

Form 동작방식

1. 웹 페이지에 있는 form에 데이터를 입력
2. 웹 페이지 내 액션이 일어나게 되면 데이터는 웹 서버로 이동한다.
3. 웹 서버는 데이터를 처리하기 위해 APP을 호출한다. 이때 APP은 물리적으로 별도의 서버일 수도 있다.
4. 필요에 따라 APP은 DB로 데이터를 전송한다. 이때 DB는 물리적으로 별도의 서버일 수도 있다.
5. DB에서 CRUD 작업이 일어나고 작업 결과를 APP으로, WEB으로 전송한다.
6. 웹 서버는 받은 결과를 Client 브라우저에게 보낸다.
7. 사용자 브라우저는  Response 받은 페이지를 렌더링하여 사용자에게 보여준다.

 

Form의 속성

 

action과 method 속성을 가짐

 

action: 입력값을 전송할 페이지를 나타낸다. 속성값이 빈 값이면 현재 문서가 전송받게 된다.

method: <form>의 데이터를 전송할 방법을 정의한다.  method의 속성에는 get과 post가 있다.

            get은 웹 서버에 데이터를 요청할때 사용하며, 주소에 데이터를 입력하는 방식이다.

            post는 파일을 올리거나, 보안이 필요한 데이터를 전송할 때 사용된다.

 

 

 

---

 

 

<input>

사용자가 다양하게 폼 태그에 입력할 수 있는 공간을 만들어 주고, 사용자에게 정보를 입력 받는다.

 

 

<input>의 속성

 

 

1. type: 태그 모양을 다양하게 변경할 수 있다.

          Type에서는 text, radio, checkbox, password, button 등을 지정할 수 있다.
2. name: 태그 이름을 지정한다.
3. readonly: 태그를 읽기 전용으로 한다.
4. maxlength: 최대 글자 수를 지정한다.
5. minlength: 최소 글자 수를 지정한다.
6. required: 필수 태그로 지정된다. 필수 태그를 입력하지 않고, submit 버튼을 누르면 에러가 떠 데이터가 전송되지 않는다.
7. autofocus: 웹 페이지가 로딩 되면 이 속성을 지정한 태그로 포커스가 바뀐다.
8. placeholder: 입력할 값에 대한 힌트를 준다.
9. pattern: 정규표현식을 사용하여 특정 범위 내의 유효한 값을 입력 받을 때 사용한다.

 

 

<input>의 타입

 

• text : 입력한 text를 그대로 표현해주는 input
• button : 누를 수 있는 간단한 버튼을 만드는 input
• password : 마스크 처리된 text input
• search : 검색 창으로 사용할 수 있는 input
• date : 날짜를 입력할 때 사용할 수 있는 input
• time : 시간을 입력할 때 사용할 수 있는 input
• range : 슬라이드 바 형식의 input
• number : 수를 선택할 수 있게 하는 input
• color : 색을 선택할 수 있는 input
• radio : 선택 항목 중 하나만 선택 가능한 input
• checkbox : 선택 항목 중 0개 이상 선택 가능한 input
• file : 파일을 업로드 할 수 있는 input
• email : 이메일 주소를 입력하게  하는 input
• url : 웹페이지 주소를 입력하게 하는 input
• tel : 전화번호를 입력하게 하는 input

 

---

<label>

시각 장애인들도 폼을 사용할 수 있도록 <label> 요소를 사용하자.

 

<label> 사용법

 

첫번째 : 텍스트의 설명과 폼 입력 모두를 포함하는 방식

<label>

    이름 :

    <input type="text" name="name">

</label>

 

 

두번째 : 폼 입력에서 분리하여 for 속성을 이용해 레이블을 지정하는 방식

 

<label for="myName">이름 : </label>

<input type="text" name="name" id="myName">

 

for 속성

 

레이블이 속한 input과 같은 폼 컨트롤(input, select, textarea 와 같은 요소들)을 의미한다.

for 속성의 값은 레이블이 속할 폼 컨트롤의 id 값과 일치해야한다.

레이블과 폼 컨트롤이 연결되면 레이블을 선택해도 해당하는 폼 컨트롤이 선택된 것과 같이 작동한다.

 

 

---