폼은 특정 항목에 사용자가 뭔가를 입력하는 형태를 말합니다. 우리에게 익숙한 폼은 바로 로그인 창이 있겠네요. 이번 포스팅은 이런 폼을 만드는 태그에 대해서 알아보도록 하겠습니다. 폼은 우리가 알게 모르게 굉장히 자주 이용하고 있습니다. 하지만 아직 브라우저별로 지원하는 형태가 달라 표준안이 나올 때까지는 잘 확인해서 자신이 만들 웹에 최적화시켜야 할 것입니다.
폼
정의 : 사용자가 웹 사이트로 정보를 보낼 수 있는 요소
예시 : 검색 사이트의 로그인 창, 회원가입 창
폼을 만드는 태그 및 속성
<form>태그 : 폼을 만드는 가장 기본태그
<label>태그 : 폼 요소 옆에 텍스트 붙이기
<fieldset>, <legend>태그 : 폼 요소들을 그룹으로 묶기
[1] 폼
처음에 설명드렸다시피 폼은 우리가 알게 모르게 주위에서 많이 볼 수 있습니다. 사용자가 웹 사이트로 정보를 보낼 수 있는 요소들을 전부 폼이라고 볼 수 있습니다. 대표적으로는 사이트의 로그인 창과 회원가입 창, 쇼핑몰 사이트의 구매정보창 등이 있습니다. 작동방식은 다음과 같습니다.
폼 작동방식 (회원가입 창)
1. 사용자가 회원가입 양식을 입력하고 확인 버튼을 누른다
2. 사용자가 입력한 내용이 웹 서버로 보내진다
3. 서버는 자신이 가지고 있는 사용자 데이터베이스에 수신된 내용을 저장한다
폼과 관련된 대부분의 작업은 데이터베이스를 기반으로 사용자 정보 저장, 검색, 수정이 있습니다. 데이터베이스를 기반으로 하기 때문에 폼을 완벽하게 활용하려면 HTML 태그에 서버 프로그래밍이 추가로 필요합니다. 정리하면 폼의 형태는 HTML 태그가 마련하고 정보를 처리하는 건 서버 프로그래밍이 해결합니다.
폼의 형태 = HTML태그
정보 처리 = 서버프로그래밍 (PHP,JSP 등)
[2] 폼과 관련된 태그
1. <form> 태그
폼을 만드는 가장 기본적인 태그입니다. 기본형은 다음과 같습니다.
<form 속성="속성값"> 요소 </form>
여기서 속성="속성값" 에 들어갈 수 있는 속성들이 있는데요 이를 <form>태그에 들어갈 수 있는 속성이라고 말합니다. <form>태그에 들어갈 수 있는 속성은 다음과 같습니다.
1. method : 사용자가 입력한 내용을 서버 프로그램에 어떻게 넘겨줄지 지정
2. name : 폼의 이름을 지정 (여러 개의 <form>태그가 있을 때, 폼을 구분하는 역할)
3. action : 태그 안 내용을 처리해 줄 서버 상의 프로그램 지정
4. autocomplete : 자동 완성 기능 (과거 작성 이력이 있을 경우 그 이력을 불러옴)
3번 기능은 서버프로그래밍이 추가로 필요하고, 4번의 autocomplete속성은 대부분의 웹 브라우저에 기본으로 켜져 있기 때문에("on") 만약 보안상의 이유로 이 자동완성기능을 끄고자 한다면 속성 값으로 autocomplete="off" 를 작성해주어 바꾸어주어야 합니다.
2. <label>태그
폼 요소에 레이블 붙여주는 태그입니다. 이렇게 말하니 어렵죠? 우리가 로그인 창을 상상해보면 아이디 옆에 빈칸이 있고 비밀번호 옆에 빈칸이 있습니다. 여기서 빈칸 옆에 있는 텍스트를 레이블이라고 합니다. 이를 더 유식하게 말하면 '입력창(빈칸) 옆에 붙여 놓은 텍스트'라고 할 수 있습니다. 기본형은 아래와 같이 2가지가 존재합니다.
<label 속성="속성값"> 텍스트 <imput> </label>
<label for="이름"> 레이블 </label>
<input id="이름" 속성="속성값">
얼핏 보면 첫 번째 기본형이 사용하기에 더 편해 보이지만 실상은 그렇지 않습니다. 두 번째 기본형이 가진 장점을 첫 번째 기본형은 가지고 있지 않기 때문입니다. 두 번째 기본형의 장점은 <label> 태그와 <input> 태그가 떨어져 있어도 둘 사이를 쉽게 연결할 수 있다는 점인데 이는 복잡한 웹 코드에서 유용하게 사용할 수 있는 장점입니다.
또한 <label> 태그를 이용해서 체크박스에 텍스트를 연결해 놓았다면 텍스트만 터치해도 선택이 되어서 항목 선택하기 쉽습니다. 손가락으로 화면을 조작해서 정확도가 떨어지는 스마트폰의 경우에 체크박스에 정확히 터치를 하지 않아도 되기 때문에 사용성이 높아집니다. 이해 못하신 분들을 위해 더 설명을 해보자면,
□ 선택항목1
□ 선택항목2
와 같이 2개의 항목중 하나를 체크해야할 때 보통 □ 부분을 클릭해야 하지만, label태그와 연결시키면 □ 선택항목 중 아무곳이나 클릭해도 체크가 된다는 의미입니다.
3. <fieldset>, <legend>태그
한 화면 내에서 비슷한 폼 요소들을 그룹으로 묶는데 사용하는 태그들입니다. <fieldset>태그로 윤곽선을 그리고 <legend>태그로 제목을 붙여줍니다. 기본형은 다음과 같습니다.
<fieldset>
<legend> 텍스트 </legend>
다양한 태그(label, input 같은거)
</fieldset>
두 태그에 대한 더 자세한 역할은 아래와 같습니다.
<fieldset>태그는 폼들을 하나의 영역으로 묶고 외곽선을 그림
<legend>태그는 <fieldset>태그로 묶은 그룹에 제목을 붙임
이 태그들을 어떻게 쓰는지 이해가 되지 않는 분들을 위해 예시사항을 가져와보았습니다.
여기서 구매자정보와 받는사람정보 와 같이 폼이 나뉘어있는 것을 확인하실 수 있습니다. 이렇듯 비슷한 것들을 하나로 묶어주는데 사용하는 태그들입니다. <fieldset>태그로 영역을 나누어주었을 것이고 <legend>태그로 '구매자 정보', '받는 사람 정보'와 같이 텍스트를 입력해주었을 것입니다.
오늘은 사용자 입력을 필요로 하는 폼을 만드는 가장 기초적인 내용에 대해 알아보았습니다. 다음에는 <input>태그를 이용해서 폼을 어떻게 활용할 수 있을지에 대해서 알려드리겠습니다.
'코딩' 카테고리의 다른 글
| [컴퓨터언어] 링크(하이퍼링크) 만드는 태그, 소스, 코드 및 속성 (10) (0) | 2021.06.29 |
|---|---|
| [컴퓨터언어] 이미지 태그 및 속성 (9) (0) | 2021.06.27 |
| 티스토리 글 내에서 이동하기 / 페이지 내 원하는 위치로 스크롤 이동 방법 (내부 링크, 하이퍼링크, 앵커) (1) | 2021.06.23 |
| [컴퓨터언어] 웹 표준에 맞는 표 만드는 태그 (HTML공부하기!) - 8 (0) | 2021.06.21 |
댓글