[HTML] <form> 태그

- Form 태그

: 입력된 데이터를 한번에 서버로 전송함. 전송된 데이터는 웹서버가 처리하고, 결과에 따른 또다른 웹페이지를 보여줌.
 

- Form 태그 동작 방법

1) 폼이 있는 웹페이지 방문
2) 폼 내용 입력
3) 폼 안의 데이터를 웹서버로 보냄
4) 웹서버는 받은 폼 데이터를 처리하기 위해 웹 프로그램으로 넘김
5) 웹 프로그램이 폼데이터 처리
6) 처리결과에 따른 새로운 html 페이지를 웹서버로 보냄
7) 웹서버는 받은 html 페이지를 브라우저에 보냄
8) 브라우저는 받은 html 페이지를 보여줌
 

- Form 태그 속성

action : 폼을 전송할 서버 쪽 스크립트 파일을 지정
name : 폼을 식별하기 위한 이름을 지정
accept-charset : 폼 전송에 사용할 문자 인코딩을 지정
target : action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정
method : 폼을 서버에 전송할 http 메소드를 정함(GET 또는 POST), get은 폼 데이터를 url 끝에 붙여서 눈에 보이게 보내지만 post 방식은 내부적으로 보이지 않게 보냄
 

- Form을 구성하는 다양한 엘리먼트

•  form 엘리먼트 그룹 - <field>,<legend> 태그

• <fieldset> 태그 : 폼 태그 안에 관련있는 폼 엘리먼트들을 그룹화할때 사용
• <legend> 태그 : <fieldset> 태그 하위에 사용해 그루보하한 폼 엘리먼트들을 목적에 맞게 이름 지정함

---

•  다양한 모양을 가진 <input> 태그

: 사용자가 폼 태그에 입력할 수 있는 공간을 다양하게 만들어줌. type, readonly, maxlength 등의 속성이 있음.

• type : 태그 모양을 다양하게 변경 가능. text, radio, checkbox, password, button, submit, reset 등을 지정 가능.
• name : 태그 이름 지정
• readonly : 태그를 읽기전용으로 함.
• maxlength : 해당 태그 최대 글자 수를 지정
• required : 해당 태그가 필수태그로 지정됨. 입력하지 않고 submit 버튼을 누르면 에러메시지가 웹 브라우저에 출력됨.
• autofocus : 웹페이지가 로딩되자마자 이 속성을 지정한 태그로 포커스가 이동됨
• placeholder : 태그에 입력할 값에 대한 힌트를 줌

---

•  목록태그 <select>, <optgroup>, <option>

• <select> 태그 : 항목을 선택할 수 있는 태그. 한 번에 표시할 항목수를 의미하는 size 속성과 다중선택을 허용할 것인지 지정하는 multiple 속성이 있음. 하위에 <optgroup>태그와 <option> 태그가 있음.
• <optgroup> 태그 : <select> 태그 안에서 목록들을 그룹화할 경우 사용됨. label 속성을 사용해 그룹이름을 지정함.
• <option> 태그: <optgroup> 태그 하위에 있음. 목록을 나타내는 태그.

---

• 여러 줄 글상자 <textarea>

: 여러 줄을 입력받는 태그. 속성 중에 rows와 cols가 있다. rows는 줄을, cols는 한 줄에 입력될 크기를 지정한다.