Stack/HTML
[HTML] 5일 만에 끝내는 HTML 기초 3일차
7ingout
2022. 3. 16. 15:15
1. 비디오태그
https://www.youtube.com/shorts/Y6Pbqbg4IpQ
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
</head>
<body>
<video src="dog.mp4" width="500" controls autoplay muted/>
<!-- controls: 재생 버튼 같은거, 브라우저 정책상 꼭 muted(음소거) 넣어야 autoplay 됨-->
</video>
</body>
</html>
2. 비디오태그 (이 양식을 더 많이 쓸 것 !)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
</head>
<body>
<video controls autoplay muted loop width="500">
<source src="dog.mp4" type="video/mp4" />
이 브라우저는 비디오태그를 지원하지 않습니다.
</video>
</body>
</html>
3. 폼태그
<form action="서버경로" method="get/post">
</input type="text" name="userid" >
</form>
* input태그 속성
type 속성: 입력필드 타입을 지정함
type
1. text: 텍스트를 입력하는 창을 생성
2. password: 비밀번호를 입력하는 창을 생성
3. radio: 라디오 버튼을 생성
4. checkbox: 체크박스를 생성
5. hidden: 사용자에게 보이지는 않지만 서버로 전송됨
6. submit: 서버로 제출/전송하는 버튼을 생성
7. reset: 입력필드를 초기화 시키는 버튼을 생성
8. file: 파일 이름을 입력하는 창을 생성
name 속성: 서버로 전달되는 이름
value 속성: 입력태그의 초기값
placeholder 속성: 사용자가 값을 입력하기 전에 힌트가 입력필드에 표시됨
required 속성: 폼을 제출하기 전에 입력필드가 작성되어야 함을 지정함
disabled 속성: 입력필드가 사용불가임을 지정함
폼태그 학습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
</head>
<body>
<!--
input 태그
type속성: 다양한 값을 입력받도록 함
text/ password/ submit/ reset/ radio/ checkbox/ number/ color/ email
fieldset 태그
여러 컨트롤과 레이블을 묶을 때 사용
legend 태그
fieldset의 제목을 나타냄
disabled 속성- 비활성화
-->
<h1>폼태그 학습</h1>
<form action="join.php" method="get">
<fieldset>
<legend>필수 입력사항</legend>
<p>아이디 : <input type="text" name="userId" /></p>
<p>비밀번호 : <input type="password" name="userPass" /></p>
<p>성별: <input type="radio" name="gender" value ="male" />남자
<input type="radio" name="gender" value ="female" />여자
</p>
</fieldset>
<fieldset disabled>
<legend>선택 입력사항</legend>
<p>취미:
<input type="checkbox" name="hobby1" value="reading" />독서
<input type="checkbox" name="hobby2" value="game"/> 게임
</p>
<p>좋아하는 색상:
<input type="color" name="faColor" />
</p>
<p>
숫자:
<input type="number" name="faNumber" min="1" max="10" />
</p>
</fieldset>
<p>
<input type="submit" value="확인" />
<input type="reset" value="취소" />
</p>
</form>
</body>
</html>
4. 폼의 그룹화 실습