html 폼 만들기 3 - button 태그로 기본 버튼 만들기
네 안녕하세요, 이번 포스팅에서는 버튼을 만드는 방법에 대하여 알아보겠습니다...
우리가 무언가를 검색을 하거나,
혹은 아이디와 비밀번호를 입력을 한다던가,
아니면 페이지 이동 및 전환을 할 때 버튼을 누릅니다.
그 말은 즉슨, 웹은 버튼을 거의 항상 필요로 한다는 뜻이 됩니다.
그래서 이번 시간에는 그 부분을 한 번 다뤄보려 합니다.
그럼 지금 시작하도록 하겠습니다.
1. 버튼의 종류
버튼은 큰 틀에서 나누면 문자로 이루어져 있는 텍스트 버튼,
그리고 이미지가 씌워져 있는 이미지 버튼이 있습니다.
보통 통상적으로는 이미지 버튼을 가장 많이 쓰는데, 필요에 따라서 이미지 버튼을 쓸 때도 있습니다.
그리고 버튼에 어떤 기능을 입히느냐에 따라서 허용, 또는 접속을 할 수 있게 만드는 버튼이 될 수도 있고,
모든 값을 초기화 시키는 리셋 버튼이 될 수도 있습니다.
그러면 하나하나 한 번 살펴보도록 하겠습니다.
1 - 1. 단순 버튼 : input type="button"
일단 우리가 허용, 또는 리셋 버튼을 만들기 위해서 제일 기본으로 필요한 기능입니다.
우리가 단순 버튼을 만들 줄 알아야 허용 버튼과 리셋 버튼도 만들 수 있습니다.
그러면 우리가 흔히 보는 버튼은 어떤 식으로 코드가 구성이 되어있는지 한 번 같이 볼까요?
<input type"button" value="로그인">
<button type="button">로그인</button>보통 버튼의 형태는 이런 식으로 우리가 입력을 해야 하는 게 존재하고,
그것과 상호작용을 해야 하기 때문에 기본적으로 input 태그를 같이 이용을 합니다.
그리고 그 밑에 있는 버튼 태그의 type 속성을 통하여 우리가 허용 버튼,
그리고 리셋 버튼을 지정을 할 수 있습니다.
그리고 여기에서 type 속성에 buton이라고 적게 되면 크게 어떤 기능을 하지 않는 단순한 버튼이 만들어집니다.
1 - 2. submit 버튼(허용 버튼) : button type="submit"
submit 버튼은 서버 통신을 통하여 로그인이나 검색을 한다던가,
파일을 업로드 또는 다운로드를 할 때 쓰곤 합니다.
우리가 submit이 들어가 있는 버튼을 클릭하게 되면
브라우저 창이 폼에 입력되어 있는 정보(데이터)를 웹 서버로 전송을 하여
그 결과를 화면에 띄워주는 기능을 하게 됩니다.
그럼 같이 submit 버튼은 어떻게 구성이 되어있는지 한 번 볼까요?
<input type"button" value="전송">
<button type="submit">전송</button>이런 식으로 일반 <button> 태그 구성과 똑같이 생겼습니다.
하지만 button 태그의 type 속성의 값이 submit으로 되어있죠?
이렇게 되어있으면 우리가 검색 또는 무언가를 입력했을 때
그 결과를 받아서 거기에 상응하는 것을 보여주겠다는 뜻이 됩니다.
1 - 3. reset 버튼 : button type="reset"
reset 버튼은 우리가 입력한 값을 초기화시키는 버튼입니다.
단순히 텍스트를 입력하는 것이라면 그냥 검색창에서 글자를 지워버리면 끝나는 문제지만,
글자를 입력하는 상황이 아닌 경우, 예를 들어 파일 등을 업로드했을 경우에는
텍스트가 아니기 때문에 단순한 방법으로 지울 수 없습니다.
그럴 때를 대비하여 우리가 입력한 값을 초기화 할 수 있도록 리셋 버튼을 만드는 겁니다.
그럼 리셋 버튼은 어떤 구조롤 이루어져 있는지 한 번 같이 볼까요?
<input type"button" value="리셋">
<button type="reset">리셋</button>리셋 버튼 또한 일반적인 버튼들의 구성과 똑같습니다.
다만, submit 버튼처럼 button 태그의 type 속성이 reset으로 되어있습니다.
이 버튼은 우리가 어떤 결과를 다시 초기화 해서 처음 화면으로 되돌리고 싶을 때 사용합니다.
2. button 태그 사용 시 주의사항
그리고 button 태그를 쓸 때의 주의할 점이 하나 있다면,
form 태그 안에 있는 button 태그의 기본 type은 submit입니다.
그래서 우리가 form 태그 밖에서 쓸 떄와 안에서 쓸 때의 차이를 명확하게 구분을 해야 합니다.
그걸 인지하지 못해서 웹 페이지에 버튼을 삽입할 때 예기치 못한 오류 때문에 쩔쩔매는 경우가 있습니다.
그러니 힝싱 이 점을 꼭 기억하셔야 합니다.
그럼 이들을 이용해서 간단한 예제를 한 번 작성해보도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<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>버튼이 있는 입력 폼</title>
</head>
<body>
<h3>버튼을 만들자!</h3>
<hr>
<form>
검색 : <input type="text" size="10" value=""><br>
<input type="button" value="Q1">
<button type="button">Q2</button><br>
submit 버튼 : <input type="submit" value="전송1">
<button type="button">전송2</button><br>
reset 버튼 : <input type="submit" value="리셋1">
<button type="button">리셋2</button><br>
</form>
</body>
</html>이제 결과를 보도록 하겠습니다.
결과가 잘 나온 것을 확인할 수 있습니다.
여기까지 기본 버튼을 만드는 방법에 대해 알아보았습니다.
다음 포스팅에서는 이미지 버튼을 만드는 방법에 대하여 알아보도록 하겠습니다.
긴 글 읽어주신 독자분들께 진심으로 감사드립니다~
'html, css, 자바스크립트 > html' 카테고리의 다른 글
| html 폼 만들기 5 - 체크박스 만들기 (0) | 2023.03.04 |
|---|---|
| html 폼 만들기 4 - 이미지 버튼 만들기 (0) | 2023.03.04 |
| html 폼 만들기 2 - datalist, option 태그로 데이터 목록을 가지고 있는 창 만들기 (0) | 2023.03.03 |
| html 폼 만들기 1 - input, textarea 태그로 기본 텍스트 입력창 만들기 (0) | 2023.03.03 |
| html form 태그로 웹 폼 기본 구성 해보기 (0) | 2023.03.03 |
댓글