HTML 18단계 - 폼(Form) 6탄

안녕하세요

HTML 18단계 폼(Form) 6탄 시간이 돌아왔습니다.

저번 시간에는 폼(Form) 5탄을 알아봤는데요 혹시나 잊지는 않으셨겠죠?~

오늘도 화이팅하며, 부담없이 봐주시면 감사하겠습니다.

자 그럼 HTML 18단계 폼(Form) 6탄을 시작해볼께요~

 

1. 파일(File Form Control)

 

파일(File Form Control)는 게시판 등에 첨부파일을 업로드 하는 경우에 찾아보기 버튼을 사용할때 넣는 속성입니다.

 

자 그럼 간단한 예문 소스를 살펴보겠습니다.

<input type="file" value="file_name">

 

type 속성에 "file"라는 값만 사요아면 파일을 업로드 할 수 있는 버튼을 만들 수 있습니다.

여기서 주의할 점이 하나 있는데요 

파일 첨부 기능이 있는 폼을 만들때는 반듯이 <form> 태크에 enctype 속성을 multipart/form-data로 지정해 주셔야 됩니다.

예문 소스를 살펴보겠습니다

<form name="" method="post" action="" enctype="multipart/form-data">

  <input type="file" value="file_name">

</form>

 

2. 히든 필드(Hidden Field)

 

히든 필드(Hidden Field)는 사용자가 직접 입력하거나 선택하는 정보는 아니지만 폼 전송을 할때 같이 전송해줘야 하는 정보들을 담기 위해서 히든 필드(Hidden Field)를 사용합니다.

예를 들어서 회원가입시에 사용자의 아이피를 받는 경우 히든 필드(Hidden Field)에 넣어서 폼 전송시 함께 전송하기도 합니다.

 

자 그럼 간단한 예문 소스를 살펴보겠습니다.

<form name="input" method="post" action="">

  <input type="hidden" name="user_ip" value="<?echo $REMOTE_ADDR?>">

</form>

 

위의 예문 소스에서 value 속성에 들어있는 "<?echo $REMOTE_ADDR?>" 라는 값은 PHP 코드의 일종입니다. 

사용자의 아이피를 인식하는 코드입니다.

히든필드는 화면에 출력되는 부분이 아니기 때문에 폼의 외형을 제작할때는 아무런 영향을 미치지 않습니다.

그러나 웹프로그램을 할때는 아주 빈번하게 사용되는 중요한 폼 필드 중 하나입니다.

 

3. 라벨(label element)

 

라벨(label)은 element는 사용자가 input box, check box, radio button 등을 좀더 쉽게 선택할 수 있도록 도와줍니다.

라벨(label) 부분을 클릭하면 input box의 경우에는 자동적으로 focus가 이동하고 check bix, radio button의 경우는 자동적으로 선택됩니다. 

라벨(label)의 for 속성의 이름과 폼요소의 id값이 일치하게 코딩하시면 됩니다.

 

자 그럼 간단한 예문 소스를 살펴보겠습니다.

<label for="html">HTML</lable> <input name="check_box" type="checkbox" id="html">

<label for="css">CSS</lable> <input name="check_box" type="checkbox" id="css">

 

위의 예문 소스에서 HTML과 CSS 부분을 클릭해 보시면 효과를 확인하실 수 있습니다.

 

4. 자동완성(autocomplete)

 

자동완성(autocomplete)의 속성은 자동완성 기능의 사용여부를 지정합니다. 

익스플로러의 경우 사용자의 편의를 위하여 입력박스에 자동완성기능을 제공합니다.

그러나 보안이 필요로 하는 곳에서는 이 기능을 강제적으로 막을 필요가 있습니다.

 

form 전체에 autocomplete 기능을 제거할경우 예문 소스를 살펴보겠습니다.

<from autocomplete="off">

 

특정 form 속성에서만 autocomplete 기능을 제거할경우 예문 소스를 살펴보겠습니다.

<input type="text" autocomplete="off">

 

위의 예문 소스에서 보시다싶이 특성이나 속성에 맞게 autocomplete기능을 자유자재로 사용하실 수 있습니다.

 

 

어떠신가요? 이해가 잘 되시나요?

항상 드리는 말씀이지만 반복해서 연습하셔야 된다는건 필수인거 아시죠?ㅎ

다음시간에는 배경음악에 대해서 포스팅 해볼껀데요. 많은 응원과 기대해주세요. 감사합니다.