진짜 개발자
본문 바로가기

Web/HTML

HTML 웹 양식 태그((form) ,입력 양식 태그(input)

728x90

웹 양식이란?

- 사용자가 웹문서에 데이터를 입력하고 그 결과값을 가져오기 위해 사용한다

  이때, 사용자가 데이터를 입력하는곳을 입력양식이라고 한다.


1. Form 태그란?

- 웹 문서와 사용자 사이에서 원하는 정보를 주고 받을 수 있도록 인터페이스를 제공하기 위해 사용하는 태그

- HTTP 프로토콜에서 제공하는 GET, POST 방식을 사용하여 사용자의 입력값을 서버측의 페이지로 전달


사용법

<form name="폼이름" action="웹서버의페이지" method="전달방식(메소드)">

<input type="폼의 모양과 기능" name="입력 폼 변수" value="전달 값">

</form>


form태그 속성

1) action

- 사용자가 입력한 데이터를 처리하기위한 서버측의 웹프로그램(ASP, PHP, JSP ..)

- 그냥 html이 들어갈 수도 있음


2) method

- 웹서버와 클라이언트 간의 통신방법을 지정

- GET, POST


3) onsubmit

- 양식 제출시 실행할 함수를 통해 여러 제어를 할 수 있다

ex)

<script>

function check(){

var a = document.getElementById('test').value;

if

}

</script>


<form action="?" method="POST" onsubmit="return check();">

...

<input type="text" id="test">

</form>


2. INPUT 태그란?

- 이를 통해 CGI에 사용자가 변수를 지정하고 그 변수에 값을 지정하여 넘겨줄 수 있다.

- 사용자의 입력을 받는 텍스트 값 입력과, 버튼, 체크상자, 라디오상자 등을 만들 수 있다


사용법

<input type="타입" name="변수이름" value="변수 값">


Input태그 속성

type

1. text 

- 짧은 텍스트를 입력할 수 있는 상자


2. password

-



3. file 

- 파일 업로드, 파일의 위치정보를 기록시 사용



4. checkbox

- 체크 박스



5. radio

- 라디오 버튼

- name을 통해 radio 버튼을 그룹화 해야 체크박스와 같은 다중 선택을 막을 수 있다.



6. button


7. submit   

- 폼을 action 속성에 작성된 서버측 페이지로 전송시 이용되는 버튼


8. reset 

- 폼에 입력된 값을 모두 초기화 하는 버튼


9. image

-


10. hidden

-