Form - Value Control
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form - Value Control</title>
<script src="../jquery-3.7.1.js"></script>
<script type='text/javascript'>
$().ready(function(){
//--------------------------------라디오 선택 변경
$("#change_radio").click(function(){
$(".age").first().prop("checked", true)
} )
//--------------------------------체크박스 모두 해제
$("#release_checkbox").click(function(){
$(".hobby").prop("checked",false)
})
//--------------------------------체크박스 모두 선택
$("#check_checkbox").click(function(){
$(".hobby").prop("checked",true)
})
//--------------------------------체크박스 선택변경
$("#change_checkbox").click(function(){
$(".hobby") //클래스가 하비인것중
.first() // 첫번째 아이템을 가져와서
.prop("checked", true)// 선택 상태를 변경한다.
})
//--------------------------------값 변경
$("#change_value").click(function(){
// checkbox와 radio는 값 변경을 해서는 안된다.
// 값 변경 대신, 선택의 상태를 변경해야한다.
// 다음파트에서 다룹니다.~
$("#email").val("기본값 이메일")
$(".body").val("내용을 입력해야 합니다.")
//select의 값 변경을 할 떄엔
//select 하위의 option value중 하나를 입력해야 합니다.
//option에 존재하지 않는 갑을 입력할 경우
//select는 아무것도 선택되지 않는 상태로 바뀝니다.
$("#email_domain").val("@google.com")
})
//--------------------------------값 확인
$("#check_value").click(function(){
var hobby=[]
var email=$("#email").val()
$(".hobby:checked").each(function(i,elem){
// console.log(i,$(elem))
hobby.push($(elem).val())
})
var age=$(".age").val()
var body=$(".body").val()
var emailDomain=$("#email_domain").val()
console.log("email", email)
//checkbox나 radio는 :checked로 선택된 값을 가져와야한다.
console.log("hobby:checked", hobby)
console.log("age:checked", age)
console.log("body", body)
console.log("email_domain", emailDomain)
})
})
</script>
</head>
<body>
<input type="text" id="email"/>
<!-- checkbox와 radio는 name, value가 반드시 필요하다 -->
<input type="checkbox" class="hobby" name="hobby" value="1" checked/>
<input type="checkbox" class="hobby" name="hobby" value="2"/>
<input type="checkbox" class="hobby" name="hobby" value="3"/>
<input type="checkbox" class="hobby" name="hobby" value="4"/>
<input type="radio" class="age" name="age" value="10" checked> <!-- checked를 붙이면 젤 첫번째가 체크되어서 나온다.-->
<input type="radio" class="age" name="age" value="20">
<input type="radio" class="age" name="age" value="30">
<input type="radio" class="age" name="age" value="40">
<textarea class="body"></textarea>
<select id="email_domain" >
<option value="@naver.com">Naver</option>
<option value="@daum.net">Daum</option>
<option value="@google.com" selected>Google</option> <!--selected를 사용하면 화면에 젤 먼저 나온다.-->
<option value="@nate.com">Nate</option>
</select>
<div>
<button id="check_value">값 확인</button>
<button id="change_value">값 변경 </button>
<button id="change_checkbox">체크박스 선택 변경 </button>
<button id="check_checkbox">체크박스 모두 선택 </button>
<button id="release_checkbox">체크박스 모두 해제 </button>
<button id="change_radio">라디오 선택 변경 </button>
</div>
</body>
</html>네이버 로그인 따라하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type='text/css'>
body{
background-color: #EEE;
margin: 0px;
}
*{
color:#333
}
#wrapper{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#wrapper>div:first-child{
border: 1px solid #666;
border-radius: 5px;
background-color: #FFF;
width: 500px;
}
#wrapper .flex{
width: 20px;
display: flex;
align-items: stretch;
}
#wrapper .grid{ /*password id 글자수가 달라서 위치 맞추기*/
display: grid;
grid-template-columns: 150px 1fr;
grid-template-rows: 40px;
}
#wrapper label{
padding: 10px;
font-size: 11pt;
}
#wrapper input{
border: 0px;
background-color: transparent; /*배경색 투명*/
outline: 0px;
border-radius: 5px;
}
#wrapper input.error{
border: 2px solid #d90202;
color: #d90202;
}
#wrapper input:focus{
border: 2px solid #02d902;
}
#wrapper > .btn_group{
width: 500px;
margin-top: 10px;
}
#wrapper > .btn_group button{
padding: 5px;
background-color: #3939ffCC;
border: 0px;
color: #FFF;
border-radius: 5px;
}
#wrapper >.align_right{
text-align: right;
}
</style>
<script src="../jquery-3.7.1.js"></script>
<script type='text/javascript'>
$().ready(function(){
//focus가 뻇기는 이벤트 :blur
$("input").blur(function(){
var id=$(this).val().trim()
$(this).val(id)
if(id == ""){
$(this).addClass("error")
}else{
$(this).removeClass("error")
}
})
-----------------------------------------------------------------------------------------------------------------
입력한 글자수를 채운뒤 지정한 다음으로 자동으로 넘어가기
$("input[data-move-element=true]").keyup(function(){
var maxlength=$(this).attr("maxlength"); // html에서 설정했던 maxlength를 jquery에서 가져온다.(attr)
var inputSize =$(this).val().length
if(maxlength==inputSize){
var nextElement = $(this).data("next-element")
$(nextElement).focus() // 글자가 채워지는 순간 다음으로 넘어간다
}
}) // data-move-element="true"
// data-next-element="#sex_code"에서 가져온거
----------------------------------------------------------------------------------------------------------------
주민번호가 1,3이면 남자로 자동체크 2,4면 여자로 자동체크
$("#sex_code").keyup(function(){
var code = $(this).val()
var arr = [undefined, // 0번 인덱스
"#sex_male", // 1번
"#sex_female", // 2번
"#sex_male", // 3번
"#sex_female"] // 4번
$(arr[code]).prop("checked", true) // 체크박스 변경 이벤트는 prop
})
----------------------------------------------------------------------------------------------------------
패스워드 일치 확인
$("input[data-compare=true]").keyup(function(){
var text=$(this).val()
console.log(text)
var otherElement = $(this).data("compare-element")
var otherText=$(otherElement).val()
if(text != otherText){
$(this).addClass("error")
$(otherElement).addClass("error")
}else{
$(this).removeClass("error")
$(otherElement).removeClass("error")
}
}) // password_confirm도 똑같이 해줘야하는데 두개가 나와서 중복이 된다 그래서 data를 써서 중복을 제거한다.
-------------------------------------------------------------------------------------------------------------------
숫자만 입력했을때 나오는 방법
$("input[data-numeric-field=true]").keydown(function(event){ //event를 받아와야 어떤 키를 눌렀는지 알 수 있다.
console.log(event.key, event.keyCode)
var availablekeyCode=",8,13,116,37,38,39,40,46,18," //방향키, 백스페이스같은 필요한 기능
var keyCode="," + event.keyCode + ","
var isNotAvailablekeyCode = availablekeyCode.indexOf(keyCode) == -1
if(isNotAvailablekeyCode && isNaN(event.key)){
return false;
}
}
-----------------------------------------------------------------------------------------------------------------
$("#submit_btn").click(function() {
$("#regist_form").submit()
})
})
</script>
</head>
<body>
<div id="wrapper">
<div>
<div class="grid">
<label for="id">ID</label>
<input type="text" id="id"
name="userId"
placeholder="ID를 입력하세요"
autocomplete="off"/>
</div>
<div class="grid">
<label for="password">Password</label>
<input type="password"
id="password"
name="password"
placeholder="비밀번호를 입력하세요"
autocomplete="off"
data-compare="true"
data-compare-element="#password_confirm"/>
</div>
<div class="grid">
<label for="password_confirm">Password</label>
<input type="password"
id="password_confirm"
name="password_confirm"
placeholder="비밀번호를 다시 입력하세요"
autocomplete="off"
data-compare="true"
data-compare-element="#password"/>
</div>
<div class="grid">
<label for="birth_date">주민번호 7자리</label>
<div class="flex">
<input type="text" id="birth_date" name="birth_date" placeholder=" 900101"
maxlength="6"
data-numeric-field="true"
data-move-element="true"
data-next-element="#sex_code"
style="width: 80px;" autocomplete="off"/>
<div style="align-self: center;" >-</div>
<input type="text"
id="sex_code"
name="sex_code"
placeholder="1"
autocomplete="off"
style="width: 20px;"
maxlength="1"
data-numeric-field="true"/>
<div style="align-self: center;" >******</div>
</div>
</div>
<div class="grid">
<label for="sex_male">성별</label>
<div class="flex">
<label for="sex_male">남</label>
<input type="radio" id="sex_male" name="sex" value="male"/>
<label for="sex_female">여</label>
<input type="radio" id="sex_female" name="sex" value="female"/>
</div>
</div>
<div class="grid">
<label for="name">이름</label>
<input type="text"
id="id"
name="name"
placeholder="이름을 입력하세요"
autocomplete="off"/>
</div>
<div class="grid">
<label for="tell">휴대전화 번호</label>
<input type="tel"
id="tel"
name="tel"
placeholder="휴대전화 번호를 입력하세요"
autocomplete="off"
data-numeric-field="true"/>
</div>
</div>
<div class="btn_group align_right">
<button>가입</button>
</div>
</div>
</body>
</html>가입 전송하기
주의할점: form태그 내에 새로운 form태그를 중첩해서 사용할 수 없다
ajax 호출할때 get=조회 post=생성의 뜻을 가지고 있지만
form(데이터 전송 방법을 가지고있다)
- get=url의 파라미터를 보내준다
- post=body에 파라미터를 보내주는 역활을 한다.
같은 보내주는 역활인데 왜 구분이 되어있을까?
- get은 256byte만 보내줄수 있다
- post는 4GB만큼 보내줄수있다.(주로 파일을 업로드 할 때)
get방식(?뒤에)
action?
- 파라미터의 도착지를 정한다.
- action에 적은대로 도착한다.
민감한 정보를 보낼떄는 get으로 보내면 안된다 (누구나 볼 수 있기 때문에)
