HTML 폼(form) 태그 사용하기 그리고 티스토리
웹 페이지는 대부분 폼(form) 태그를 사용합니다. 사용자에게 정보만 제공하는 게 아니라 대부분은 사용자로부터 입력 양식을 받습니다. 예로 로그인할 때 사용자 아이디와 패스워드 정보를 받거나 회원가입 시 가입정보를 받습니다. 이처럼 웹은 클라이언트와 서버 간 상호 정보를 주고받고 합니다.
그럼 폼(form) 태그를 사용하는 방법에 대해서 알아보죠.
폼(form) 태그
▼ 작동 방식

1. form 태그 기본 사용법
<form [속성 = “속성 값”]>양식 폼 요소들 </form>
2. form 태그의 주요 속성
속성 | 설명 |
---|---|
method | 데이터 전송 방식으로 속성값으로 get 방식과 post 방식이 있습니다. post 방식으로 전송해야 안정합니다. |
action | 데이터를 전송 받을 페이지(서버)를 지정합니다. |
target | action 속성에서 지정한 페이지를 어떤 위치로 보낼지 지정합니다. |
name | 폼의 이름을 지정합니다. |
폼(from) 태그 사용 예제
1. 소스 코드
<!DOCTYPE html>
<html>
<head>
<title>폼 태그</title>
</head>
<body>
<form name="Login_form" action="Login.aspx" method="post" target="_blank">
<label for="usr_id">사용자ID</label>
<input type="text" id="user_id"><br>
<label for="password">패스워드</label>
<input type="password" id="password"><br>
<button onclick="fnclogin()">로그인</button>
</form>
</body>
</html>
2. 실행 결과

폼(form) 안에서 사용되는 태그
태그 | 설명 |
---|---|
<fieldset> | 폼 요소를 그룹으로 묶습니다. |
<legend> | <fieldset> 태그에 대한 제목을 나타냅니다. |
<input> | 사용자로 부터 입력 받는 양식입니다. |
<select> <option> | 드롭다운 목록 양식입니다. |
<textarea> | 텍스트를 여러줄로 받을때 사용하는 양식입니다. |
<datalist> | 데이터의 목록을 추가합니다. |
☞ 다음에 자세히 다룰 예정입니다.
티스토리에서의 폼(form) 사용
폼(form)은 단독으로 사용하는 게 아니라 반드시 스크립트와 같이 사용됩니다. 티스토리 에디터 본문에서는 당연히 스크립트가 지원이 되지 않습니다. 그리고 블로그 작성 시 폼(form) 태그 사용이 필요한지는 모르겠지만 굳이 사용하려면 본문에 폼(form) 태그를 넣고 스키 편집 HTML에 해당 스크립트를 추가하시면 됩니다.
1. 글 본문에 폼(form) 태그를 추가합니다.
2. [스키 편집] → HTML에서 스크립트를 추가합니다.

3. 로그인 버튼을 클릭하면 스크립트가 실행이 됩니다.

HTML 관련 이전 게시글
- [HTML] 페이지 구조 이해하기
- [HTML] 기본 용어(태그, 요소, 속성, 주석) 및 작성 방법
- [HTML] head 태그 정리 및 적용 사례
- [HTML] 시맨택 태그 종류, 웹 페이지 레이아웃 구성 예제
- [HTML] 제목 태그 h1~h6 vs 티스토리 에디터 제목 1~3 비교
- [HTML] 글자(텍스트) 관련 태그 정리
- [HTML] 목록(리스트) 태그 – ol, ul, dl, dd, dt
- [HTML] 테이블(표) 태그 – table, tr, th, td
- [HTML] 이미지 삽입하기, img 태그 및 속성(src, alt)
- [HTML] 오디오, 비디오 삽입하기 – audio, video 태그
- [HTML] 하이퍼링크 삽입하기 – a 태그
- [HTML] 티스토리 본문 목차 만들기 (서식 활용)
이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!