회원가입 form 만들기
이름 : text
아이디 + 중복체크번호
비밀번호
비밀번호확인
이메일 -select 이용해서 naver, gmail,
연락처
메일수신여부 → radio
관심분야 checkbox
전송(submit), 취소(reset)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="" method="get">
<fieldset>
<legend>회원정보입력</legend>
<table>
<tr>
<label>
<td>이름</td>
<td><input type="text" name="username" id="username" placeholder="ex)홍길동"></td>
</label>
</tr>
<tr>
<label>
<td>아이디</td>
<td><input type="text" name="userid" id="userid">
</label>
<button id="btn">아이디중복체크</button>
</td>
</tr>
<tr>
<label>
<td>비밀번호</td>
<td><input type="password" name="pw" id="pw"></td>
</label>
</tr>
<tr>
<label>
<td>비밀번호확인</td>
<td><input type="password" name="pw2" id="pw2"></td>
</label>
</tr>
<tr>
<label>
<td>이메일</td>
<td><input type="text" name="email" id="email">@
<select>
<option value="naver.com" >naver.com</option>
<option value="daum.net">daum.net</option>
<option value="google.com" selected="selected">google.com</option>
</select><br>
</td>
</label>
</tr>
<tr>
<label>
<td>연락처</td>
<td><input type="text" name="phone" id="phone"></td>
</label>
</tr>
<tr>
<td colspan=2>
<fieldset>
<legend>메일수신여부</legend>
<label>
수신<input type="radio" name="getMail" value="yes" checked>
</label>
<label>
거부<input type="radio" name="getMail" value="no">
</label>
</fieldset>
</td>
</tr>
<tr>
<td colspan=2>
<fieldset>
<legend>관심분야</legend>
운동<input type="checkbox" name="interest" value="exercise" checked>
건강<input type="checkbox" name="interest" value="health" checked>
독서<input type="checkbox" name="interest" value="book" checked>
공부<input type="checkbox" name="interest" value="study" checked>
</fieldset>
</td>
</tr>
</fieldset>
<tr>
<td colspan=2>
<fieldset>
<input type="submit" value="전송">
<input type="reset" value="취소">
</fieldset>
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>'WEB(Front-End) > UI' 카테고리의 다른 글
| 댓글쓰기 (0) | 2021.03.05 |
|---|
