Tel. 042-353-2371

평일 오전 9시 ~ 오후 7시
기업은행

010-8649-6758

예금주:제주사랑(송진아)
JAVASCRIPT
홈 > 홈페이지제작교실 > JAVASCRIPT

카테고리 Object
제목 Form design I
작성자 freewebkorea
작성일자 2009-12-09
조회수 1698

form 관련 HTML Elements

이 번 페이지에서는 Form을 위해서 만든 Element라고 해도 과언이 아닐 Label, Fieldset, Legend Element에 대해 알아 보겠습니다. 이 Element들은 Form 을 보기 좋게 꾸며 줄 뿐만 아니라, 같은 종류의 입력 field 끼리 묶어서 제목을 붙여 주므로해서 구분을 더욱 쉽게 해 줍니다. 보기 좋은 떡이 먹기도 좋다. 또는 기왕이면 다홍치마다... 머 이런 말도 있지 않습니까.
legend : optional, forbidden, empty, deprecated, loose dtd, frameset dtd  [표 보는 방법]
element start tag end tag empty deprecated dtd
LABEL          
FIELDSET          
LEGEND          
BUTTON          


Label Element
accesskey alt key와 함께 눌러서 for로 지정한 id를 가진 입력란에 접근(access : text 입력란에는 focus를 맞추고, radio와 checkbox는 선택) 할 수 있게 해주는 영문자 1 글자(key).
for accesskey의 대상이 될 입력란의 id
공통 속성 dir, id, class, style, title, 발생하는 Event는 공통 속성표 를 참조
sample 아래의 입력란 옆 밑줄친 영문자를 alt key를 누른채 찍어 보세요. 또 text 입력란, radio button, checkbox를 직접 클릭하지 말고, label로 지정한 글자를 눌러보면 단어에 focus(점선 테두리)가 생기면서 해당 입력란을 클릭한 것과 같은 효과가 있습니다. U Element를 사용하여 밑줄을 쳐서 accesskey가 뭔지 당연히 표시 해야 되고, 아래와 같이 style="cursor:hand;"로 클릭을 유도하곤 하지요...^^

***같은 accesskey를 두번 이상 사용하면 처음 사용한 accesskey만 먹습니다.



Source code
<form>
<input type="text" id="txt" />
<label accesskey="i" for="txt" style="cursor:hand;"><u>I</u>nput</label>
<input type="checkbox" id="chk" />
<label accesskey="c" for="chk" style="cursor:hand;"><u>C</u>heck</label>
<input type="radio" id="man" name="sex" />
<label accesskey="m" for="man" style="cursor:hand;"><u>M</u>an</label>
<input type="radio" id="woman" name="sex" />
<label accesskey="w" for="woman" style="cursor:hand;"><u>W</u>oman</label>
</form>



Fieldset Element, Legend Element

Fieldset Element는 아래의 예와 같이 fieldset 안에 있는 Element들을 테두리로 묶어 주는 단순한 역할을 해 줍니다. Legend Element는 제목이 되겠구요... 따라서 fieldset은 공통 속성만으로 가지고 있고, Legend는 수평 정렬(align: left, center, right) 속성을 가지고 있습니다.
Fieldset과 Legend

Fieldset과 Legend <FORM> </FORM>
Source code 
<html>
    <head>
        <title>Fieldset과 Legend</title>
    </head>
    <body>
      <form>
      <fieldset>
      <legend>Fieldset과 Legend</legend>
        <input type="text" id="txt" />
        <label accesskey="i" for="txt" style="cursor:hand;"><u>I</u>nput</label>
        <input type="checkbox" id="chk" />
        <label accesskey="c" for="chk" style="cursor:hand;"><u>C</u>heck</label>
        <input type="radio" id="man" name="sex" />
        <label accesskey="m" for="man" style="cursor:hand;"><u>M</u>an</label>
        <input type="radio" id="woman" name="sex" />
        <label accesskey="w" for="woman" style="cursor:hand;"><u>W</u>oman</label>
      </fieldset>    
      </form>
    </body>
</html>



tabindex Attribute

웹 페이지 상에서 링크나 입력란 이 있는 경우 마우스를 사용하지 않고 Tab key를 눌러 항목으로 이동할 수 있으며, 그 순서는 Source를 Coding한 순서를 따르게 됩니다. 하지만 경우에 따라서는 중간에 건너 뛰게 할 항목이나 순서를 지정할 수는 있습니다. tabindex 속성은 A, AREA, BUTTON, INPUT, OBJECT, SELECT, TEXTAREA Tag 등에서 Keyboard Tab Key를 눌러서 tabindex 속성으로 지정한 항목 간을 이동 또는 점프시켜 주는 속성입니다. Tab과 Index의 두 단어를 붙여놓은 셈이죠. 요즘 처럼 Mouse를 많이 사용하는 상황에서 이게 무슨 필요가 있겠나 하겠지만, Keyboard에 익숙한 사용자들에게는 매우 편리한 기능입니다. 오랜 작업을 하다 보면 마우스를 잡았다 놓았다 하는게 무지 귀찮거든요. 영어권 국가에서 많이 사용한다는군요.

W3C의 spec에 의하면 0 ~ 32767 까지의 정수가 사용 가능하며 이외의 숫자는 무시하고, 브라우저에 따라 '0' 이 첫 번째 일 수도 있고 마지막이 될 수도 있다고 합니다. IE 에서는 '0' 이 마지막으로 처리 됩니다.

이 처럼 숫자의 사용 폭이 크기 때문에 하나의 요령을 말해 주자면, 1, 2, 3, 4 와 같이 Numbering 하지 말고 10, 20, 30 과 같이 중간에 번호를 남겨 두면 중간에 새 항목을 추가해야 할 필요가 있을 때 다른 tabindex를 수정하지 않아도 되겠져? 자세한 사용법은

  • 일단 Tab 에 의해 선택된 항목은 focus가 생기고
  • A, Area, Button 같이 Link 걸린 글자나 그림의 경우 enter를 치면 마우스로 클릭한 것과 같습니다.
  • Input type이 text인 경우나 Textarea 는 문자 입력을 하면 되겠죠.
  • Select - Option의 경우 상하 화살표 키로 선택
  • Input type이 radio, checkbox인 경우 Spacebar로 선택
  • 뒤로 항목을 이동하고 싶으면 shift + tab
입력 
<html>
<head>
<title>tabindex Attribute</title>
</head>
<body>
    <a href="#" tabindex="10">10</a><br />
    <a href="#" tabindex="11">11</a><br />
    <a href="#" tabindex="20">20</a><br />
    <form>
        <input type="checkbox" tabindex="30" />30<br />
        <input type="checkbox" tabindex="40" />40<br />
        <input type="radio" name="rad1" tabindex="50" />50<br />
        <input type="radio" name="rad2" tabindex="60" />60<br />
        <input type="radio" name="rad3" tabindex="70" />70<br />
        <input type="text" tabindex="-1" />-1<br />
        <input type="text" tabindex="0" />0<br />
        <textarea tabindex="80"></textarea>80<br />
        <button tabindex="90">90</button><br />
    </form>
</body>
</html>
코드 실행 하기


Button Element

Button Element는 Input type이 Button, submit, reset의 3가지인 경우에 만들어지는 Button과 비슷하지만 약간의 차이가 있습니다. 그 차이는

  • Button Element는 End Tag이 필요하다는 점.
  • Button 속에 내용물(Contents)를 넣을 수 있다는 점
  • accesskey 를 지정할 때 밑줄(U Tag으로)을 넣을 수 있다는 점. (Input 의 경우 value 값이 Button에 나타나기 때문에 밑줄을 그을 수 없져)

이와 같이 Input Element와 달리 더 많은 효과를 낼 수 있습니다. 우선 그림 파일이 들어간 예를 하나 봅시다.
Button Element
accesskey alt key와 함께 눌러서 for로 지정한 id를 가진 입력란에 접근(access : text 입력란에는 focus를 맞추고, radio와 checkbox는 선택) 할 수 있게 해주는 영문자 1 글자(key).
tabindex tabindex attribute 참조
type button(Default), submit, reset 의 3가지 type 이며 INPUT Element의 type attribute 참조
disabled INPUT Element의disabled attribute 참조
공통 속성 dir, id, class, style, title, 발생하는 Event는 공통 속성표 를 참조


IMG Tag을 포함한 Button



Source code 

<body>
    <button onclick="location.href='mailto:webmaster@cadvance.org'" style="cursor:hand;">
        <b>Send E-mail</b>&nbsp;&nbsp;
        <img src="../images/icon/email.gif" align="absmiddle" alt="email (1K)" />
    </button>
</body>
코드 실행 하기



Form collection 속에서 사용 할 경우

Button type이 submit 또는 reset 일 경우 반드시 Form collection(<form> ~ </form>) 속에서 사용합니다.
Source code 

<body>
   <form action="http://somesite.com/prog/adduser" method="post">
      <P>
      First name: <input type="text" name="firstname"><br />
      Last name: <input type="text" name="lastname"><br />
      E-mail: <input type="text" name="email"><br />
      <input type="radio" name="sex" value="Male"> Male<br />
      <input type="radio" name="sex" value="Female"> Female<br />
      <button name="submit" value="submit" type="submit">
      <u>S</u>end 
      <img align="absmiddle" src="../../images/login_icon/login_button.gif" alt="login (1K)" />
      </button>  		
      <button name="reset" type="reset">
      <u>R</u>eset 
      <img align="absmiddle" src="../../images/login_icon/reset.gif" alt="register (1K)" />
      </button>
      </P>
   </form>
</body>
코드 실행 하기