FrontEnd - HTML(4)

form 요소

웹페이지 에서는 form 요소를 사용 하여 사용자로부터 입력을 받을 수 있다

<form action="처리할 페이지 주소" method="get|post"></form>

action 속성은 데이터를 처리할 서버상의 파일의 주소를 명시한다 이 전달받은 데이터를 처리하는 스크립트 파일을 폼 핸들러라고 한다
method 속성은 입력받은 데이터를 서버에 전달한 방식을 명시한다.

method 속성

method 속성은 get방식과 post방식으로 나뉘어 진다.

get방식

get방식은 주소에 데이터를 추가하여 전달하는 방식이다. 주소입력창에 그대로 나타나며 , 전송할 수 있는 데이터의 크기가 제한적이다. 따라서 검색엔진 쿼리와 같이 크기가 작고 중요도가 낮은 정보를 보낼때 주로 사용한다

post방식

post 방식은 데이터를 별도로 첨부하여 전달하는 방식이다. 데이터가 외부에 드러나지 않으며 전송할 수있는 데이터의 크기 또한 제한이 없다 따라서 보안성 및 활용성이 get방식보다 좋다.

form 태그

• fieldset 태그는 form과 관련된요소를 하나로 묶어준다
• text태그는 텍스트를 입력할 수 있는 태그이다
• password태그는 비밀번호로 입력하는 것처럼 기호로 표현한다
• legend 태그는 fieldset 요소의 제목을 나타내준다
• radio태그는 옵션을 선택하는 태그다 하나만 설정이 가능하며 name속성은 같게 설정해야한다
• checked는 미리 체크해놓는 태그
• checkbox 태그는 여러개의 옵션이 선택이 가능하고 이름이 같아야 한다
• disabled는 체크를 막는다
• file태그는 파일첨부를 할 수있게 하는 태그이다 accept의 파일의 형식을 설정할 수 있다
• textarea는 텍스트를 입력할수 있다 rows와 cols로 크기 설정이가능하며 cols는 가로 rows는 세로이다
• submit태그는 폼 핸들러에 데이터를 전송하는 버튼이다

<form action="NewFile2.html" method="get">
<fieldset>
<legend>로그인</legend>
  아이디 <input type="text" name="id"><br>
  비밀번호 <input type="password" size="10" name="pw"><br>
  <input type="radio" name="food" value="햄버거" checked>햄버거<br>
  <input type="radio" name="food" value="피자">피자<br>
  
  <input type="checkbox" name="sport" value="야구">야구<br>
  <input type="checkbox" name="sport" value="배구" disabled>배구<br>
  <input type="file" name="file_upload" accept=""><br>
  <textarea rows="5" cols="10"></textarea><br>
  <input type="submit" value="버튼">
</fieldset>


</form>

• value태그를 텍스트타입에 사용하여 설정하면 텍스트박스에 값이 설정된다
• readonly 태그는 수정할수 없게 한다. disabled 와 다른점은 전송버튼을 누르면 값이 전송된다.
• disabled는 값이 전송되지 않는다
• maxlength는 최대 입력할 수 있는 숫자를 지정한다
• size는 한번에 보여줄 수 있는 문자의 최대 개수만을 의미한다

출처 : http://www.tcpschool.com/