Form TAG 테스트
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
table,
td,
th {
border: 1px solid black;
border-collapse: collapse;
border-spacing: 2px;
}
</style>
</head>
<body>
<h3>회원가입</h3>
<h4>기본정보</h4>
<form method="POST" action="result.html">
<p>아이디 :
<input type="text" name="id" size="10" value="ibbuni" maxlength="14" autofocus="autofocus"></p>
<p>이름 :
<input type="text" name="id" size="10" maxlength="10"></p>
<p>패스워드 :
<input type="password" size="10"></p>
<p>패스워드 확인:
<input type="password" size="10"></p>
<p>전화번호:
<input type="number" size="15"></p>
<p>이메일:
<input type="text" name="email">
<select name="select_email">
<option value="">직접입력</option>
<option value="daum.net">daum.net</option>
<option value="gamil.com">gmail.com</option>
<option value="naver.com">naver.com</option>
</select>
</p>
<p>생년월일
<input type="date"></p>
<p>성별
<input type="radio" name="gender" value="male">
남자
<input type="radio" name="gender" value="female" checked>
여자</p>
<p>취미
<input type="checkbox" checked>JavaScript/JQuery
<input type="checkbox">HTML/CSS
<input type="checkbox">Java
<input type="checkbox">Ruby
</p>
<p>자기소개</p>
<p>
<textarea rows="6" cols="50"></textarea>
</p>
<p>
프로필이미지 <input type="file">
</p>
<input type="submit" value="저장"></button>
<button>취소</button>
</form>
</body>
</html>
| Type |
설명 |
| text |
입력한 text를 그대로 표현해주는 form |
| password |
마스크 처리된 text form |
| textarea |
여러 줄의 text를 입력할 수 있는 form |
| search |
검색 창으로 사용할 수 있는 form |
| date |
날짜를 입력할 때 사용할 수 있는 form |
| time |
시간을 입력할 때 사용할 수 있는 form |
| range |
슬라이드 바 형식의 form |
| number |
수를 선택할 수 있는 하는 form |
| color |
색을 선택할 수 있는 form |
| radio |
선택 항목 중 하나만 선택 가능한 form |
| checkbox |
선택 항목 중 0개 이상 선택 가능한 form |
| file |
파일을 업로드 할 수 있는 form |
| email |
이메일 주소를 입력하게 하는 form |
| url |
웹페이지 주소를 입력하게 하는 form |
| tel |
전화번호를 입력하게 하는 form |