HTML 기초, <form><textarea> 태그와 <input>속성 password, checkbox (25번째)

HTML 기초, <form><textarea> 태그와 <input>태그 속성 password, checkbox

 

HTML 문서는 다양한 형식 ( 텍스트 입력 양식, 버튼, 체크박스 등 )을 포함한 입력 폼을 제공합니다. 이런 입력 폼을 제공하는 <form> 태그와 그와 관련된 다양한 태그를 살펴보겠습니다. 홈페이지에서 사용자가 입력한 데이터를 받기 위해서 필요한 것이 폼 입니다.

 

◎ 폼 양식을 만드는 <form> 태그

 

입력 양식 폼을 구성하는 기본 골격을 제공하는 것이 <form> 태그입니다. 이 내부에 텍스트 입력 양식, 암호 입력 양식 등을 기술해야됩니다. <form> 태그에 지정할 수 있는 속성들은 뭐가 있을까요?

 

예문)

 

<form action="이동위치" method="방식">

다양한 폼

</form>

 

속성	속성 값	설명
action	url	송신한 폼의 데이터를 처리할 프로그램 url을 지정합니다.
method	get	기본 값으로 입력한 데이터가 url에 포함되어 전송됩니다.
	post	입력한 데이터가 눈에 보이지 않게 전송됩니다.

 

 

◎ 데이터를 입력받기 위한 <input> 태그

 

<input> 태그는 사용자가 입력이나 선택 등을 할 수 있도록 여러 가지 구성요소를 제공합니다. type 속성에 지정하는 값에 따라 다양한 형태로 나타납니다. 외부에서 데이터를 입력받을 수 있는 입력방식을 작성해 보겠습니다.

 

텍스트 입력양식은 글자를 입력받거나 출력하는 용도로 사용합니다. 입출력이 가능한 텍스트 입력양식은 type 속성의 값으로

"text" 를 지정하면 됩니다. 텍스트 입력 양식의 속성을 살펴볼까요?

 

속성	속성 값	설명
name	문자열	텍스트 입력상자가 여러 개일 경우 name 속성에 특정 이름을 지정하면 어느 입력 양식에 입력된 데이터인지를 구분할 수 있습니다.
value	문자열	사용자가 입력하기 전에 웹 브라우저가 로드되자마자 초기값을 지정할 경우 사용하는 속성입니다.
maxlength	숫자	텍스트 입력양식에 입력받을 수 있는 최대 글자 수를 지정합니다.
size	숫자	화면에 보여지는 텍스트 입력양식의 최대 길이를 지정합니다.

 

 

예문)

 

<input type="text" name="이름" value="초기값" maxlength="최대길이" size="크기">

 

 

tip. 소스설명

 

* value 속성에 지정한 값은 텍스트 입력상자에 사용자가 입력하지 않아도 웹 브라우저에 HTML 문서가 로드됨과 동시에

  글자가 나타나도록 합니다.

* size 속성 값을 30으로 지정하면 텍스트 입력상자는 약 30자 정도의 글자를 입력할 수 있는 크기의 너비로 나타납니다.

* maxlength 속성 값을 10으로 지정하면 10글자 이상 입력할 수 없도록 제한을 합니다.

 

◎ 암호를 입력받기 위한 password

 

텍스트 입력 양식에 암호를 입력하면 옆에 사람이 볼 수 있으므로 입력 당시에는 입력되는 문자가 보이지 않아야됩니다.

입력한 문자대신 '*' 문자가 출력되도록 하는 입력상자를 만들려면 type 속성을 "password" 로 지정하면 됩니다.

<input> 태그의 type 속성값을 "password"로 지정했을 뿐 위에 공부한 텍스트 입력상자의 속성을 그대로 사용하면됩니다.

 

예문)

 

<input type="password">

 

 

 

◎ 여러 라인의 글자를 입력받기 위한 <textarea> 태그

 

텍스트 영역은 여러 줄에 걸쳐 글자들을 입력할 수 있는 입력 양식입니다. 몇 줄의 문장을 입력받을 수 있는 입력양식을 만들지 지정하기 위해서는 rows에 행수를 설정하면 됩니다. 한 줄에 입력할 수 있는 글자 수는 cols에 지정합니다.

 

속성	속성 값	설명
cols	숫자	텍스트 영역의 너비를 지정합니다.
rows	숫자	텍스트 영역의 높이를 지정합니다.
name	문자열	텍스트 영역이 여러 개일 경우 name 속성에 특정 이름을 지정하면 어느 입력양식에 입력된 데이터인지를 구분할 수 있습니다.

 

 

 

 

 

◎ 체크 박스를 위한 checkbox

 

사용자가 선택하기 편하도록 여러 개의 항목을 나열해 이중에서 원하는 항목을 선택할 수 있도록 하는 것이 체크 박스 양식입니다. 다른 입력 양식과 차이점은 checkbox 속성이 있다는 것. checkbox 속성을 지정하면 초기화면에 체크된 상태로 나타납니다.