HTML
form 태그
form 태그
앞에서 학습한 내용을 다시 한번 복습하면서 간단한 회원가입 폼도 만들어 봅시다.
폼 태그는 우리가 회원가입을 할때 많이 보던 것들입니다.
직업을 선택한다거나 생년월일 선택 남자 여자 구분, 휴대폰 번호 넣기 주소 입력 등등
이제부터 만들어 볼꺼에요.! 각각의 태그들을 설명하고 그것들을 조합하여 간단함 회원가입페이지를 만들어 보도록 합시다. ^^
자 그럼 시작해 볼까요
<form name="해당 폼의 이름" action="값을 보낼 주소" method="post 방식인지 get 방식인지"> 각종 태그 </form>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>form태그 학습</title>
</head>
<body>
<form name="해당 폼의 이름" action="값을 보낼 주소" method="post 방식인지 get 방식인지">
각종 태그
</form>
</body>
</html>
결과는 바로 아래에서 확인할 수 있습니다.
위와 같이 이루어 집니다.
name은 저 폼의 이름인데요 나중에 자바스크립트 라던지 해서 쓸일이 있으므로 지정을 해주셔야 합니다.
value는 네임의정보가 갖고가는 실제 값입니다.
action은 우리가 작성한 값들 이름 나이 주소 등등을 보낼 페이지 인데요. 이것은 php 다루는 부분 입니다. 나중에 php강좌로 진입하시면 아하! 하실것입니다.
method에서는 POST 또는 GET을 입력합니다. 이부분도 php 강좌에서 자세히 학습합니다.
텍스트상자
이름이나 이메일, 주소등 짧은글의 직접 타이핑해야 하는 정보에 사용합니다.
<input type="text" name="myname" value="" placeholder="입력란 설명" maxlength="입력가능 글자 수" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>form태그 학습</title>
</head>
<body>
<form name="해당 폼의 이름" action="값을 보낼 주소" method="post 방식인지 get 방식인지">
<input type="text" name="myname" value="" placeholder="이름을 입력하세요." maxlength="입력가능 글자 수" />
</form>
</body>
</html>
결과는 바로 아래에서 확인할 수 있습니다.
소스는 위와 같고요.
실행을 해보면 아래와 같이 나오게 됩니다.
결과
그럼 우리가 비밀번호를 입력할때 검은색 동그라미로 나오는데 그것을 만들어 보도록 합시다.
위와 같은 소스에 타입을 password로 바꿔줍시다. 기타 다른 정보도 아래와 같이
<input type="password" name="mypw" placeholder="비밀번호 입력" maxlength="20" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>form태그 학습</title>
</head>
<body>
<form name="해당 폼의 이름" action="값을 보낼 주소" method="post 방식인지 get 방식인지">
<input type="password" name="mypw" placeholder="비밀번호 입력" maxlength="20" />
</form>
</body>
</html>
결과는 바로 아래에서 확인할 수 있습니다.
결과
위에 무언가를 입력했을때 안보이게 처리가 되어서 나오죠 이게 비밀번호 입력폼입니다. ^^ name="" 이부분은 php를 사용할 때 사용됩니다. 저 네임 정보가 패스워드 입력폼의 값을 나태냅니다. 지금은 잘 모르실꺼에요.^^
체크박스
체크박스는 예를들어 취미를 선택하거나 하는등 여러항목을 중복체크 할때 사용하는 기능 입니다.
그럼 해봅시다.
<input type="checkbox" name="computer" value="computer" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>form태그 학습</title>
</head>
<body>
<form name="해당 폼의 이름" action="값을 보낼 주소" method="post 방식인지 get 방식인지">
<input type="checkbox" name="computer" value="computer" />컴퓨터
</form>
</body>
</html>
결과는 바로 아래에서 확인할 수 있습니다.
실제 적용시 아래와 같습니다.
결과
위에는 단순히 체크박스만 떳는데요. 앞에 한글로 컴퓨터를 입력한다면 아래와 같이 됩니다.
결과
컴퓨터
그리고 checked라는것이 있는데요 그것을 사용 하면 체크가 되어서 표시가 된답니다.
<input type="checkbox" name="computer" value="computer" checked/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>form태그 학습</title>
</head>
<body>
당신의 취미는 ?<br />
<form name="해당 폼의 이름" action="값을 보낼 주소" method="post 방식인지 get 방식인지">
컴퓨터 <input type="checkbox" name="computer" value="computer" checked/>
음악감상 <input type="checkbox" name="listening" value="listening" checked/>
</form>
</body>
</html>
결과는 바로 아래에서 확인할 수 있습니다.
결과
컴퓨터 음악감상
위와 같이 말이죠.^^
라디오 버튼
라디오 버튼은 여러가지 항목중에 하나만 선택하는 기능 입니다.
<input type="radio" name="" />
위에서 같은 그룹 이라면 name값을 통일시켜 주셔야 합니다. 라디오 버튼을 5개 만든다고 했을때 5개가 같은 그룹이라면 5개 항목 모두 네임값이 같아야 하니다. 그리고 checked를 입력해주면 기본적으로 체크가 되어 있습니다.
음... 하나만 선택해야 하는 것은 어떠한 것들이 있을까요? 통신사를 예로 들어서 한번 만들어 보겠습니다.
사용중인 통신사를 선택해주세요.
SKT
KT
LGU+
위의 소스는 아래와 같습니다. 보면 네임값이 텔레콤으로 통일 되어 있는데요. 라디오 버튼을 클릭해보시면 다른 버튼을 누르시 이미 선택되었던 버튼은 해제되는 것을 보실 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>form태그 학습</title>
</head>
<body>
사용중인 통신사를 선택해주세요.<br />
<form name="해당 폼의 이름" action="값을 보낼 주소" method="post 방식인지 get 방식인지">
SKT<input type="radio" name="telecom" value="skt" />
KT<input type="radio" name="telecom" value="kt" />
LGU+<input type="radio" name="telecom" value="lgu" />
</form>
</body>
</html>
결과는 바로 아래에서 확인할 수 있습니다.
그럼 이번엔 네임값 끝에 서로 다른 숫자를 부여해서 테스트 해봅시다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>form태그 학습</title>
</head>
<body>
사용중인 통신사를 선택해주세요.<br />
<form name="해당 폼의 이름" action="값을 보낼 주소" method="post 방식인지 get 방식인지">
<p>사용중인 통신사를 선택해주세요.</p>
SKT<input type="radio" name="telecom1" value="skt" />
KT<input type="radio" name="telecom2" value="kt" />
LGU+<input type="radio" name="telecom3" value="lgu" />
</form>
</body>
</html>
결과는 바로 아래에서 확인할 수 있습니다.
아래에서 다시 테스트를 해봅시다. 이버튼 눌러보고 저 버튼 눌러 보고 하시면 다른 버튼을 눌러도 그 전 버튼은 해제가 안됩니다.
사용중인 통신사를 선택해주세요.
위와 같은 현상이 나타나므로 꼭 같은 그룹이라면 네임같은 통일 시켜 주어야 합니다. 안그러면 php프로그램시 제대로된 정보를 입력 못하게 됩니다. ^^
많은 줄을 입력할 수 있는 Textarea 태그
textarea 태그는 여러 라인의 텍스트를 입력할 수 있는 태그 입니다. 예를 들어 온라인 서류 작성시 자기소개서 라든지 성장과정이라든지를 입력하는 창입니다.
<textarea name="application_form"> 입력할 내용 </textarea>
결과는 바로 아래에서 확인할 수 있습니다.
위와 같이 활용 하시면 됩니다.
Select 박스
select박스는 여러개의 목록중에 하나를 선택하는건데요. 주로 생년월일이나 직업등을 선택할때 사용되는 방식입니다.
소스는 다음과 같습니다. 생년월일의 년도를 지정하는 것을 예로 들어 봤습니다.
checked는 초기 선택 항목을 하고 싶은곳에 넣으면 됩니다.
먼저 select 태그를 열어준 후에 네임값 설정을 해줍니다.
그리고 옵션 태그를 열어서 select태그에서 보일 정보들을 넣어 줍니다.
value를 꼭 넣어야 하고요. 그래야만이 php에서 정보를 넘길때 그 벨류 값이 넘어 가게 됩니다.
그리고 옵션태그를 넣은 다음에 그 해당값이 실제 사람이 보이게끔 다시 써주고 옵션태그로 닫아 줍니다. ^^
<select name="birth">
<option value="2000" selected(초기 선택된 항목)>2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
</select>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>form태그 학습</title>
</head>
<body>
<form name="해당 폼의 이름" action="값을 보낼 주소" method="post 방식인지 get 방식인지">
<select name="birth">
<option value="2000" selected(초기 선택된 항목)>2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
</select>
</form>
</body>
</html>
결과는 바로 아래에서 확인할 수 있습니다.
그럼 아래에서 실행을 해보도록 하겠습니다. 왼쪽메뉴에 있는 연습장을 이용하면 궃이 노트패드++ 이나 textwrangler 같은 에디터를 사용하지 않아도 된답니다 .^^
결과
위의 select 박스 예문을 이용하여 다른 직업인, 월, 일등도 응용 할 수 있습니다.
submit과 reset
submit와 reset에 대해서 배워 봅시다.
submit은 우리가 지금까지 작성해온 아이디 이름 주소 전화번호 등의 정보를 보내는 버튼 입니다. 그러면 php의 post방식으로 받는 페이지로 설정된 페이지로 그 정보들이 날아갑니다. 태그는 간단 합니다.
<input type="submit" name="submit" value="표시할 문구" / >
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>form태그 학습</title>
</head>
<body>
<form name="해당 폼의 이름" action="값을 보낼 주소" method="post 방식인지 get 방식인지">
<select name="birth">
<option value="2000" selected(초기 선택된 항목)>2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
</select>
<input type="submit" name="submit" value="입력완료"/ >
</form>
</body>
</html>
결과는 바로 아래에서 확인할 수 있습니다.
이걸로 끝입니다.
reset은 우리가 쓴 내용들을 모두 지울때 사용 합니다. 많이들 보셨을거라 생각해서 더이상의 설명은 필요 없을듯 합니다.
<input type="reset" name="reset" value="표시할 문구"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>form태그 학습</title>
</head>
<body>
<form name="해당 폼의 이름" action="값을 보낼 주소" method="post 방식인지 get 방식인지">
<input type="text" placeholder="글씨를 입력후 리셋." name="submit" value=""/ >
<input type="submit" name="submit" value="입력완료"/ >
<input type="reset" name="reset" value="입력값 초기화"/>
</form>
</body>
</html>
결과는 바로 아래에서 확인할 수 있습니다.
위처럼 태그를 사용 합니다.
한템포 쉬실 분들은 쉬시고 오신다음에 초 간단한 회원가입 폼을 만들어 봅시다.
테이블 태그를 이용해서 만들어 볼건데요. 테이블을 잘 안쓴다 하더라도 회원가입 폼은 대부분 테이블을 많이 사용 합니다. ^^
아래의 소스를 입력하시면 소스 밑의 회원가입 폼을 보실 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>form태그 학습</title>
</head>
<body>
<form name="해당 폼의 이름" action="값을 보낼 주소" method="post 방식인지 get 방식인지">
<table>
<tr>
<td>이름</td>
<td><input type="text" name="user_name" /></td>
</tr>
<tr>
<td>아이디</td>
<td><input type="text" name="user_id" /></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" name="user_pw" /></td>
</tr>
<tr>
<td>비밀번호 확인</td>
<td><input type="text" name="user_pw2" /></td>
</tr>
<tr>
<td>주소</td>
<td><input type="text" name="user_address" /></td>
</tr>
<tr>
<td>생년월일</td>
<td><select name="user_birth_year">
<option value="2000" selected>2000</option>
<option value="2001" selected>2001</option>
<option value="2002" selected>2002</option>
<option value="2003" selected>2003</option>
<option value="2004" selected>2004</option>
</select>
년
<select name="user_birth_month">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
월
<select name="user_birth_day">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
일
</td>
</tr>
<tr>
<td>직업</td>
<td><select name="user_job">
<option value="student">학생</option>
<option value="teacher">교사</option>
<option value="developer">개발자</option>
<option value="publisher">퍼블리셔</option>
<option value="driver">운전사</option>
<option value="architecture">건축가</option>
<option value="actor">배우</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="submit" value="완료" />
<input type="reset" name="reset" value="리셋" /></td>
</tr>
</table>
</form>
</body>
</html>
결과는 바로 아래에서 확인할 수 있습니다.
결과
| 이름 | |
| 아이디 | |
| 비밀번호 | |
| 비밀번호 확인 | |
| 주소 | |
| 생년월일 | 년 월 일 |
| 직업 | |
