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에서 스크립트를 추가합니다.