잡동사니에도 사랑을

[21.10.06] exam01(02_jQueryEvent) - 본문

JAVA_EE/JQuery

[21.10.06] exam01(02_jQueryEvent) -

luvforjunk 2021. 10. 6. 22:02
728x90
반응형

////////exam01.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/event.css">
</head>
<body>
	<h1>회원가입</h1>
	<form name="form1" id="join">
		<div id="input">
			<h3>아이디</h3>
			<input type="text" name="user_id" />

			<h3>비밀번호</h3>
			<input type="password" name="user_pw" />

			<h3>주민번호</h3>
			<input type="password" name="juminno" />

			<h3>성별</h3>
			<label><input type="radio" name="gender" value="남자" /> 남자</label> 
			<label><input type="radio" name="gender" value="여자" /> 여자</label>

			<h3>이메일 주소</h3>
			<input type="email" name="email" />

			<h3>URL</h3>
			<input type="url" name="url" />

			<h3>핸드폰번호</h3>
			<input type="tel" name="hpno" />

			<h3>취미</h3>
			<label><input type="checkbox" name="hobby" value="축구" /> 축구</label>
			<label><input type="checkbox" name="hobby" value="농구" /> 농구</label>
			<label><input type="checkbox" name="hobby" value="야구" /> 야구</label>

			<h3>직업</h3>
			<select name="job">
				<option>----- 선택하세요 -----</option>
				<option value="프로그래머">프로그래머</option>
				<option value="퍼블리셔">퍼블리셔</option>
				<option value="디자이너">디자이너</option>
				<option value="기획">기획</option>
			</select> <input type="submit" value="회원가입" class="myButton" /> 
					  <input type="reset" value="다시작성" class="myButton" />
		</div>
	</form>
	<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script type="text/javascript" src="../js/member.js"></script>
</body>
</html>

 

 

 

 

////////event.css

@charset "UTF-8";
* {
   padding: 0;
   margin: 10px;
}
#input, #result {
   border: 5px solid #D5D5D5;
   text-align: center;
   width: auto;
   font-weight: bold;
}
#input {
   background: #eef;
   padding: 5px;
}
#input:after {
   content: '';
   display: block;
   float: none;
   clear: both;
}
#input > input, #input > select, #input > div, #input > button, #input > div > button {
   width: 99%;
   text-align: center;
   display: block;
   font-size: 17px;
   color: #222;
   background: #eef;
   border: 3px solid #d3d3d3;
   margin: 5px auto;
   padding: 5px 0;
}
#input > h3 {
   text-align: left;
   margin: 0;
   padding: 10px 0 0 0;
}
#input > h3:before {
   content: '';
   display: block;
   float: none;
   clear: both;
}
#input > label {
   margin: 0;
   padding: 0;
   display: block;
   float: left;
   padding-bottom: 10px;
}
#input > label > input {
   width: auto !important; 
   display: inline;
}
#input .myButton {
   box-shadow: inset 0px 1px 0px 0px #54a3f7; /* inset : 박스 안쪽의 그림자 */
   background: linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
   /* background-color: #007dc1; */
   border-radius: 3px;
   border: 1px solid #124d77;
   display: inline-block;
   color: #ffffff;
   font-family: arial;
   font-size: 15px;
   font-weight: normal;
   padding: 6px 24px;
   text-decoration: none;
   text-shadow: 0px 1px 0px #154682;
}
#input .myButton:hover {
   background: linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
   background-color: #0061a7;
}
#input .myButton:active {
   position: relative;
   top: 1px;
}

h2 {
   padding-top: 10px;
}
#result {
   padding: 50px;
   font-size: 17px; 
   color: #500;
   background: #5AAEFF;
}

 

결과창

 

728x90
반응형

'JAVA_EE > JQuery' 카테고리의 다른 글

[21.10.06] exam03(02_jQueryEvent) - 클릭 이벤트 확인(click, dbclick)  (0) 2021.10.07
[21.10.06] exam02(02_jQueryEvent) - 마우스 이벤트 확인(mousedown, mouseup, mouseenter, mouseleave)  (0) 2021.10.07
[21.09.27] exam05(01_helloJQuery)  (0) 2021.09.27
[21.09.27] exam04(01_helloJQuery)  (0) 2021.09.27
[21.09.27] exam03(01_helloJQuery)  (0) 2021.09.27
'JAVA_EE/JQuery' Related Articles more