<FORM></FORM> 계속

앞에서 다룬 중요한 엘레멘트는

여기서는 중요한 사항 만 설명한다. FORM 전반에 관 한 자세한 것은 HTML 규격을 참조하라.

단추(BUTTON) 입력: <BUTTON type="submit">, <BUTTON type="reset">

단추를 입력 할 때 사용한다. 가능한 애트리뷰트는 submit, reset 이다.

단추 type="submit"는 입력이 완료되어 해당 액션을 시작하라는 것이고, type="submit"는 입력 사항을 초기값으로 환원하라는 것이다. 이것들은 그 것이 포함되어 있는 <FORM></FORM> 안에서 만 적용되고 다른 <FORM></FORM>에 있는 것은 해당 된지 않는다. 예제를 보면

<FORM  action="mailto:trioweb@hanmail.net" method="post">
성: <INPUT type="text" name="firstname" size=10>
명: <INPUT type="text" name="lastname" size=20><BR>
<INPUT type="radio" name="sex" value="Male" checked> 남,
<INPUT type="radio" name="sex" value="Female"> 여,
전자 우편: <INPUT type="text" name="email"><BR>
<BUTTON name="submit" value="submit" type="submit">
	<IMG src="../../gif/btsubmit.gif" width=80 alt="송신 확인">
<BUTTON name="reset" type="reset">
	<IMG src="../../gif/btreset.gif" width=80 alt="재입력">
<BUTTON name="button" value="button" onClick="alert('이것은 예비 단추입니다.')">
	<IMG src="../../gif/btblank.gif" width=80 alt="예비단추">
</FORM>

성: 명:
남, 여, 전자 우편:

이벤트 처리란 ?

<BUTTON>에 type 이 지정 않되면 일반 단추로 사용 할 수 있는 것이 된다. 이 단추에는 onClick, onMouseOver, onMouseDown 등의 이벤트 처리로 다른 기능을 부여 할 수 있다.

이벤트 처리란 그 오브젝트(예를 들어 이 단추)에 어떤 조작을 하였을 때, Javascript, Visual Basic, C++ 등의 프로그램으로 작동하게 하는 것으로 자세한 설명을 참조 할 수 있다. 어려운 언어라고 겁먹을 필요가 없고, Javascript로 아주 간단하게 처리 할 수 있는 것들이 많이 있다. Javascript 예제에서 따서 쓰면 된다.

위의 예제에서 그 예비 단추에는 경고를 보내는 스크립트가 있어 onClick으로 경고를 보내는데 그 부분은 아주 간단하게 onClick="alert('이것은 예비 단추입니다.')"이다.

물론 이런 이벤트 처리는 다른 엘레멘트에서도 널리 사용 할 수 있다.

HTML 규격의 BUTTON에 대한 자세한 설명을 참조하라.

선택: <SELECT><OPTION></SELECT>

<SELECT></SELECT> 태그사이에 선택 항목 <OPTION>들이 들어가는데 선택항목의 복수을 위하여 multiple을 지정하고, 한 번에 보이는 항목 갯수는 size=정수로 지정한다. 최초값을 지정하려면 selected 와 value=값를 넣어준다. 예제를 보면

<FORM name="formname2" method="post" action="mailto:trioweb@hanmail.net">
선택 사항<br>
<SELECT multiple size="5" name="compo-select">
  <OPTION selected value="선택 항목-1">선택 항목-1</OPTION>
  <OPTION>선택 항목-2</OPTION>
  <OPTION>선택 항목-3</OPTION>
  <OPTION>선택 항목-4</OPTION>
  <OPTION selected value="선택 항목-5">선택 항목-5</OPTION>
  <OPTION>선택 항목-6</OPTION>
  <OPTION>선택 항목-7</OPTION>
</SELECT><BR>
<INPUT type="submit" value="선택완료">
<INPUT type="reset" value="다시설정">
</FORM>

복수 항목을 선택하려면 shift를 누르면서 마우스를 클릭하면 된다.
송신을 하기 위해서는 서버가 있어야 되는데, 일단 이과 같은 식으로 작업된다는 것만 이해하고, 또한 메세지를 위와 같이 주는 것은 Javascript로 작성 한 것인데 향후 Javascript를 배우면서 이해하기 바란다.

HTML 규격의 SELECT, OPTION에 대한 자세한 설명을 참조하라.

여러 줄의 텍스트 입력: <TEXTAREA></TEXTAREA>

<FORM></FORM> 태그 안에 <TEXTAREA></TEXTAREA>로 지정하는데, rows="줄의 수", cols="컬럼의 글자수"를 지정하며, 초기값을 태그 안에 기술하면 된다. <INPUT type="text">)와 거의 같다.

예제를 보면

<FORM name="formname3" method="post" action="mailto:trioweb@hanmail.net">
입력 제목<br>
<TEXTAREA name="thetext" rows="5" cols="50">   최초 텍스트의 첫째 열.
   최초 텍스트의 둘째 열 초기값. </TEXTAREA><BR>
<INPUT type="submit" value="입력완료"><INPUT type="reset" value="입력다시">
</FORM>

HTML 규격의 TEXTAREA에 대한 자세한 설명을 참조하라.

여기서는 중요한 사항 만 설명한다. FORM 전반에 관 한 자세한 것은 HTML 규격을 참조하라.