[HTML]폼 태그(form tag)

태그 종류 중 저번 텍스트와 기타, 테이블 태그와 같이 폼 태그가 있다. 로그인이나 가입 등의 페이지를 만드는 태그라 중요도가 매우 높은데, 이 폼에 기본적으로 쓰이는 태그들은 물론, 텍스트, 테이블, 하이퍼링크 등도 폼 안에 모두 넣을 수 있는 틀 형식의 태그다.

 

폼 태그

<form action="주소 또는 문서 경로" method="get 또는 post"> : 폼 생성(로그인, 자기소개 등), 아래의 태그들은 이 태그 안에 작성

action은 어느 위치로 폼 데이터를 이동시킬지, method는 어떤 방식으로 이동시킬지 지정. get 방식은 주소창에 데이터가 나타나게 하고, post 방식은 나타나지 않는다.

<fieldset> : 그룹박스 생성

<legend> : 그룹 이름 지정

<label> : 라벨로 지정되면 스타일이 동일하게 적용

<input type=""> : 값에는 text, password, radio, checkbox, file, hidden, button, submit, image, reset, email, search, url, tel, number, range, date, month, week, time, datetime-local 등 사용 가능

<textarea rows="" cols=""> : 자유롭게 작성하는 텍스트 칸

<select> : 목록상자 태그(<input type="text" list=""> : 텍스트 목록상자)

<datalist id=""> : 텍스트 목록상자 안에 들어가는 데이터 지정 태그(list 값과 똑같이 적어야 함)

<option> : 목록상자 또는 datalist 태그 안에 들어가는 옵션 태그

 

아래는 간단한 회원가입 폼을 작성한 것이다. 화면을 꾸미는 건 css이기 때문에, html로는 이렇게 형태만 만든다.

아이디는 최대 5글자에 페이지를 열면 자동 활성화되고, 비밀번호는 텍스트상자 크기 30, 그리고 미 작성 시 제출이 불가능하게(required) 했다. 자기소개는 10행 25열 크기의 textarea이며, 성별은 radio 타입인데, name이 똑같은 radio 타입은 한쪽만 선택 가능하다. "남"에 checked를 넣어 기본으로 체크되게 했다. 취미는 checkbox로 radio와 비슷하지만, 같은 name도 중복 선택이 된다. 또한 이메일은 텍스트에 배경처럼 설명이 보이게(placeholder) 했다. 이렇게 작성하면 아래 화면처럼 뜨는데, 전송을 누르면 get 방식으로 action의 경로에게 보내지고 초기화를 누르면 입력값이 리셋된다.

 

이 태그들 외에 폼에서 쓰는 태그들도 아래와 같이 작성했다. 하단쯤에 보이는 label 태그는 css로 스타일을 지정하지 않으면 의미가 없다.

여기서 range 타입은 막대처럼 표시되고, tel 타입은 모바일에서 숫자판이 뜨는데 연락처 입력 시 사용한다. 숫자와 날짜 모두 미니멀/맥시멈 값을 설정했고, 날짜는 월별, 주별로도 표기 가능하다. 또한 시간만 표시하거나, 날짜/시간을 같이 표시하는 형식도 표현할 수 있다.

그리고 목록상자는 selected를 넣어 기본값으로 목록1이 설정되게 했으며, 텍스트 목록상자는 위에서 말했듯 list와 datalist의 값이 같아야 한다. 파일 업로드와 검색도 있고, 작성은 되지만 보이지 않는 히든값, 주소 형식으로만 입력 가능한 url 태그도 있다. submit과 다르게 button은 클릭만 되며, 이미지를 삽입하면 클릭 시 submit이 된다.

 

다른 태그들도 중요하지만 form 태그 같은 경우에는 이것저것 연습을 많이 해보는 게 좋다. 그래서 여러 가지 태그를 종합하여 아래의 지원서 폼을 작성했다.

텍스트 태그, 테이블과 목록 태그 등을 넣어서 폼 만든 입사 지원 폼이다. 이렇게 작성한 후 런을 하면 아래 화면처럼 지원서가 표시된다.

 

이제 웹 개발에 필요한 HTML 부분은 거의 끝났으나, CSS도 html 파일에서 작성하기 때문에 계속 쓰게 될 것이다. 위 화면처럼 만들어놓은 페이지를 css가 글자, 배경, 위치 등을 꾸미고 나면, 드디어 보기 좋은 페이지가 된다.