· 회원가입 폼 작성 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<style>
.first_form {
list-style:none;
line-height:1px;
}
.float {
margin-top: 50px;
line-height:1px;
list-style:none;
}
</style>
</head>
<body>
<h1>회원가입 페이지</h1>
<form name="form_id" action="jsp/writeprocess.jsp" method="post">
<ul class="first_form">
<li>
<p>아이디 확인</p>
<input type="text" name="id" placeholder="아이디를 입려하세요.">
<input type="button" name="id_btn" value="아이디 확인"></button>
</li>
<li>
<p>비밀번호</p>
<input type="password" name="pwd">
</li>
<li>
<p>비밀번호 재확인</p>
<input type="password" name="pwd_check">
<input type="button" name="pwd_check_btn" value="비밀번호 재확인">
</li>
</ul>
<ul class="float">
<li>
<p>이름</p>
<input type="text" name="name" placeholder="이름을 입력하세요">
</li>
<li>
<p>생년월일</p>
<input type="datetime-local" name="birth">
</li>
<li>
<p>성별</p>
<input type="radio" name="sex" value="여자" checked> 여자
<input type="radio" name="sex" value="남자"> 남자
</li>
<br>
<li>
<p class="float">이메일</p>
<input type="text" name="email" placeholder="email@gmail.com">
</li>
<li>
<p>휴대전화</p>
<input type="number" name="number" placeholder="010-****-****">
<input type="submit" name="phone_number" value="인증번호 받기">
<br>
<input type="text" name="submit_number" placeholder="인증번호를 입력하세요.">
<input type="submit" name="phone_number_check" value="확인">
</li>
<br><br><br><br><br><br>
<li>
<p class="float">관심사</p>
IT<input type="radio" name="interest" value="IT">
보안<input type="radio" name="interest" value="보안">
웹<input type="radio" name="interest" vlaue="웹">
서버<input type="radio" name="intrest" value="서버">
</li>
<li>
<p>본인 사진</p>
<input type="file" name="picture">
</li>
<li class="float">
<input type="submit" value="제출">
</li>
</ul>
</form>
</body>
</html>
예제 실행 결과
'국비지원 JAVA 풀스택 과정 > HTML+CSS3' 카테고리의 다른 글
| [HTML+CSS3] 기본 선택자 (0) | 2022.09.26 |
|---|---|
| [HTML+CSS3] 스타일시트 기본 문법 (0) | 2022.09.26 |
| [HTML+CSS3] gradient(그레디언트) (2) | 2022.09.23 |
| [HTML+CSS3] 박스그림자 (0) | 2022.09.23 |
| [HTML+CSS3] 입력 양식 태그 (1) | 2022.09.23 |