FORM (2)


TEXT, PASSWORD

TEXTAREA

CHECKBOX

RADIO BUTTON



1. TEXT, PASSWORD


<INPUT type="text" name="이름" size="크기" maxlength="글자수"> <INPUT type="password" name="이름" size="크기" maxlength="글자수">


  1. 한 줄로 된 텍스트 입력상자를 "edit field"라고 부르기도 합니다.
  2. text와 password는 문자 입력 폼을 만들 때 사용합니다.
  3. text는 사용자가 문자를 적었을 때 그대로 표시되는 반면 password는 보안을 위해 *로 표시됩니다.
  4. name은 데이터를 보낼 때 변수명을 지정하는 것으로 데이터를 가려내는데 사용되므로 반드시 입력해야 합니다.
  5. size는 입력창의 크기를 설정합니다.
    • SIZE는 바이트(byte) 단위로 계산을 합니다.
    • SIZE=10 이면 영문자 10자, 한글은 5자 정도(한글은 2byte 문자이므로)크기의 입력창이 만들어집니다.
  6. maxlength는 최대 몇자까지 넣을 수 있을지 설정합니다.
    • 즉 maxlength=10 이라고 적으면 영문자는 10까지만 적을 수 있고, 한글은 5자까지만 적을 수 있습니다. 그 이상의 글자는 입력이 되지 않으므로 maxlength의 값을 잘 확인하여 설정합니다.
    • 일반적으로 maxlength는 전화번호나 패스워드 등 일정한 수를 넘지 않는 입력 창의 경우에는 적절한 수치로 제한을 해두면 사용자들이 수치를 입력할 때 범하는 오류를 막을 수 있습니다.


회원 ID <input type="text" name="name" size="10" maxlength="8"> 패스워드 <input type="password" name="passwd" size="10" maxlength="8"> 전화번호 <input type="text" name="phone" size="5" maxlength="3">- <input type="text" name="phone01" size="5" maxlength="4">- <input type="text" name="phone02" size="5" maxlength="4">

회원 ID
패스워드
전화번호 - -




2. TEXTAREA


<TEXTAREA name="이름" cols="수" rows="수" wrap="on or off">


  1. (INPUT type="text")태그는 단지 한 줄의 텍스트만 넣을 수 있는 한계가 있습니다.
  2. 이럴 경우에는 (TEXTAREA)를 사용하면 여러 줄의 내용을 삽입할 수 있습니다.
  3. (TEXTAREA)는 반드시 닫기 태그(/TEXTAREA)와 함께 사용해야 하며, 주로 방명록이나 게시판, 폼메일 같은 곳에서 자주 볼 수 있는 입력창입니다.
  4. cols속성은 공백을 포함하여 가로로 적힐 글자의 칸 수를 말하며, rows는 글자를 몇 줄까지 적을 것인지를 설정하는 세로 길이를 말합니다.
    이 rows속성에서 Explorer는 입력된 정수만큼 텍스트를 입력하면 줄 바꿈이 되지만, Netscape는 글자 수와 상관없이 너비만을 기준으로 줄바꿈이 일어납니다. 예를 들어 I는 D보다 작은 공간을 차지하기 때문에 더 많은 텍스트가 입력됩니다. (rows=10일 경우 한글은 2텍스트로 인식하고 5글자밖에 입력되지 않습니다.)
  5. (TEXTAREA)와 (/TEXTAREA) 태그 사이에 내용을 삽입하면 글상자에 기본값으로 지정될 텍스트들을 삽입하게 됩니다.
  6. 이 (TEXTAREA) 태그는 다른 입력양식과는 다르게 value 속성을 갖고 있지 않습니다.
  7. (TEXTAREA)의 속성에는 "WRAP"이라는 속성이 있습니다. 이것은 TEXTAREA 내에 줄바꿈이나 [ENTER]키 입력을 변환하여 프로그램으로 보낼 것인지 지정합니다.
    아래의 표는 틀릴 수도 있습니다. WRAP 속성은 HTML4.0에 규정된 것이 아니라 웹브라우저 개발사에서 임의로 만들어낸 속성이기 때문입니다. 또한 같은 이유로 익스플로러는 hard, off, physical, virtual을 지원하고, 넷스케이프는 hard, off, soft만을 지원합니다.


★ WRAP의 속성값
OFF WRAP 속성을 사용하지 않은 것과 같이 줄 바꿈을 하지 않고 가로 스크롤바가 생겨납니다. ENTER키 입력을 엔터기호를 추가하지 않고 프로그램으로 보냅니다.
SOFT 화면상으로는 줄 바꿈을 하지만 "ENTER"를 입력하지 않은 것으로 취급합니다. 글 입력시 자동 줄바꿈을 하지만 엔터기호를 추가하지 않고 프로그램으로 보냅니다.
HARD 화면상에 줄 바꿈을 하면서 "ENTER"가 입력된 것과 같은 결과가 됩니다. 이 HARD 속성을 사용했을 때 일반 화면의 입력 영역에 입력된 모습 그대로 출력되는 것입니다. ENTER키 입력을 엔터기호를 추가하여 프로그램으로 보냅니다.
VIRTUAL SOFT와 유사합니다.
PHYSICAL 글입력시 자동 줄바꿈을 하고 엔터기호를 추가하여 프로그램으로 보냅니다.

예제 직접 입력해보세요.
WRAP=HARD
 HARD
WRAP=OFF
 OFF
WRAP=SOFT
 SOFT
WRAP=PHYSICAL
 PHYSICAL
WRAP=VIRTUAL
 VIRTUAL


<textarea name="field" cols="50" rows="10"> 많은 내용 적어주세요.~!! </textarea>






3. CHECKBOX


<INPUT type="checkbox" name="이름" value="제어값" checked>


  1. CHECKBOX는 기호 성향을 파악할 때 주로 사용하는데, 여러 가지 선택 항목을 나열하여 그 중에서 원하는 항목들을 체크할 수 있는 형식입니다.
  2. name은 한 종목에 관한 한 하나의 이름을 부여해야 합니다.
  3. value는 파일이 서버로 전송되었을 때 어떤 제어값이 전송되었는지를 파악하기 위해 반드시 사용해야 합니다.
  4. checked는 사용자가 자주 적용할 것 같은 항목을 미리 체크해 놓을 수 있는 기능이며 사용해도 되고, 사용하지 않아도 무난합니다.
  5. 체크박스는 단일 선택이 아닌 다중 선택이 가능한 폼태그입니다.


<p>오늘 점심으로 먹고 싶은 메뉴는?</p> <input type="checkbox" name="food" value="rice" checked>밥 <input type="checkbox" name="food" value="noodles">라면 <input type="checkbox" name="food" value="spaghetti">스파게티 <input type="checkbox" name="food" value="pizza">피자

오늘 점심으로 먹고 싶은 메뉴는?

밥 라면 스파게티 피자




4. RADIO


<INPUT type="radio" name="이름" value="제어값">


  1. RADIO 버튼은 양자택일을 해야 하는 설문조사에 많이 사용됩니다.
  2. 버튼의 형태는 체크박스와는 달리 원으로 되어 있습니다.
  3. name은 한 종목에 관한한 하나의 이름을 부여해야 합니다.
  4. value는 파일이 전송되었을 때 어떤 제어값이 전송되었는지를 파악하기 위해 반드시 사용해야 합니다.


<p>1. 당신의 성은?<br> <input type="radio" name="sex" value="woman">여자 <input type="radio" name="sex" value="man">남자</p> <p>2. 이 책 저자의 닉네임(ID)는?<br> <input type="radio" name="id" value="geston">geston <input type="radio" name="id" value="grangdis">grangdis <input type="radio" name="id" value="mayonez">mayonez <input type="radio" name="id" value="clio">clio <input type="radio" name="id" value="lovin">lovin</p>

1. 당신의 성은?
여자 남자

2. 이 책 저자의 닉네임(ID)는?
geston grangdis mayonez clio lovin