○ type="submit", type="reset" : 전송과 리셋
submit 타입은 우선 특정 form에 입력한 정보를 서버로 전송하는 역할을 합니다. 이를 통해서 전달되는 정보는 <form> 태그의 action 속성에서 지정한 처리 서버에 전달되고, reset 버튼은 말 그대로 해당 폼에 입력된 모든 값들을 지우게 됩니다. 두 타입 모두 value를 통해 버튼에 나타나는 텍스트를 입력하게 되죠. 중요한 역할을 하지만, 구현 자체는 간단하므로 바로 예시를 살펴보겠습니다. (참고로 예제에서는 form action 속성에 아무것도 연결되어 있지 않기 때문에, 전송을 하더라도 별도의 동작은 일어나지 않습니다. 각각의 폼에 텍스트와 체크 박스, 라디오 버튼을 클릭한 후 reset을 눌러 테스트해보시기 바랍니다)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="">
<fieldset>
<legend>배송정보 리스트</legend>
<ul>
<li>
<label for="username">이름</label>
<input type="text" id="username">
</li>
<li>
<label for="address">주소</label>
<input type="text" id="address">
</li>
<li>
<label for="email">이메일</label>
<input type="email" id="email">
</li>
<li>
<label for="phone">휴대전화번호</label>
<input type="tel" id="phone">
</li>
</ul>
<label><input type="checkbox" value="red">레드</label>
<label><input type="checkbox" value="yellow">옐로우</label>
<label><input type="checkbox" value="white">화이트</label>
<label><input type="checkbox" value="grey">그레이</label>
<p><b>배송비 선택</b></p>
<label><input type="radio" value="yes" name="deliver">선불결제</label>
<label><input type="radio" value="no" name="deliver">착불</label>
</fieldset>
<input type="submit" value="주문확인">
<input type="reset" value="취소">
</form>
</body>
</html>
○ type="image" : 이미지 버튼
아마 타입 이름만 보고 그림파일을 넣는 타입이라고 생각할 수도 있습니다. 하지만, 정확하게 이 이미지 타입의 경우는 위에서 설명한 submit 역할을 하는 이미지 버튼을 입력하는 타입입니다. 예를들어 위의 예시에서 '주문확인'이라는 버튼이 브라우저의 기본적인 버튼이 자동으로 출력되었는데, 해당 주문확인 버튼을 우리가 디자인한 이미지로 버튼을 만들고 싶을 경우에 사용하게 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="">
<fieldset>
<legend>배송정보 리스트</legend>
<ul>
<li>
<label for="username">이름</label>
<input type="text" id="username">
</li>
<li>
<label for="address">주소</label>
<input type="text" id="address">
</li>
<li>
<label for="email">이메일</label>
<input type="email" id="email">
</li>
<li>
<label for="phone">휴대전화번호</label>
<input type="tel" id="phone">
</li>
</ul>
<label><input type="checkbox" value="red">레드</label>
<label><input type="checkbox" value="yellow">옐로우</label>
<label><input type="checkbox" value="white">화이트</label>
<label><input type="checkbox" value="grey">그레이</label>
<p><b>배송비 선택</b></p>
<label><input type="radio" value="yes" name="deliver">선불결제</label>
<label><input type="radio" value="no" name="deliver">착불</label>
</fieldset>
<input type="image" src="https://url.kr/toeuxg" alt="login_btn" width="8%">
</form>
</body>
</html>
○ type="button" : 기본 버튼
button 타입은 말 그대로 기본적인 형태의 버튼을 삽입하게 됩니다. 여기에는 submit이나 reset같은 내장된 기능은 사용하지 않게 되고, 주로 자바스크립트를 실행하는 형태로 사용하게 됩니다. 기본적으로 value에 버튼에 들어갈 텍스트를 삽입하고 onclick과 같은 이벤트를 지정해 줍니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="">
<input type="button" value="테스트" onclick="alert('test')">
</form>
</body>
</html>
'Programming > HTML+CSS' 카테고리의 다른 글
| 3. 입력 양식 작성(2) - input 태그 7 (0) | 2023.03.12 |
|---|---|
| 3. 입력 양식 작성(2) - input 태그 6 (0) | 2023.03.12 |
| 3. 입력 양식 작성(2) - input 태그 4 (0) | 2023.03.08 |
| 3. 입력 양식 작성(2) - input 태그 3 (0) | 2023.03.08 |
| 3. 입력 양식 작성(2) - input 태그 2 (0) | 2023.03.06 |
