HTML : 폼(Form)에 대한 이해

[ 폼 태그 동작방법 ]

1. 폼 안의 데이터를 웹 서버로 전송

2. 웹 서버는 받은 폼 데이터를 웹 프로그램에 전송

3. 웹 프로그램에서 폼 데이터 처리 후 새로운 html페이지를 웹 서버에 보냄

4. 브라우저는 새 html페이지를 보여줌

 

 

[ 폼 태그 속성 ]

name, method, action, target 등이 있다.

• name : 폼을 식별하기 위한 이름 지정
• method : 폼을 서버에 전송할 http메소드를 정함(get, post)
• action : 폼을 전송할 서버 쪽 스크립트 파일을 지정
• target : action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정
• accept-charset : 폼 전송에 사용할 문자 인코딩 지정

<form action="#" accept-charset="utf-8" name="person_info" method="get">

 

 

[ GET과 POST ]

폼을 서버에 전송할 http 메소드 종류이다. 방식의 차이가 있다.

• GET 
  • 폼 데이터를 URL 끝에 보여 눈에 보이게 보냄
  • 데이터가 외부에 노출되어 보안에 취약
  • 데이터를 읽을 때 사용
  • http://localhost:8080/form.jsp?name=junyoung&address=suwon
• POST
  • 내부적으로 보이지 않게 보냄
  • 데이터가 개인정보나 보안이 필요할 경우 POST방식 사용
  • 데이터를 쓰고, 수정, 삭제할 때 사용
  • http://localhost:8080/form.jsp

 

 

[ 폼 엘리먼트 그룹화 : <fieldset>, <legend> ]

- fieldset : 폼 태그 안에 관련있는 폼 엘리먼트들을 그룹화 

- legend: filedset 하위 태그에 사용하여 그룹화한 폼 엘리먼트들을 목적에 맞게 이름 지정

<form action="#" accept-charset="utf-8" name="person_info" method="get">
	<fieldset style = "width:150px">
    	<legend> 개인정보 입력 </legend>
        	이름 : <input type="text" name="name" />
            나이 : <input type="text" name="age" />
    </fieldset>

 

 

[ Input과 label의 연관성]

• <label> 을 <input> 요소와 연관시키려면 <input> 에 id 속성을 넣고, <label> 에 id 와 같은 값의 for 속성을 넣어야한다.

<label for="cheese">Do you like cheese?</label>
<input type="checkbox" name="cheese" id="cheese">

• label과 input의 연관성
  • label 텍스트는 텍스트 입력과 시각적으로 관련이 있을뿐만 아니라 프로그래밍적으로도 관련이 있다. 예를 들어, 화면리더기(screenreader) 는 폼 입력(form input)에서 label 을 읽어서 보조기술(assistive technology) 사용자가 입력해야하는 텍스트가 무엇인지 더 쉽게 이해할 수 있게 한다.
  • 보통 checkbox나 radio등 해당 버튼을 눌러야 체크가 가능하나, label과 연동하면 label을 클릭하여도 input에 체크, 활성화 시킬 수 있다.
• label은 inline 요소이기 때문에 이 방식으로 CSS에서 스타일링 가능하다.

 

[ Input의 다양한 속성들 ]

• type : text, radio(중복선택x), checkbox(중복선택o), password, email, button, hidden, fileupload, submit, reset 등
• name : 태그 이름 지정(label과의 연관성, 이름 같도록 하여 관련된 태그임을 인식 가능)
• readonly : 태그를 읽기전용으로
• required : 미입력 방지, 입력하지 않고 submit 시 에러메시지가 브라우저에서 출력(HTML5)
• autofocus : 웹 페이지가 로딩되자마자 이속성을 지정한 태그로 포커스 이동 됨(HTML5)
• placeholder : 입력할 값에 대한 힌트를 줌(HTML5)
• pattern : 정규표현식을 사용하여 특정범위 내의 유효한 값을 입력받을 때 사용(HTML5)

<input type ="text" pattern = "￦d{6}￦-￦d{7}" // 정규표현식 title = "123456-1234567 형식으로 입력해주세요"/>

• 주민번호 입력칸은 정규표현식에 맞는 정확한 값을 입력해야 함. 지키지 않을 경우 title의 입력방법 설명이 나타남

 

 

[ 목록태그 select, option, optgroup ]

• select : 항목 선택 태그 : 속성 size(한번에 표시할 항목 수), multiple(다중선택 허용할 것인지)
• option, optgroup : select 안에서 목록들을 그룹화 할 경우 사용

 

[ HTML5에서 추가된 엘리먼트 ]

• datalist : 입력값 후보 목록 지정
• input - date속성 : 날짜 입력받기 위한 속성, 달력도 함께 표시

<input type="date" min="1997-08-30" max="2022-10-27" name="date" step="7">

• input - number, range : 둘 다 숫자 입력 시 사용, range는 슬라이더 형태의 UI

<input type="number" min="0" max="100" step="10" name="number">
<input type="range" min="0" max="100" step="10" name="range">

• input - color : 컬러 picker형태 UI

 

 

 

< 참고 >

https://www.nextree.co.kr/p8428/