[HTML] 폼 태그 1, 폼 요소 태그들 - 1

폼(Form)이란, 웹에서 사용자가 웹에게 보내는 정보들을 입력하는 공간을 말합니다. 로그인창이나 인터넷 쇼핑의 주소지 입력란이 폼이고, 검색어를 입력하는 곳도 폼입니다. 폼은 태그 갯수가 많진 않지만 속성이 다양해서 먼저 태그만 알아보도록 하겠습니다.

폼요소들은 복잡하지는 않지만 각 요소마다 많은 속성들을 가지고 여러가지 형태를 가집니다. 이번포스트에서는 태그에 대해서만 다루고 다음에 요소의 속성에 대해서 따로 다루겠습니다.

 

<form> : 폼에 관련된 기능을 넣기 위한 태그입니다. 표를 만들던 <table>과 비슷하게 <form>태그안에 폼요소를 넣는식으로 사용합니다.

 

<input> : 사용자가 정보를 입력하는 공간을 만드는 태그입니다. type속성을 이용해 입력하는 정보란이나 버튼을 만들어 낼 수 있습니다. 닫는태그가 없습니다.

 

<lable> : 폼요소에 텍스트를 붙여줍니다. 로그인창 보면 아이디 입력란 옆에 "아이디"라고 써진 문구를 보실 수 있습니다. 그러한 레이블을 붙여주는 태그입니다.

 

<button> : 정보를 제출하는 버튼을 넣습니다. 

<form> <input> <lable><button>

• type속성 text : 폼요소에 텍스트 문구를 넣을 수 있습니다.
• type속성 password : 폼요소에 텍스트 문구를 넣지만 글자가 보이지 않는 형태로 입력됩니다.

 

 

<fieldset> : 여러개의 폼요소들을 하나의 묶음으로 묶어주고 외곽선을 만듦니다.

 

<legend> : <fieldset>으로 묶인 요소들에 이름을 붙입니다.

<fieldset> <legend>

---

이번 포스트의 마지막은 폼요소를 출력하는 태그를 알아보려고 합니다. 수많은 웹중에서 로그인 서비스같은 경우는 로그인버튼만 누르면 서버에 제출되고 끝이지만 계산기기능이 있는 웹이나 다운로드가 있는 웹은 결과를 내보내거나 진행상태를 보여주어야 하는 경우도 존재합니다. 다음은 그런 폼요소들을 출력해주는 태그들입니다. 이 친구들도 속성을 많이 가지고 있는데, 이것또한 따로 포스팅하겠습니다.

 

<meter> : 점유율을 표시해줍니다. 웹 드라이브를 보면 전체 용량중 몇%를 사용하는지 나타내는 그래프가 있는데 이 그래프를 표시해주는 태그입니다.

<meter>

 

<progress> : 진행현황을 표시해줍니다. html과 css만을 이용했을때는 정적인 막대로 표시되지만, 자바스크립트를 이용하면 진행상태가 오르는 듯한 효과를 줄 수 있습니다.

<progress>

 

<output> : 폼에 입력한 값의 계산결과를 나타내주는 태그입니다. 일반 텍스트와 같아보이지만 브라우저가 계산 결과라는 것을 인식하게 해주는 태그입니다. 단순히 출력을 할 수도있고 결과값을 저장하는 역할을 할 수도 있습니다.