Appia의 IT세상

[초보HTML배우기 17]HTML - 버튼(button)만들기(input) 본문

Programming/HTML&CSS

[초보HTML배우기 17]HTML - 버튼(button)만들기(input)

Appia 2020. 8. 16. 07:59
반응형

[초보HTML배우기 17]HTML - 버튼(button)만들기(input)

 

html에서는 단순히 정보만 표시하는 데에 그치지 않습니다. 실제 문서적인 출력하는 부분과 프로그래밍 부분이 섞여 있는 부분이 html이라고 생각합니다. 이 html에 버튼을 생성해보도록 하겠습니다. 물론, 이런 부분들은 향후 다른 언어와 결합되어 사용이 됩니다. 즉, 예를 들면, 자바 스크립트와 함꼐 사용되고, 버튼을 눌렀을 경우 이 부분들에 동작을 할 수 있게 코딩할 수 있습니다. 그래서 오늘은 이 버튼을 생성하는 방법에 대해서 살펴보겠습니다. 

html - 버튼 생성 이미지 

위와 같은 버튼을 생성하는 부분에 대해서 다음 한번 살펴보겠습니다. 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <form>
      <input type = "submit" name = "submit" value = "제출" />
      <input type = "reset" name = "reset"  value = "초기화" />
      <input type = "button" name = "ok" onclick="alert('Hello World!')" value = "완료" />
   </form>
</body>
</html>
 cs

 

위의 버튼을 지원하는 타입(type)을 다음과 같이 3가지 형태로 기본 제공을 합니다. 

타입 타입 설명
submit 현재 form을 서버에 제출
reset form 객체의 초기화
button 버튼에 따른 동작 진행 

 

위의 부분을 활성화하여 '완료' 부분을 클릭하면 다음과 같은 결과가 나타납니다. 

html 실행 화면 

그럼 버튼 부분에 대해서 조금 더 살펴보겠습니다. 

 

 
   <form>
      <input type = "submit" name = "submit" value = "제출" />
      <input type = "reset" name = "reset"  value = "초기화" />
      <input type = "button" name = "ok" onclick="alert('Hello World!')" value = "완료" />
   </form>
 
 cs

 

여기에서 input 에 다른 type을 넣어고, button에 onclick를 통해서 이벤트를 연결하였습니다. 이렇게 해서, 간단하게 작업을 진행해봤습니다. 실제, 다른 언어와 연결시에 가장 많이 사용되는 부분이기에 반드시 알고 있어야 하는 부분이 html에서 버튼을 생성하는 부분이라고 생각이 듭니다.

 

이번 포스팅은 [초보HTML배우기 17]HTML - 버튼(button)만들기(input)라는 주제로 html상에 간단한 버튼을 생성해봤습니다. 이번 포스팅까지 해서 HTML에 대해서 간단히 한번 살펴봤습니다. 실제, 웹크롤링을 하는데 HTML에 대해서 파악이 필요했기 때문에 관련된 부분에 대해서 쭈욱 살펴봤습니다. 이로써, 기본적인 HTML에 대해서는 포스팅을 완료하였습니다. 이제는 이벤트성으로 각 항목에 대해서 필요시 각 부분들에 대해서 포스팅을 할 예정입니다. 감사합니다. 

 

 

반응형
저작자표시 비영리 변경금지

'Programming > HTML&CSS' 카테고리의 다른 글

Sublime Text 기본 템플릿 사용하기  (0) 2021.09.06
[초보HTML배우기 16]HTML - 파일 업로드 박스(upload box)만들기(input)  (0) 2020.08.13
[초보HTML배우기 15]HTML - Form, 콤보 박스(Select box)만들기(select)  (1) 2020.08.10
[초보HTML배우기 14]HTML - Form, 라디오 버튼(radio button)만들기(input)  (0) 2020.08.07
[초보HTML배우기 13]HTML - Form, Checkbox만들기(input)  (0) 2020.08.04
'Programming/HTML&CSS' Related Articles more
Comments