audio / form / input / radio / select / checkbox / label 태그연습
1.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>01_사운드출력하는 오디오태그</title>
</head>
<body>
<audio src="sound/34ex1.mp3" controls="control" autoplay loop></audio>
</body>
</html>
2.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>02_비디오를 출력하는 비디오 태그</title>
</head>
<body>
<video src="video/ani.mp4" controls loop autoplay muted></video>
</body>
</html>
3.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>03_입력받을 수 있는 폼태그</title>
</head>
<body>
<form action="#">
<p>당신의 정보를 입력해주세요.</p>
last name:
<input type="text" name="user_name" placeholder="홍"> <br>
first name:
<input type="text" name="user_name" placeholder="홍"> <br>
아이디:
<input type="text" name="user_id"> <br>
비밀번호:
<input type="password" size="2" maxlength="6">
<br>
건의사항을 적어주세요 <br>
<textarea name="" id="" cols="60" rows="10"></textarea> <br>
<input type="submit" value="꾸욱 눌주세요">
</form>
</body>
</html>
4.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>04_이미지업로드방식</title>
</head>
<body>
<form action="#">
<p>당신의 사진을 올려주세요</p>
<input type="file" name="user_pic">
<p>동생의 사진을 올려주세요</p>
<input type="file" name="sister_pic">
</form>
</body>
</html>
5.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>05_선택하는 양식_radio타입</title>
</head>
<body>
<form action="#">
<p>성별을 선택해 주세요</p>
<input type="radio" name="gender" value="male">남자<br>
<input type="radio" name="gender" value="female">여자<br>
<p>당신의 국적을 하나만 선택해 주세요</p>
<input type="radio" name="nation" value="Korea" checked="checked">한국
<input type="radio" name="nation" value="USA">미국
<input type="radio" name="nation" value="China">중국
<input type="submit">
</form>
</body>
</html>
6.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>06_다중선택이 가능한 checkbox타입</title>
</head>
<body>
<form action="#">
<p>사용이 가능한 언어를 모두 체크해 주세요</p>
<input type="checkbox" name="lan" value="ko">한국어
<input type="checkbox" name="lan" value="en">영어
<input type="checkbox" name="lan" value="ja">일어
<input type="checkbox" name="lan" value="ch">중국어
<p>수강하고 싶은 과목에 체크해주세요</p>
<input type="checkbox" name="lec" value="ko">한국어
<input type="checkbox" name="lec" value="en">영어
<input type="checkbox" name="lec" value="ja">일어
<input type="checkbox" name="lec" value="ch">중국어
</form>
</body>
</html>
7.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>07_옵션중에 선택하는 태그</title>
</head>
<body>
<form action="#">
<p>당신의 꿈을 선택해보세요</p>
<select name="my_future" multiple>
<option value="president">대통령</option>
<option value="cook">요리사</option>
<option value="producer">방송제작자</option>
<option value="artist">예술가</option>
</select>
<input type="submit" value="click">
</form>
</body>
</html>
8.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>08_텍스트를 클릭해도 인식하는 방법</title>
</head>
<body>
<form action="#">
<p>좋아하는 영화 장르를 선택해주세요</p>
<input type="checkbox" name="fav_movie_style" value="hor" id="horror">
<label for="horror">호러</label>
<label for="romance">
<input type="checkbox" name="fav_movie_style" value="rom" id="romance">로맨스
</label>
<input type="checkbox" name="fav_movie_style" value="ac" id="action">
<label for="action">액션</label>
<br><input type="submit">
</form>
<h1>텍스트를 클릭하면 해당박스가 선택되도록 하려면 input태그의 id속성값과 label태그의 for속성값을
일치시킨다!!!(별표백만개-> 스타일에가서도 활용할 것이기 때문.)</h1>
</body>
</html>
9.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>form tag_selfEX1</title>
</head>
<body>
<form action="#">
이름
<input type="text">
<br>비밀번호
<input type="password">
<br>
<p>응시분야
<select name="" id="">
<option value="">기획부</option>
<option value="">디자인팀</option>
<option value="">영업부</option>
</select>
</p>
본인사진첨부
<input type="file">
<fieldset>
<legend>성별을 선택해 주세요</legend>
<input type="radio" name="gender" value="female" checked id="woman">
<label for="woman">여</label>
<input type="radio" name="gender" value="male" id="man">
<lable for="man">남</label>
</fieldset>
<fieldset>
<legend>토익 점수대를 선택해주세요</legend>
<input type="radio" name="toeic" value="600" checked id="socre">
<label for="score">600</label>
<input type="radio" name="toeic" value="700" id="score1">
<lable for="score1">700</label>
<input type="radio" name="toeic" value="800" id="score2">
<lable for="score2">800</label>
</fieldset>
<fieldset>
<legend>보유 자격증을 선택해주세요</legend>
<input type="checkbox" name="certificate" value="computer" id="com">
<label for="com">컴퓨터</label>
<input type="checkbox" name="certificate" value="graphics" id="gra">
<label for="com">그래픽스</label>
<input type="checkbox" name="certificate" value="IELTS" id="IELTS">
<label for="com">IELTS</label>
<input type="checkbox" name="certificate" value="TOEIC" id="toeic">
<label for="com">TOEIC</label>
</fieldset>
<p>자기소개를 간단하게 적어주세요</p>
<textarea name="" id="" cols="30" rows="10" placeholder="insert message"></textarea>
<input type="submit" value="저장">
<input type="reset" value="취소">
</form>
</body>
</html>
10.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>form tag_selfEX1</title>
</head>
<body>
<form action="#">
<p>당신이 좋아하는 계절을 하나만 선택해주세요</p>
<label for="spring">봄
<input type="radio" name="weather" value="spring" checked id="spring">
</label>
<label for="summer">여름
<input type="radio" name="weather" value="summer" checked id="summer">
</label>
<label for="fall">가을
<input type="radio" name="weather" value="fall" checked id="fall">
</label>
<label for="winter">겨울
<input type="radio" name="weather" value="winter" checked id="winter">
</label>
</form>
</body>
</html>
반응형
'IT' 카테고리의 다른 글
| 코딩연습 / 복습 / 공부 : semantic tag (0) | 2022.06.23 |
|---|---|
| div / span / semantic tag (0) | 2022.06.22 |
| 다양한 태그들 연습 p / ol / ul / li / dd / dt / tr / td / th (0) | 2022.06.20 |
| 서브라임 에밋 Emmet / html attribute, list, table (0) | 2022.06.19 |
| 서브라임 텍스트 Sublime text3 다운 및 플러그인 설치 (0) | 2022.06.18 |