회원가입 화면 만들기
2018. 12. 5. 16:42ㆍHTML5&CSS
#회원가입 화면 만들기#
1) style.css파일을 만들지 않고 방법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wrapper{
width:800px;
margin: 0 auto;
}
.tableTr{
background-color: blanchedalmond;
}
</style>
</head>
<body>
<section>
<div class="wrapper">
<form action="in.html">
<table border="1" class="table">
<tr>
<th class="tableTr">아이디</th>
<td><input text="" /><input type="button" value="중복검사" onclick="send1()"></td>
</tr>
<tr>
<th class="tableTr">이름</th>
<td><input text="" /></td>
</tr>
<tr>
<th class="tableTr">주민번호</th>
<td><input text="" /></td>
</tr>
<tr>
<th class="tableTr">이메일</th>
<td><input text="" /></td>
</tr>
<tr>
<th class="tableTr">집전화</th>
<td><input text="" />-<input text="" />-<input text="" /></td>
</tr>
<tr>
<th class="tableTr">휴대전화</th>
<td><input text="" />-<input text="" />-<input text="" /></td>
</tr>
<tr>
<th class="tableTr">주소검색</th>
<td><input text="" /><input type="button" value="검색하기" onclick="send2()" /> (주소입력 : 송파동,당산동..)</td>
</tr>
<tr>
<th class="tableTr">주소</th>
<td><input type="text" list="address" />
<datalist id="address">
<option>송파동</option>
<option>송파동</option>
</datalist>
</td>
</tr>
<tr>
<th class="tableTr">상세주소</th>
<td><input text="" /></td>
</tr>
<tr>
<th class="tableTr">학력</th>
<td>
<select name="grade">
<option>중졸</option>
<option>고졸</option>
<option>학사</option>
</select>
</td>
</tr>
<tr>
<th class="tableTr">홍보매체</th>
<td><select name="port">
<option>어떻게 알게 되었나요?</option>
<option>인터넷</option>
<option>신문</option>
</select></td>
</tr>
<tr>
<th class="tableTr" class="tableTr">메일수신</th>
<td><input type="checkbox" />KH정보교육원에서 제공하는 정보메일 수신에 동의합니다.</td>
</tr>
<tr>
<th class="tableTr">교육장소</th>
<td><select name="in">
<option>선택하세요</option>
<option>서울</option>
<option>부산</option>
</select></td>
</tr>
<tr>
<th class="tableTr">비밀번호</th>
<td><input type="password" maxlength="4"> 확인<input type="password" maxlength="4"></td>
</tr>
</table>
<input type="submit" value="회원가입">
<input type="reset" value="가입안함">
</form>
</div>
</section>
<script>
function send1() {
alert("사용해도 좋습니다.")
}
function send2() {
alert("주소 검색")
}
</script>
</body>
</html>
2) style.css파일을 만든 후 따로 style을 생성하지 않고 body안에서 명령어를 입력할 경우
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="in.html" class="form">
<table border="1" class="table" style="margin: auto">
<tr>
<th class="tableTr">아이디</th>
<td><input text="" /><input type="button" value="중복검사" onclick="send1()"></td>
</tr>
<tr>
<th class="tableTr">이름</th>
<td><input text="" /></td>
</tr>
<tr>
<th class="tableTr">주민번호</th>
<td><input text="" /></td>
</tr>
<tr>
<th class="tableTr">이메일</th>
<td><input text="" /></td>
</tr>
<tr>
<th class="tableTr">집전화</th>
<td><input text="" />-<input text="" />-<input text="" /></td>
</tr>
<tr>
<th class="tableTr">휴대전화</th>
<td><input text="" />-<input text="" />-<input text="" /></td>
</tr>
<tr>
<th class="tableTr">주소검색</th>
<td><input text="" /><input type="button" value="검색하기" onclick="send2()" /> (주소입력 : 송파동,당산동..)</td>
</tr>
<tr>
<th class="tableTr">주소</th>
<td><input type="text" list="address" />
<datalist id="address">
<option>송파동</option>
<option>송파동</option>
</datalist>
</td>
</tr>
<tr>
<th class="tableTr">상세주소</th>
<td><input text="" /></td>
</tr>
<tr>
<th class="tableTr">학력</th>
<td>
<select name="grade">
<option>중졸</option>
<option>고졸</option>
<option>학사</option>
</select>
</td>
</tr>
<tr>
<th class="tableTr">홍보매체</th>
<td><select name="port">
<option>어떻게 알게 되었나요?</option>
<option>인터넷</option>
<option>신문</option>
</select></td>
</tr>
<tr>
<th class="tableTr" class="tableTr">메일수신</th>
<td><input type="checkbox" />KH정보교육원에서 제공하는 정보메일 수신에 동의합니다.</td>
</tr>
<tr>
<th class="tableTr">교육장소</th>
<td><select name="in">
<option>선택하세요</option>
<option>서울</option>
<option>부산</option>
</select></td>
</tr>
<tr>
<th class="tableTr">비밀번호</th>
<td><input type="password" maxlength="4"> 확인<input type="password" maxlength="4"></td>
</tr>
</table>
<div class="login" style="padding-left:646px" ><br>
<input type="submit" value="회원가입">
<input type="reset" value="가입안함">
</div>
</form>
<script>
function send1() {
alert("사용해도 좋습니다.")
}
function send2() {
alert("주소 검색")
}
</script>
</body>
</html>
'HTML5&CSS' 카테고리의 다른 글
| 2018.12.06 nav,메뉴작성하기,반응형,Position 설정 (0) | 2018.12.06 |
|---|---|
| 2018.12.05 메뉴디자인하기 (0) | 2018.12.05 |
| 2018.12.05 달력&체크박스&라디오&외부 이미지 (0) | 2018.12.05 |
| 2018.12.04 로그인폼,텍스트 입력창,버튼 (0) | 2018.12.04 |
| .vscode 설정후 Ctrl + Shift + B 실행하기 (0) | 2018.12.04 |