HTML form 양식과 종류 알아보기

FORM 알아보기

회원가입, 글쓰기 종류가 폼으로 만든는 태그라 생각하면 될꺼에요.

웹사이트를 방문한 사람이 입력한 정보를 서버로 전달하기 위해서 FORM 태그를 사용합니다.
각종 입력양식을 폼 안에서 사용하고 이 태그를 서버에 전달하는 방식이나 서버에서 가동될 프로그램 등을 지정함

<form name="폼으로 구분하는 이름"
action="url"
method="서버에 CGI프로그램에 전달되는 방식으로 get이나 post를 지정"
target="결과물을 보여줄 창 이름지정"
enctype="CGI 프로그램에 전송될 데이터의 타입지정">

여러가지 양식들

</form>

폼은 데이터를 입력받고 보내는 역할만 하고 데이터를 처리는 못합니다.
실제로 사용자가 이력한 데이터를 처리는 CGI나 자바스크립트 등이 합니다.
CGI(Common Gateway Interface)는 사용자가 입력한 데이터를 외부 프로그램과 연결해주거나 데이터베이스서버와 연동하여 데이터를 처리할 수있게 해줌
CGI는 PHP, ASP, JSP, C 등을 이용하여 작성할수 있어요
폼은 CGI프로그램을 활용하여 정보 전달을 하기 위한 별도의 태그로 폼을 설정한 후 텍스트나 비밀번호입력상자, 체크박스, 라디오단추, 각종명령단추 등의 입력양식으로 방문자가 편리하게 작성할수 있도록 함
이렇게 입력 양식에 작성한 데이터는 폼에 설정한 프로그램으로 전송됩니다.

폼으로 양식 예

텍스트 상자 : <INPUT TYPE="text">

<input type="text" name="텍스트상자 이름"
value="텍스트상자에 나타내고싶은 글자"
maxlength="텍스트상자에 입력할수 있는 최대 글자수">

비밀번호입력 상자 : <INPUT TYPE="password">

<input type="password" name="비밀번호 입력상자 이름"
value="비밀번호 입력 상자에 나ㅏ내고싶은 글자"
maxlength="비밀번호 입력 상자 입력할수 있는 최대 글자수">

체크상자 : <INPUT TYPE="checkbox">

<input type="checkbox" name="체크상자 이름"
value="체크상자의 값, 선택했을때 전달 값"
checked(선택된상태)">

라디오버튼 : <INPUT TYPE="radio">

<input type="radio" name="라디오버튼의 이름(같은이름으로 지정하면 그룹으로됨)"
value="라디오버튼의 값, 선택했을때 전달값"
checked(선택된상태)">

입력상자 : <TEXTAREA>

<textarea name="입력상자이름" rows="입력상자의 행의수 cols="입력상자의 열의수"">

목록상자 : <SELECT>

<select name="목록상자이름">
size="화면에 보여줄항목의수"
<option value="selected(초기선택항목으로지정)">선택</option>
<option value="해당항목을 선택하면 전달될값">목록1</option>
<option value="해당항목을 선택하면 전달될값">목록2</option>
</select>

select의 size 속성
size 속성을 1로 지정하면 콤보박스 형태로 나타나고 2이상 지정하면 목록상자형태로 보임

[ size를 4로했을때 ]

SUBMIT 버튼, RESET 버튼 : <INPUT TYPE="submit" or "reset">

<input type="submit" name="submit 버튼이름" value="submit 버튼에 표시되는내용">
<input type="reset" name="reset 버튼이름" value="reset 버튼에 표시되는내용">

명령버튼 : <INPUT TYPE="button">

<input type="button" name="명령버튼이름" value="표시되는내용">

이미지버튼 : <INPUT TYPE="button">

<input type="image" name="이미지버튼이름" src="버튼으로사용할그림경로">

파일업로드 : <INPUT TYPE="file">

<input type="file" name="파일업로드버튼이름">