⚡Video tag
<!--
embed,object : 동영상,pdf,doc
video : html5 동영상
audio : html5 동영상
autoplay : 자동재생(muted와 함께 사용해야만 자동재생)
muted : 음소거
crontrols : video
track태그 : 자막기능 추가 (.vtt 파일 사용)
srclang : 자막에 대한 각 나라별 언어
-->
<!-- 영상을 로드하는 태그 -->
<video autoplay muted controls>
<source src="./videotest1.mp4" type="video/mp4">
<!-- 자막기능 / defaul : 한국어 -->
<track kind="subtitles" src="" srclang="한국어" default>
<track kind="subtitles" src="" srclang="En">
<track kind="subtitles" src="" srclang="Jp">
</video>
⚡ input + Javascirpt 활용
<script>
function abc(){
//document.getElementById('아이디이름') : 현재페이지에서의 아이디명
// 그 외의 함수 : value, style, readOnly, setattribute, getattribute....등
var a = document.getElementById('mid');
/*
value 속성 : 값을 해당 태그에 미리 입력시킬 때
onclick 속성으로 javascript 함수를 실행
*/
if( a.value == "" ){
alert("아이디를 입력하셔야합니다")
}else{
a.readOnly=true; //input readonly 처리
a.style.backgroundColor = "gray"; //css의 -부분이 대문자가 된다고 생각하쟈~
}
}
</script>
<body>
<input type="text" id="mid" placeholder="아이디를 입력하세요">
<input type="button" value="클릭" onclick="abc()">
</body>
⚡ 로그인 페이지 활성화
- 유일하게 submit과 reset에 onclick 작성X => submit은 상위 form태그에 onSubmit="return 함수명()"에 작성
- 작동 실패 조건에 return false; 해야 action이 작동하지 않는다
<script>
function login(){
var id = document.getElementById('mid');
var pw = document.getElementById('mpw');
if(id.value == ""){
alert('아이디를 입력하세욘')
}else if(pw.value == ""){
alert('비밀번호를 입력하세욘')
}else{
location.href = "http://google.com"
}
}
function member(){
var aa = document.getElementById('userid');
var bb = document.getElementById('userpw');
if(aa.value == ""){
alert("아이디를 입력하세요~");
return false; //강제로 해당 코드 실패
}else if(bb.value == ""){
alert("패스워드를 입력하세요~")
return false; //강제로 해당 코드 실패
}else{ //form 데이터 action,method 활성화
memberform.submit();
/*
document 사용하지 않는 이유
: form태그의 특징 중 자동으로 id를 입력시 코드를 인식하게 된다
왜? 브라우저가 걍 그러케 만듬ㅋ
id지정 안해줘도 댐
근데 폼이 여러개가 될 경우 script가 헷갈릴수 있기 때문에 적어주는게 좋다
*/
// return true; => 이렇게 적어도 됨 1
// return; => 이렇게 적어도 됨 2
}
}
</script>
<body>
<!-- button으로 로그인 -->
아이디 : <input type="text" id="mid"><br>
패스워드 : <input type="password" id="mpw"><br>
<input type="button" value="로그인" onclick="login()">
<br><br><br><br><br><br>
<!----------------------submit 으로 로그인---------------------------->
<!--
모바일 전용으로 제작할 경우 submit필요 없음 - 어차피 다 터치로 하니까
유일하게 submit과 reset에 onclick 작성시 100% 버그납니다..
-> 상위 form태그에 onSubmit=""에 작성
return을 활용하여 method와 action을 컨트롤함
기본적으로 return; 또는 return true; form 이름을 활용한 submit() 사용시 데이터는 전송된다.
-->
<!--return member() : member()안에 return false; 등장시 실행되지 않는다.-->
<form onsubmit="return member()" id="memberform" method="post" action="http://nate.com">
아이디 : <input type="text" id="userid"><br>
패스워드 : <input type="password" id="userpw"><br>
<input type="submit" value="로그인"> <!--여기에 onclick 작성 절대x-->
</form>
</body>