폼 관련 태그들 - 사용자 입력을 위한 <input> 태그 5

폼 관련 태그들 - 사용자 입력을 위한 <input> 태그 5

1. type="submit", type="reset" - 서버 전송, 리셋 버튼 넣기

• 리셋(reset)버튼은 <input> 요소에 입력된 모든 정보를 재설정해 사용자가 입력한 내용을 모두 지울 수 있습니다. 이때 value 속성을 사용해 버튼에 표시할 내용을 지정합니다.
• type="submit"은 사용자가 폼에 입력한 정보를 서버로 전송하는 submit 버튼을 넣습니다.
• submit 버튼으로 전송된 정보는 처음에 <form> 태그에서 지정한 폼 처리 프로그램에 넘겨집니다.
• 이 기능은 브라우저와 상관없이 사용 가능합니다.

 

기본형 : <input type="submit | reset" [value="버튼 내용"] [속성="속성 값"]>

메일 등록

메일 주소

 

<div class="exam1" style="width: 400px; height: 100px; border: 2px solid pink; padding: 20px;">
    <h4>메일 등록</h4>
    <form action="register.php" method="post">
        <label>메일 주소 <input type="text"></label>
        <input type="submit" value="제출">
        <input type="reset" value="다시입력">
    </form>
</div>

2. type="image" - 이미지 버튼 넣기

• type="image"를 사용하면 submit 버튼 대신 전송 이미지를 넣을 수 있습니다.
• 이 기능은 브라우저와 상관없이 사용 가능합니다.

 

기본형 : <input type="image" src="경로" alt"대체 텍스트" [속성="속성 값"]>

<div class="exam2" style="width: 600px; height: 50px; border: 2px solid pink; padding: 20px;">
    <label>아이디 <input type="text" size="15"></label>    
    <label>비밀번호 <input type="password" size="15"></label>
    <input type="image" id="button" src="img/login.jpg" alt="login" style="vertical-align: -5px;">
</div>

3. type="button" - 버튼 넣기

• type="button"은 폼 안에 버튼 형태를 만듭니다. 이 버튼은 submit나 reset같은 자체 기능이 없고 오직 버튼만 넣기 때문에 스크립트 함수 들을 연결해 사용합니다.
• value 속성을 사용해 버튼에 표시할 내용을 지정합니다.

 

기본형 : <input type="button" [value="버튼 내용"] [속성="속성 값"]>

 

버튼을 클릭했을 때 새 탭을 여는 자바스크립트 함수를 실행

<div class="exam3" style="width: 500px; height: 100px; border: 2px solid pink; padding: 20px;">
    <h4>버튼을 클릭했을 때 새 탭을 여는 자바스크립트 함수를 실행</h4>
    <input type="button" value="새 탭 열기" onclick="window.open()">
</div>

4. type="file" - 파일 첨부하기

• type="file"은 파일을 첨부할 때 사용합니다.
• type="file" 필드를 넣으면 웹 브라우저 화면에 [파일 선택]이나 [찾아보기]등이 표시되는데 이 버튼을 클릭한 후 파일을 선택하면 파일이 첨부됩니다.

 

기본형 : <input type="file" [속성="속성 값"]>

파일 첨부하기

첨부파일

 

 

 

참고 : HTML5 + CSS3 웹 표준의 정석