HTML 입력 양식 태그 & 이미지 클릭으로 링크 이동
- 이미지 클릭으로 링크 이동
ex) 이미지 클릭하면 네이버로 이동
<a href="http://naver.com">
<img src="이미지 주소">
</a>1. 입력양식 태그
- form 태그
<form action=" "> <from>
사용자로부터 데이터를 입력받아서 전송할 때 사용
method : 데이터가 서버로 제출될 때 사용
action : 데이터를 전송할 위치
- input 태그
<input type=" " name=" ">
입력을 받는 태그
* name속성은 필수
name은 입력받은 데이터를 구분하는 역할
입력받은 text가 id인지 name인지 구분
placeholder : 미리보기 기능
value : 기본값 지정
<form action="">
ID를 입력하세요 : <input type="text" name="id" placeholder="ID입력"> <br>
이름을 입력하세요 : <input type="text" name="name" value="null"> <br>
비밀번호 입력 : <input type="password" name="pw">
</form>
- select 태그
<select name=" "> </select>
<select name="email">
<option value="google">구글</option>
<option value="naver">네이버</option>
<option value="kakao">카카오</option>
</select>
* option태그가 아닌 select태그에 name을 지정하는 이유
사용자는 option중에서 최종 1개만 선택을 하기 때문에, 1개 데이터만 전송
option태그의 value값은 option 태그의 content가 아닌 다른 값을 넘기고 싶을 때 기본값 지정
value가 없으면 구글 선택 시 구글 텍스트가 전송
value가 있으면 구글 선택시 google 텍스트가 전송
- checkbox
체크박스(여러개 선택) : 좋아하는 음식 고르기 <br>
치킨 <input type="checkbox" name = "food" value="chicken">
피자 <input type="checkbox" name = "food" value="pizza">
햄버거 <input type="checkbox" name = "food" value="hurger">* name를 food로 통일하는 이유!
치킨 피자 햄버거를 선택한 이유가 좋아하는 음식이라는 그룹으로 묶여야 하기 떄문에
name을 food로 통일, 선택 된 체크박스의 값은 value속성으로 어떤값인지 구분
- radio
라디오버튼(1개만 선택) : 성별 고르기 <br>
여자 <input type="radio" name="성별">
남자 <input type="radio" name="성별">
- 파일 색깔 날짜
파일선택 : <input type="file" name="file">
<hr>
색깔 선택 : <input type="color" name="color">
<hr>
날짜 선택 : <input type="date" name="birthday"> <br>
날짜 + 시간 선택 : <input type="datetime-local" name="meeting">
- 게시글 만들기
게시글 작성 : <br>
<textarea name="" id="" cols="50" rows="10" style="resize: none;"></textarea>
- 초기화 버튼 전송 버튼
reset : input요소의 모든 값을 초기화
sumit : input요소의 모든 값을 전송
초기화 버튼 <input type="reset" value="초기화 버튼">
<hr>
전송 버튼 <input type="submit" value="로그인">
- iframe 태그
<iframe> </iframe>
현재 HTML문서에 다른 문서를 포함시킬 때 사용
| 속성 | 설명 |
| src | iframe에 삽입될 주소 |
| name | iframe요소의 이름 |
| width | 너비 지정 |
| height | 높이 지정 |
<iframe src=“./test.html”></iframe>
<iframe src=http://www.daum.net></iframe>
<iframe src=“https://www.youtube.com/embed/주소”></iframe>
- 미디어 태그
<video> </video>
비디오 포맷을 웹페이지 보여주는 태그
* 지원되는 확장자 : MP4, WebM, Ogg
<audio> </audio>
오디오 포맷을 웹페이지 보여주는 태그
*지원되는 확장자 : MP3, WAV, Ogg
| 속성 | 설명 |
| src | 파일의 경로 |
| autoplay | 자동 재생 지정 |
| controls | 재생 버튼 출력 |
| muted | 음성 출력 음소거 |
| loop | 재생 끝나고 나서 자동 재생 |
- label 태그와 for 속성
<input type="checkbox" id="subscribe">
<label for="subscribe">누르기</label>label과 for 속성을 적절히 활용하면 input대신 label을 눌러도 input을 선택 가능
(input의 id, label의 for 속성을 똑같게)