button 태그 - 바로 실행해보면서 배우는 HTML5/CSS3
바로 실행해보면서 배우는 HTML5/CSS3
  • button 태그
    learn
    Practice
    learn
    07 입력 양식 태그
    button 태그

    드디어 마지막입니다. 이제 모든 양식을 완성하였으니 제출을 하고 싶은데 제출 버튼이 없으니 만들어봅시다. 버튼은 <input type="button">로 만들 수 있지만, 이번 시간에는 <button>태그를 이용해보려 합니다.

    <button> 태그는 HTML 요소를 <button> 태그 내부에 담아 사용할 수 있다는 장점이 있어 꽤 자주 사용하는 태그입니다. 이런 특징 덕분에 이미지 버튼의 제작도 가능하죠. 바로 코드를 살펴보겠습니다.

    덧붙여 type="reset"도 사용할 수 있는데, 이는 입력 양식을 모두 초기화하는 역할을 수행합니다.

    여기까지 회원가입 폼을 모두 완성하였습니다. 모든 코드를 작성하였다면 코드를 실행한 뒤, 결과 창에 나타난 제출 버튼을 클릭하고 주소창을 확인해봅시다. 우리가 키(key)와 값(value)으로 주었던 모든 것들이 주소에 담겨져 있는 것을 확인할 수 있습니다. 물론, GET 방식으로 보냈기 때문에 확인 가능한 것이겠죠?

    Practice
    이론에서 살펴본 코드를 직접 작성하여 결과를 확인한 뒤, 구성 요소를 변경하며 어떤 변화가 일어나는지 확인해봅시다.
    learn
    Practice
    Q & A
    Q&A forum that anyone can ask and answer.
    Share your questions and answers with other students and grow together!
    Registered Questions(0)