예제 3-8. 텍스트/이미지 버튼 만들기
WEB/HTML5-CONCEPT 2017. 11. 4. 18:44 |1 2 3 4 | <input type="button|reset|submit|image" name="버튼이름" value="문자열" // 버튼에 출력되는 문자열 src="이미지 URL"> // "image"인 경우에만 필요한 것으로 이미지의 URL |
<button>태그 말고 <input>태그로 통일시키자
1 2 3 4 5 | <button type="button|reset|submit|image" name="버튼이름" value="문자열" // 버튼에 출력되는 문자열 버튼 문자열이나 이미지 </button> | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> <html> <head> <title>버튼이 있는 입력 폼</title> </head> <body> <h3>버튼을 만들자</h3> <hr> <form> 검색: <input type="text" size="10" value=""> <input type="button" value="Q1"> <button type="button">Q2</button><br> submit 버튼 : <input type="submit" value="전송1"> <button type="submit">전송2</button><br> reset 버튼 : <input type="reset" value="리셋1"> <button type="reset">리셋2</button><br> 이미지버튼 : <input type="image" src="media/button.png" alt="이미지 버튼"> <button type="button"><img src="media/button.png" alt="이미지 버튼"></button> </form> </body> </html> | cs |
'WEB > HTML5-CONCEPT' 카테고리의 다른 글
| 예제 3-11. 콤보박스 만들기, <select> (0) | 2017.11.04 |
|---|---|
| 예제 3-9. 체크박스 만들기, <input type="checkbox"> 예제 3-10. 라디오버튼 만들기, <input type="radio"> (0) | 2017.11.04 |
| 예제 3-7. 데이터 목록을 가진 텍스트 입력 창, <datalist> (0) | 2017.11.04 |
| 예제 3-6. 텍스트 입력, <input type="text | password">,<textarea> (0) | 2017.11.04 |
| 예제 3-5. 간단한 로그인 폼 만들기 (0) | 2017.11.04 |