태그 - 폼태그와 <input>태그

 

폼태그

 

폼은 서버로 데이터를 전송할 때 사용한다. 폼은 텍스트 필드인 input, checkboxes, radio-buttons, submit button 등을 사용하여 구성한다. 또한 select lists, textares, fieldset, legend, label 엘레멘트도 사용할 수 있다.

 

<form>

.

input elements

.

</form>

 

 

 

<input> 태그

 

<input>태그는 사용자로부터 데이터를 입력 받을 필드를 생성하는 태그이다. <input>태그는 type속성을 가지고 있으며 type속성의 값에 따라 다른 입력폼을 생성한다. 타입값에 따른 입력폼의 변화에 대해 알아보자

 

 

텍스트 입력폼을 생성하는 text 속성

 

type값이 'text'일 경우 일반적인 텍스트 입력폼을 생성한다.

 

이름: <input type="text" />
<br />
나이: <input type="text" value="20살" readonly />
<br />
주소: <input type="text" disabled maxlength="10" size="20" value="대한민국" />

 

위 HTML의 결과는 아래와 같다.

 

 

type이 text인 경우 여러 가지 속성을 같이 사용할 수 있는데 다음과 같다.

• readonly: text타입과 password 타입에만 지정할 수 있고, 입력폼에 포커스를 줄 수 있어도 입력은 불가능하게 만든다.
• disabled: <input>태그에는 모두 적용이 가능한 속성으로 disabled속성을 지정하면 입력필드의 사용이 불가능하게 만든다.
• maxlength: 입력 받을 값의 길이를 제한하는 속성
• size: 입력 필드의 사이즈를 지정하는 속성
• value: 입력 필드의 기본값을 지정하는 속성

 

 

비밀번호 입력폼 password 속성

 

password 속성은 입력폼에 값을 입력할 때 문자열로 출려되는 것이 아니라 검은색 동그라미로 출력되어 입력된 문자열을 감춰준다.

 

비밀번호: <input type="password" />

 

위 HTML의 출력은 아래와 같다.

 

 

 

 

체크박스(checkbox) 속성과 라디오(radio) 속성

 

checkbox 속성은 여러 개의 값 중 하나 또는 하나 이상을 선택할 수 있는 체크박스를 생성한다. 특별한 속성으로 checked 속성이 있으며 checked 속성은 체크박스 속성과 라디오(radio)속성에서만 지정이 가능한다. checked속성이 있으면 필드에 체크가 되어 있는 상태로 출력된다.

 

성별:
<input type="checkbox" name="sex" value="man" checked>남자</input>
<input type="checkbox" name="sex" value="woman">여자</input>

 

위 HTML의 결과는 아래와 같다.

 

 

radio속성은 여러 개의 값 중에 오직 하나만을 선택할수 있는 라디오 버튼을 생성한다.

 

성별:
<input type="radio" name="sex" value="man" checked>남자</input>
<input type="radio" name="sex" value="woman">여자</input>

 

위 HTML의 결과는 아래와 같다.

 

 

 

 

히든(hidden)속성

 

히든(hidden)속성은 입력 필드를 보이지 않는 숨겨 놓은 필드를 생성한다. 하지만 hidden 속성의 텍스트 콘텐츠는 표시된다.

 

<input type="hidden">hidden속성의 입력필드는 보이지 않고 콘텐츠만 보입니다.</input>

 

위 HTML의 결과는 아래와 같다.

 

 

 

 

button 속성

 

button속성은 버튼을 생성한다.

 

<input type="button" value="버튼" />

 

 

 

image 속성

 

image속성은 이미지를 클릭했을 경우 서밋을 발생시키는 이미지 버튼을 생성한다. 이미지의 경로는 src속성을 사용하여 지정하며 alt 속성을 사용하여 설명을 추가할 수 있다.

 

<input type="image" src="http://www.home.com/image/resource.jsp" />

 

 

 

submit 속성

 

submit속성은 폼 안에 입력된 데이터를 수집하여 폼의 action속성에 지정한 url로 데이터를 전송하는 서밋을 발생시키는 버튼을 생성한다.

 

<input type="submit" value="전송" />

 

 

reset 속성

 

reset속성은 입력 필드에 입력된 데이터를 모두 초기화 시키는 버튼을 생성한다.

 

<input type="reset" value="초기화" />

 

 

 

file 속성

 

file속성은 사용자가 파일을 선택하여 파일을 서버에 전송할 때 사용하는 속성으로 파일 선택 필드가 생성된다. file속성을 사용하여 파일을 전송하기 위해서는 enctype속성을 지정해주어야 하며 이 때 값은 "multipart/form-data"값으로 지정해주어야 한다.

 

<input type="file" />