input 태그-5 (버튼, 히든필드)

Hush 2022. 5. 30. 16:38

전송기능을 하는 submit 버튼

submit은 폼에 입력한 정보를 서버로 전송합니다.

submit 버튼으로 전송된 정보는 <form> 태그의 action속성에서 지정한 폼 처리 프로그램에 넘겨집니다.

<input type="submit" value="버튼에 표시할 내용">

입력한 내용을 모두 지우는 reset 버튼

<input>요소에 입력된 모든 정보를 재설정해서 사용자가 입력한 내용을 모두 지우는 역할을 합니다.

<input type="reset" value="버튼에 표시할 내용">

이미지 버튼

type="image"는 submit 버튼과 같은 기능을 하는 이미지 버튼을 나타냅니다.

<input type="image" src="이미지 경로" alt="대체 텍스트">

기본 버튼

type="button"은 submit이나 reset버튼과 같은 기능이 없고 오직 버튼 형태만 삽입합니다.

주로 버튼을 클릭해서 자바스크립트를 실행할 때 사용합니다.

기본형은 다음과 같습니다

<input type="button" value="버튼에 표시할 내용">

기본 버튼을 이용해 자바스크립트의 window.open() 함수를 실행하여 연결한 문서가 새 탭에 보이게 해보자

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
    </head>
    <body>
        <form>
            <h1>파일첨부버튼</h1>
            <input type="button" value="test1 보기" onclick="window.open('test1.html')">
        </form>
    </body>
</html>

파일 첨부 버튼

간혹폼에서 사진이나 문서를 첨부해야 하는 경우가 있습니다.

이럴 때 사용하는 타입이 type="file"입니다.

이 타입을 사용하면 웹 브라우저 화면에 [파일선택]이나 [찾아보기]버튼 등이 표시됩니다.

<input type="file">

예제를 봅시다

히든필드

화면의 폼에는 보이지 않지만 사용자가 입력을 마치면 폼과 함께 서버로 전송되는 요소입니다.

사용자에게 굳이 보여줄 필요는 없으나 관리자가 알아야 하는 정보를 이 방법으로 입력합니다

<input type="hidden" name="이름" value="서버로 넘길 값">

저작자표시 (새창열림)