HTML 14단계 - 폼(Form) 2탄

안녕하세요

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

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

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

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

 

▣ 폼(Form) - 입력양식의 형식

홈페이지에서 사용자에게 정보를 입력받거나 페이지와 페이지의 정보를 주고 받을때 여러가지의 입력방식을 사용합니다. 

사용자가 실질적으로 값을 넣을 수 있는 인풋 박스,  텍스트 박스, 체크 박스 등이 위치하여 여러가지 정보들을 입력할 수 있게 해줍니다. 

이번시간부터는 입력양식에 어떤것들이 있는지와 어떻게 사용하는지를 자세히 살펴보도록 하겠습니다. 

 

1. 텍스트 필드(Text Field)

 

텍스트 필드(Text Field)는 이름이나 주소와 같이 텍스트를 입력받을때 주로 사용하는 입력양식입니다.

텍스트 필드(Text Field)에서 가장 기본적으로 들어가는 속성은 type, name 입니다.

type 속성은 폼(form) 필드의 종류를 지정합니다. type 속성의 값이 text 이므로 즉 텍스트 필드(Text Field)를 의미합니다.

name 속성은 폼 필드의 이름을 지정하는 속성입니다. 하나의 폼 안에서 name 속성 값은 고유한 값이어야 하며, 폼(form)이 post, get 방식으로 값이 전송되고 나서 폼을 처리하는 파일에서 각각의 폼 필드를 구분하기 위함입니다.

 

type 속성과 name 속성은 텍스트를 필드뿐 아니라 모든 폼 필드에서 공통적으로 사용되는 속성입니다.

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

<input type="text" name="member_name">

 

텍스트 필드(Text Field)에서 사용할 수 또 다른 속성들도 한번 살펴보겠습니다.

 

size 속성은 텍스트 필드(Text Field)의 크기를 지정할 수 있는 속성입니다. size 속성을 지정하지 않으면 기본값은 20으로 설정됩니다.

 

maxlength 속성은 텍스트 필드에 입력할 수 있는 최대 글자수를 지정합니다. 입력할 수 있는 글자값을 제한하려면 maxlength 속성을 사용합니다.

 

value  속성은 텍스트 필드(Text Field)에 입력되는 기본값을 지정할 때 사용합니다.

 

2. 패스워드 필드(Password Field)

 

비밀번호를 입력하는 패스워드 필드(Password Field)는 텍스트 필드와 모양은 동일하지만 단지 입력한 값이 *****로 표시된다는 차이점이 있습니다. 비밀번호나 중요한 정보값이 노출된다면 이는 보안상의 문제가 있기 때문에 보편적으로 비밀번호나 중요한 정보값을 입력할때나 출력할때 사용합니다.

사용방법은 텍스트 필드와 동일하나 type 속상만 password로 지정했다는 차이만 있습니다. 

 

그럼 예문을 통해 살펴보도록 하겠습니다.

<input type="password" name="member_password">

 

화면상의 출력된 부분을 확인해보시면 텍스트 필드와 차이는 없지만 필드값에 값을 입력하여 넣어보시면 *****로 표시되는것을 확인하실 수 있습니다. 

기타 size, maxlength와 같은 속성들도 텍스트 필드와 동일하게 사용할 수 있습니다. 

 

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

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

다음시간에는 폼(Form) 3탄에 대해서 포스팅 해볼껀데요. 많은 응원과 기대해주세요. 감사합니다.