기본형
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 폼 </title>
</head>
<body>
<form>
<table>
<tr>
<td> 이름 </td>
<td> <input type="text" name="name“
placeholder="이름을 입력하시오." autofocus required> </td>
</tr>
<tr>
<td> 전화번호 </td>
<td> <input type="text" name="phone"
pattern="\d{2,3}-\d{3}-\d{4}$"
placeholder="전화번호를 입력하시오." required></td>
</tr>
<tr>
<td> 이메일 </td>
<td> <input type="email" name="email"
placeholder="이메일을 입력하시오." autocomplete="off" required> </td>
</tr>
<tr>
<td> 홈페이지 </td>
<td> <input type="url" name="homepage"
placeholder="개인 홈페이지 주소를 입력하시오."> </td>
</tr>
<tr>
<td> 생년월일 </td>
<td> <input type="date" name="birthday" required> </td>
</tr>
<tr>
<td> 대학 졸업 년도 </td>
<td> <input type="number" name="graduate" min="1990" max="2020">
</td>
</tr>
<tr>
<td> 영어 평가 등급 </td>
<td> <input type="range" name="level" min="1" max="10" value="5">
<output name="ret" onforminput="value=level.value"></output>
</td>
</tr>
<tr>
<td> 좋아하는 TV 프로그램 </td>
<td> <input type="text" name="site" list="site"
placeholder="좋아하는 TV프로그램을 입력하시오.">
<datalist id="site">
<option value="무한도전">
<option value="1박2일">
<option value="런닝맨">
</datalist>
</td>
</tr>
<tr>
<td> 좋아하는 색 </td>
<td> <input type="color" name="color"> </td>
</tr>
<tr>
<td>
<keygen name="key">
<input type="submit">
</td>
</tr>
</table>
</form>
</body>
</html>html 구현
jsp 붙여서 하는 건 다음 시간에...
변형
'웹정보구축' 카테고리의 다른 글
| 이클립스로 HTML에 영상 및 오디오 소스 삽입하기 (0) | 2022.05.12 |
|---|---|
| 시멘틱 웹 측면서 홈페이지 분석하기 (0) | 2022.05.10 |
| HTML의 Form 태그 및 JSP (0) | 2022.05.09 |
| 웹서버에 이미지를 올려.boja (0) | 2022.04.21 |
| 이미지 파일 업로드 (0) | 2022.04.18 |
