10. 폼 태그

이번 포스팅에서는 폼에 관련된 태그들에 대하여 다뤄보겠습니다.

폼(form)은 로그인, 회원가입, 아이디 비밀번호 입력 등 웹 브라우저로 정보를 보낼 수 있는 요소입니다.

따라서, 폼 요소는 웹 브라우저에서 많이 사용되고 있으며, 폼 태그 중에서 많이 사용되는 태그들을 소개하겠습니다.

 

1. <input> 요소

<input> 태그는 앞서 포스팅한 빈태그에 해당하기 때문에, 별도의 내용을 입력하지 않습니다.

다만, type 속성을 통해 다양한 양식으로 활용할 수 있습니다.

 

1. <input type="text"> : type="text"는 주로 아이디나 주소 등 단순 텍스트 입력란을 제공할때 사용합니다. 속성으로는 "placeholder"가 있으며, 사용자가 값을 입력하기 전에 미리 화면에 노출하는 텍스트입니다.
2. <input type="password"> : type="password"는 type="text"와 동일하게 보이지만, 입력한 값이 노출되지 않습니다.
3. <input type="checkbox"> : type="checkbox"는 체크박스를 만들때 사용합니다. 
4. <input type="radio"> : type="radio"는 라디오 버튼을 만들때 사용하며, 체크박스와는 다르게 중복 선택이 불가합니다.

type="checkbox"와 type="radio"의 속성으로는 checked와 name이 있는데요.

checked는 체크박스/라디오 버튼의 체크 유무를, name은 체크박스/라디오 버튼을 그룹화해줍니다.

 

See the Pen Untitled by nitnal (@nitnal) on CodePen.

 

 

 

작업하면서 개발자 도구를 통하여 블록/인라인 레벨을 확인하는 것도 도움이 되니, 시간이 된다면 확인해보시는 것을 권해드립니다.

2. <input> 외 폼 요소

<input> 요소들은 닫는 태그가 없는 빈태그였지만, 지금 설명해드리는 태그들은 닫는 태그가 있는 점 유의해 주세요.

 

1. <textarea> : <input type="text">는 한줄의 텍스트만 입력이 가능했지만, <textarea>는 여러 줄의 텍스트를 입력할 때 사용합니다. 속성으로는 rows(세로 크기를 조절), cols(가로 크기를 조절)가 있습니다.
2. <select> : 콤보박스를 만들때 사용합니다. 자식 요소로 <option>이 있으며, <option>으로 각 항목을 나타냅니다. <option>의 속성으로는 selected가 있습니다.
3. <button> : 버튼을 만들때 사용합니다.type으로는 submit, reset, button이 있습니다.

 

See the Pen Untitled by nitnal (@nitnal) on CodePen.

 

<input> 요소에서 설명하지는 않았지만 <input type="button">도 있는데요.

버튼은 대부분 <button> 태그를 통하여 생성하니 별도로 설명드리진 않았습니다.

다른 다양한 <input> 요소들도 알고 싶다면, 아래 사이트를 통해 확인해 보세요.

 

▶ <input> 요소 확인 바로 가기

 

안내드린 사이트는 MDN이라는 사이트인데요.

웹 브라우저별 최신 기능 지원 여부를 확인하거나, HTML, CSS, JavaScript 기초 지식 등을 확인할 수 있는 사실상 표준 문서라고 생각해주시면 됩니다.

이후에도 MDN 사이트는 많이 활용되니 꼭 한번 들러보세요.

3. 폼 구조 관련 요소

앞의 폼 요소들을 따로 따로 사용할수도 있지만, 그룹화하여 사용하면 하나의 폼 페이지를 구성할 수 있습니다.

 

1. <form> : 폼 요소들을 감싸는 태그로, 데이터를 묶어 실제 서버로 전송해주는 역할을 합니다.
2. <fieldset> : 여러개의 폼요소를 그룹화할때 사용합니다.
3. <legend> : 폼 요소의 제목으로 사용하며, <fieldset> 내부에 사용합니다.
4. <label> : 폼 요소와 명시적으로 연결시킬때 사용하며, 모든 폼요소에 사용할 수 있습니다. 사용할때는 폼 요소의 id 속성값과 <label>의 for 속성값을 같게 입력해야 하고, 사용시 <label>을 클릭해도 폼요소를 클릭한것처럼 동작합니다. <label>은 웹접근성면으로도 중요한 역할을 하기 때문에 폼 요소를 사용할때 가급적 사용하시는 것을 권해드립니다.

 

See the Pen Untitled by nitnal (@nitnal) on CodePen.

 

<label>은 명시적 방식과 암시적 방식으로 사용할 수 있는데요.

 

[명시적 방식]

 

<label for="name">이름</label>
<input type="text" id="name">

 

[암시적 방식]

 

<label>
    이름
    <input type="text">
</label>

 

명시적 방식은 label의 for 값과 input의 id 값을 통해 명시함으로써 연결해주지만, 암시적 방식은 <label> 내부에 <input>을 사용하면서 암묵적으로 연결해주는 방식입니다.

요즘 추세는 명시적 방식으로 연결을 많이 하기 때문에, 연습하실때부터 명시적 방식을 사용하시는 것을 권장합니다.

 

폼 요소들은 얼핏 보면 간단해 보일 수 있으나, 사용 방법이 유사하여 많이 헷갈릴 수 있습니다.

폼 요소들을 하나 하나 직접 작업해 보면서 사용 방법을 명확하게 익히는 것을 권해드립니다.

오늘도 읽어주셔서 감사합니다.

좋은 하루 보내세요! :)