submit 기능을 가진 이미지 버튼 만들기입니다.
input type="image"라고 속성을 설정하면 submit (전송) 기능을 가진 이미지 버튼을 추가할 수 있습니다.
그럼 예제를 만들어 보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<lable for="phone">전화번호 입력</lable>
<input type="tel" id="phone" size="20" placeholder="전화번호를 입력해주세요"></input>
<input type="image" src="images/submit.png" alt="전송" name="submitButton" width="50px" >
</body>
</html>위 코드를 통해서 결과가 만들어지는데요.
여기서 input type="image"라는 속성이 가장 중요하겠습니다. 그 외 속성들은...
src "이미지 경로"
alt 이미지가 없을 때 대체 텍스트.
name 서버 전송 시 해당 이미지 버튼의 이름
width 속성을 사용해서 크기를 조절할 수 있겠습니다.
기본적으로 image 태그와 공통된 모습을 갖추고 있네요.
submit (전송) 기능을 텍스트로 표기해도 되지만 예쁘게 이미지로 표현하고 싶다면
input type="image" 속성 값을 활용하면 되겠습니다.
감사합니다.
전송,리셋 버튼 만들기
웹페이지에서 전송과 취소 버튼을 만들어 봅니다. 이름과 이메일 입력을 서버로 전송하기 위해서는 최종적으로 보내기(전송) 기능이 필요합니다. 그리고 잘 못 입력했을 경우 취소(리셋) 버튼도
soo0100.tistory.com
이미지를 표현해주는 태그 예제
이미지를 브라우저에서 불러오기 위해서는 태그를 사용해야 합니다. 태그 예제를 살펴봅니다. 이미지 태그 예제 입니다 이미지 태그에서 중요한 부분은 2곳 입니다. src : 이미지 경로를 기재 합
soo0100.tistory.com
반응형
'앱 만들기 > HTML5' 카테고리의 다른 글
| 파일 첨부 form (2) | 2023.04.20 |
|---|---|
| input type="button" 만들기 (0) | 2023.04.18 |
| input type="month" 월 제한 하기 (1) | 2023.04.15 |
| input type="date"날짜 제한 하기 (2) | 2023.04.14 |
| Input type 주 입력 (4) | 2023.04.13 |
댓글