[Html] 입력양식(form)에 대해서

입력양식(form)

입력양식(form)은 홈페이지에서 사용자에게 정보를 받을때 사용됩니다. 회원가입을 하거나 혹은 쇼핑몰에서 주문을 하는 경우 사용자의 정보를 입력받을 필요가 있습니다. 이때 입력양식(form) 페이지를 제공하여 정보를 입력하게한 다음 이를 처리하는 페이지를 만들어서 DB에 저장을 합니다. 회원가입 입력폼을 member.html 이라고 한다면 member_confirm.php 와같은 페이지를 만들어서 회원가입 처리를 합니다. 이때 member.html 페이지는 <form> 태그를 이용하여 간단하게 만들수 있지만 member_confirm.php 페이지는 입력받은 정보를 DB에 저장하는 역할을 하기 때문에 프로그래밍 처리를 해야 합니다. 그래서 HTML 만으로는 입력양식만을 만들 수 있을뿐 이를 DB에 저장하는 기능은 만들 수가 없습니다. 대부분의 웹프로그램이 사용자의 정보를 받아서 처리하는 프로세스를 가지므로 <form> 태그는 웹프로그램에서 아주 중요한 위치를 차지합니다.

입력양식(form)의 구성 <form> 태그는 입력양식의 범위를 지정할뿐 화면상에는 아무런 내용이 표시되지 않습니다. <form>과 </form> 사이에 사용자가 실제적으로 값을 넣을수 있는 텍스트 박스나 체크 박스 등이 위치합니다. 회원가입을 하는 경우 이름이나 주소 등을 텍스트로 입력하는 경우도 있지만 성별이나 생년월일 등은 라디오 버튼이나 셀렉트 박스에서 선택하는 경우도 있습니다. 그러므로 <form>과 </form> 사이에 위치하는 다양한 <form> 요소들을 모두 익혀야 상황에 맞는 입력양식을 만들수 있습니다. <form> 태그의 속성 <form> 태그에서 사용할 수 있는 주요 속성은 method와 action이 있습니다. <form method="get" action="member_confrim.php"> </form> (1) method 웹서버와의 통신 방법을 지정합니다. post와 get 두가지 값 중 하나를 사용할 수 있습니다. (2) action 입력양식에 입력된 값을 받아서 DB에 저장하는 페이지를 지정합니다. 이는 php나 asp와 같은 웹스크립트 언어를 이용하여 제작합니다.

텍스트 필드(Text Field)

텍스트 필드(Text Fields)는 이름이나 주소와 같이 텍스트를 입력받을때 사용됩니다. <input type="text" name="member_name"> 텍스트 필드는 한줄 텍스트를 입력할 수 있는 폼 필드입니다. 텍스트 필드에서 가장 기본적으로 들어가는 속성은 type과 name입니다. type 속성은 폼 필드의 종류를 지정합니다. type 속성의 값이 text이므로 이는 텍스트 필드를 의미합니다. name 속성은 폼 필드의 이름을 지정합니다. 하나의 폼 안에서 이 name 속성의 값은 고유한 값이어야 합니다. 폼이 전송되고 나서 폼을 처리하는 파일에서 각 폼 필드를 구분하기 위함입니다. type 속성과 name 속성은 텍스트 필드뿐 아니라 모든 폼 필드에 공통적으로 사용되는 속성입니다.

기타 텍스트 필드에서 사용할수 있는 속성(property)은 다음과 같습니다. size 텍스트 필드의 크기를 지정할 수 있습니다. size 속성을 지정하지 않으면 기본값은 20입니다. maxlength maxlength 속성은 텍스트 필드에 입력할 수 있는 글자수의 최대값을 지정합니다. size를 지정하더라 이는 화면에 출력되는 사이즈를 의미하지 입력할 수 있는 글자수와는 무관합니다. 입력할 수 있는 글자값을 제한할려면 maxlength 속성을 사용합니다. value 텍스트 필드에 입력되는 기본값을 지정할 수 있습니다. 회원가입 입력폼의 이름 필드에는 기본값이 필요하지 않겠지만 수정폼에는 자기의 이름이 기본적으로 들어가 있어야 하겠죠?

패스워드 필드(Password Field)

비밀번호를 입력하는 패스워드 필드(Password Field)는 텍스트 필드와 모양은 동일하고 단지 입력한 값이 ***로 표시된다는 차이만 있습니다. 비밀번호가 입력한대로 노출된다면 이는 보안상 문제가 있기 때문입니다. <input type="password" name="pass"> 모양은 텍스트 필드와 동일합니다. type 속성만 password로 지정했다는 차이만 있습니다. 그러나 위의 필드에 값을 넣어보면 ***로 표시됩니다. 기타 size, maxlength와 같은 속성들도 텍스트 필드와 동일합니다.

텍스트에어리어(textarea)

텍스트 필드가 한줄만 입력할 수 있는것에 비해 텍스트에어리어(textarea)는 여러줄에 걸쳐서 입력할 수 있는 폼 필드입니다. <textarea rows="5" cols="30" name="contents"></textarea> 기본적으로 텍스트에어리어(textarea)의 너비와 높이를 지정하기 위해서 rows와 cols 속성이 사용됩니다. 기본값은 <textarea>와 </textarea> 태그 사이에 적어주면 됩니다. <textarea rows="5" cols="30" name="contents">기본값은 여기에 적어줍니다.</textarea> 기본값은 여기에 적어줍니다.   셀렉트박스(select) 콤보박스라고도 하며 Pull-Down Menus라고 표현하기도 합니다. <select name="job">     <option value="">직업선택</option>     <option value="학생">학생</option>     <option value="회사원">회사원</option>     <option value="기타">기타</option> </select> <select>태그와 <option>태그로 구성됩니다. 직업선택 학생 회사원 기타 <option> 태그에서 사용하는 value 속성은 텍스트 필드에서의 value 속성과는 조금 틀립니다. 텍스트 필드에서 value 속성에 값을 입력하면 기본값이 입력되지만 <option> 태그의 경우는 이 <option>이 선택된 경우 전송되는 값을 지정하는 것입니다. 위의 예제에서 학생을 선택된채로 폼을 전송했다면 job 필드의 value값은 <option value="학생">의 value값인 "학생"으로 지정됩니다. 기본값으로 회사원이 선택되게 할려면 selected 속성을 사용해야 합니다. <select name="job">     <option value="">직업선택</option>     <option value="학생">학생</option>     <option value="회사원" selected="selected">회사원</option>     <option value="기타">기타</option> </select> 아래와 같이 회사원이 선택된채로 출력됩니다. 직업선택 학생 회사원 기타 <optgroup>은 HTML 4 버전에서 새로 만들어진 태그로 옵션에 카테고리를 만들 수 있습니다. 대부분의 웹브라우저에서 지원하고 있다. <select name="hobby">      <option value="독서">독서</option>      <optgroup label="스포츠">         <option value="야구">야구</option>         <option value="축구">축구</option>      </optgroup>      <option value="음악감상">음악감상</option> </select> 스포츠라는 카테고리를 만들고 야구와 축구 옵션을 추가하였습니다. 독서 야구 축구 음악감상 체크박스(Check Box) 셀렉트박스(select)와 라디오 버튼(radio button)이 하나만 선택할 수 있는 반면 체크박스는 여러개를 선택할 수 있다는 특징을 가지고 있습니다. <input type="checkbox" name="chk_info" value="HTML">HTML <input type="checkbox" name="chk_info" value="CSS">CSS <input type="checkbox" name="chk_info" value="웹디자인">웹디자인 기본적인 체크박스(Check Box)의 형태입니다. HTML CSS 웹디자인 value 속성은 선택시 전송해 주는 값을 지정합니다. 위의 예제에서 CSS가 기본적으로 선택된채로 출력할려면 checked 속성을 사용하면 됩니다. <input type="checkbox" name="chk_info" value="HTML">HTML <input type="checkbox" name="chk_info" value="CSS" checked="checked">CSS <input type="checkbox" name="chk_info" value="웹디자인">웹디자인 아래와 같이 CSS가 기본적으로 선택된 상태로 출력됩니다. HTML CSS 웹디자인 체크박스(Check Box)는 복수의 값을 선택할 수 있기에 폼이 전송될때 이 값들이 어떻게 전송되는지를 잘 이해해야 합니다. 위의 예제에서 체크박스의 name 속성을 3개 모두 "chk_info"라고 지정하였습니다. 이때 HTML과 CSS를 동시에 선택하면 chk_info 필드의 값은 "HTML,CSS" 이런식으로 들어갑니다. 웹프로그램으로 전송된 폼 값을 처리해본 경험이 없는 경우 value 값이 중요한지 느끼기가 힘듭니다. 그러나 폼을 만들고 사용자에게 이 폼에 입력을 하라고 요구하는 것은 어떤 값을 전송 받아서 이를 처리하기 위함인것을 기억해야 합니다. 즉 왜 폼을 만드는지 이해를 한 상태에서 <form>태그와 폼 필드를 익혀야 한다는 말입니다.

라디오버튼(Radio Button)

체크박스와 비슷하나 라디오 버튼은 하나만 선택할 수 있다는 특징을 가지고 있습니다. <input type="radio" name="chk_info" value="HTML">HTML <input type="radio" name="chk_info" value="CSS">CSS <input type="radio" name="chk_info" value="웹디자인">웹디자인 HTML CSS 웹디자인 위의 예제에서 CSS가 기본적으로 선택된채로 출력할려면 checked 속성을 사용하면 됩니다. <input type="radio" name="chk_info" value="HTML">HTML <input type="radio" name="chk_info" value="CSS" checked="checked">CSS <input type="radio" name="chk_info" value="웹디자인">웹디자인 HTML CSS 웹디자인   리셋버튼(Reset Button) 리셋버튼(Reset Button)은 폼에 입력한 값을 취소하고 초기화 시킵니다. <form name="input" method="post" action="">     <input type="text" name="memberName" maxlength="10">     <input type="reset" value="초기화"> </form> 아래 예제에서 데이터를 입력한 후 초기화 버튼을 눌러보면 확인할 수 있습니다. 전송버튼(Submit Button) 전송버튼은 폼을 지정한 페이지로 전송시킵니다. <form name="input" method="post" action="">     <input type="text" name="memberName" maxlength="10">     <input type="submit" value="전송"> </form> 아래 예제에서는 <form> 태그에서 action 속성을 지정하지 않았기에 전송되지는 않습니다. 이미지 버튼(Image Type) 이미지 버튼(Image Type)은 전송버튼(Submit Button)의 역할을 하면서 이미지로 출력되는 버튼입니다. <input type="image" src="submit.gif"> 전송버튼이 아닌 일반적인 버튼을 이미지로 처리할려면 <img>태그를 사용하고 이를 자바스크립트를 이용하여 액션을 지정해야 합니다. 파일(File Form Control) 게시판 등에 첨부파일을 업로드 하는 경우 찾아보기 버튼을 사용합니다. <input type="file" name="FileName"> type 속성에 "file" 이라는 값만 사용하면 파일을 업로드 할 수 있는 버튼을 만들 수 있습니다. 파일 첨부 기능이 있는 폼을 만들때는 반드시 <form> 태그에 enctype 속성을 multipart/form-data로 지정해 주어야 합니다. <form action="" method="post" enctype="multipart/form-data" name="">     <input type="file" name="FileName"> </form> 히든 필드(Hidden Field) 사용자가 입력하거나 선택하는 정보는 아니지만 폼 전송이 같이 전송해줘야 하는 정보를 담기 위해서 히든 필드(Hidden Field)를 사용합니다. 예를들어서 회원가입시 사용자의 아이피를 받는 경우 히든필드에 넣어서 폼 전송시 함께 전송합니다. <input type="hidden" name="UserIP" value="<?echo $REMOTE_ADDR?>"> value 속성에 들어있는 "<?echo $REMOTE_ADDR?>"라는 값은 PHP 코드의 일종입니다. 사용자의 아이피를 인식하는 코드입니다. 히든필드는 화면에 출력되는 부분이 아니기 때문에 폼의 외형을 제작할때는 아무런 영향을 미치지 않습니다. 그러나 웹프로그램을 할때는 아주 빈번하게 사용되는 중요한 폼 필드 중 하나입니다. label element label은 element는 사용자가 input box, check box, radio button 등을 좀 더 쉽게 선택할 수 있도록 도와줍니다. label 부분을 클릭하면 input box의 경우에는 자동으로 focus가 이동하고 check box, radio button의 경우는 자동으로 선택됩니다. label의 for 속성의 이름과 폼요소의 id 값이 일치하게 아래와 같이 작성하면 됩니다. <label for="html">HTML</label> <input name="checkinfo" type="checkbox" id="html"> <label for="css">CSS</label> <input name="checkinfo" type="checkbox" id="css"> 아래에서 HTML과 CSS 부분을 클릭해 보면 효과를 확인할 수 있습니다. HTML CSS

autocomplete 자동완성 기능의 사용여부를 지정

autocomplete 속성은 자동완성 기능의 사용여부를 지정합니다. IE의 경우 사용자의 편의를 위하여 입력박스에서 자동완성기능을 제공합니다. 그러나 보안이 필요로 하는 곳에서는 이 기능을 강제적으로 막을 필요가 있습니다. form 전체에서 autocomplete 기능을 제거 <form autocomplete="off"> 특정 form 요소에서만 autocomplete 기능을 제거 <input type="text" autocomplete="off">