반응형
Notice
Recent Posts
Recent Comments
Link
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Tags
more
Archives
Today
Total
관리 메뉴

디케이

[jQuery] 자바스크립트 form 태그 submit 본문

HTML, CSS

[jQuery] 자바스크립트 form 태그 submit

디케이형 2021. 2. 23. 21:52
반응형

입력 양식은 전체 영역을 정의하기 위한 <form> 태그 안에

입력 항목의 그룹을 위한 <fieldset> 태그가 포함된 형태로 정의됩니다.

또한 <fieldset> 태그 안에는 그룹의 제목 지정을 위해 <legend> 태그가 사용될 수 있습니다.

기본적으로 <fieldset> 태그와 <legend> 태그는 생략이 가능합니다.

<body>
      <!-- 입력 내용을 감싸기 위한 부분 -->
    <form>
      <!-- 입력 항목의 그룹 -->
        <fieldset>
              <!-- 그룹의 제목 -->
            <legend>제목입니다.</legend>

        </fieldset>
    </form>
</body>

 

데이터 전송(submit) 하기 (1)

버튼 표시하기

<input type="submit|button|reset|image" value="버튼 표시 텍스트" [src="이미지경로"] />

input 태그의 type 속성은 submit, button, reset, image 중 하나를 선택하면 됩니다.

 

submit과 image 속성 둘 다 입력한 내용들을 웹프로그램에게 전송하는 기능을 합니다.

image 속성의 경우 버튼에 이미지를 표시합니다. (value 속성 대신 src 속성이 사용됩니다.)

* HTML5에서부터는 fromaction(action 주소)을 설정하는게 가능합니다.

 

button은 아무런 동작이 없으며 일반적으로 Javascript와 연결하여 특정 동작을 구현하기 위해 사용합니다!

(데이터 전송을 바로 하지 않고, 'Javascript와 연결하여 특정 동작 후 전송을 하겠다'한다면 지정하면 됩니다.)

 

reset은 사용자가 입력한 모든 내용을 삭제합니다.


데이터 전송(submit) 하기 (2)

<form method="post|get" action="웹 프로그램 URL" [enctype="multipart/form-data"]>

	... 전송값 입력 내용들 ...
    
</form>

<form> 요소 내의 submit 버튼이 눌러지거나 Javascript와 연결되어있는 button을 통해서 submit이 수행된다면

현재 <form> 안에 사용가가 입력한 모든 내용들이 action 속성에서 명시하는 웹 프로그램 페이지로 전송됩니다.

enctype 속성은 입력 양식 안에 파일 첨부 기능이 포함되어 있는 경우 반드시 지정해야 한다.

 

method 속성은 전송방식을 의미한다.

 - get : 입력된 모든 내용이 URL에 포함되어 전송된다.

 - post : 입력된 내용이 URL에 노출되지 않는다.

 

get과 post에 대한 내용은 다른 글들에서도 쉽게 찾을 수 있을 것입니다!

시간이 된다면 정리를 해보겠지만 아니라면 다른 곳들을 통해 참조해주세요!


위에서는 <input> 태그의 type 속성으로 4가지를 소개했었지만,

HTML5부터는 입력값의 형태에 따라 <input> 태그의 type 속성에 부여할 수 있는 종류가 추가되어 다양해졌습니다.

type값에 따라 모바일 환경에서의 기본 키보드 형태가 변경됩니다!

url : 웹 페이지의 URL을 입력할 수 있다.

tel : 전화번호를 입력할 수 있다.

number : 숫자값을 입력할 수 있다. min, max, step 속성을 추가적으로 사용하여 최소값, 최대값, 입력 단계들을 설정할 수 있습니다.

range : 슬라이드 바 형태로 수치값을 선택할 수 있다. min, max, step 속성을 추가적으로 사용하여 최소값, 최대값, 입력 단계들을 설정할 수 있습니다.

date : 날짜 형식의 값을 입력한다.

time : 시간 형식의 값을 입력한다.

email : 이메일을 입력할 수 있다.

search : 검색어를 입력하는 용도로 사용한다.

 

전화번호 뿐 아닌 숫자를 받는 경우(인증번호, 주민번호)를 위하여 type 속성의 값으로 tel을 주는 경우도 있습니다!


<button> 태그 (HTML5)

<input type="submit|image|reset|button"/>을 대체하기 위한 새로운 태그

오직 form 태그에만 지정할 수 있던 method, action 속성을 개별적으로!!! 지정할 수 있습니다.

즉 기존에는 <form> 하나 당 (버튼의 수에 상관없이) 한개의 웹 프로그램만 연동 가능했지만, 이제는 개별 버튼별로 연동을 지정하여 하나의 폼 태그안에서 여러개의 Submit 전송이 가능하다는 이야기입니다.

그렇다면 <button> 태그의 속성에 대해 알아보도록 하겠습니다.

<button type = "submit|button|reset"
	formaction = "url"
	formmethod = "get|post"
	formtarget = "_blank|_self|_parent|_top" />

type : 버튼의 종류를 지정한다.

formaction : 데이터를 전송할 파일을 지정한다.

formmethod : 전송 방식을 지정한다.

formtarget : form의 target속성을 덮어쓴다.


그럼 button 태그를 배웠으니 본격적으로 한 form안의 데이터를 여러개의 url에 action을 전송하는 방법에 대해 알아보겠습니다.

입력 양식 구성을 위한 form 영역 준비하기

<body>
	<form name="form1">
    	<h1>회원가입</h1>
        	<fieldset>
        		<legend> 부가 정보 </legned>
                
                  <div>
                      <label for="user_mail">이메일: </label>
                      <input type="email" name="user_mail" id="user_mail" required="required" title="student@gmail.com"/>
                  </div>

                  <div>
                      <label for="user_homepage">홈페이지: </label>
                      <input type="url" name="user_homepage" id="user_homepage" />
                  </div>

                  <div>
                      <label for="user_age">나이: </label>
                      <input type="number" name="user_age" id="user_age" min="19" max="100" step="1"/>
                  </div>

                  <div>
                      <label for="user_phone">연락처: </label>
                      <input type="tel" name="user_phone" id="user_phone"/>
                  </div>

                  <div>
                      <label for="point">목표성취도(%): </label>
                      <input type="range" name="point" id="point" value="50" min="0" max="100" />
                  </div>

                  <div>
                      <label for="birthday">생년월일: </label>
                      <input type="date" name="birthday" id="birthday" value="2014-11-30" />
                  </div>

                  <div>
                      <label for="worktime">출근시간: </label>
                      <input type="time" name="worktime" id="worktime" value="09:00" />
                  </div>

                  <div>
                      <label for="friend">추천인 아이디: </label>
                      <input type="search" name="friend" id="friend" />
                  </div>

                  <div>
                      <button type="submit" formaction="action1.html"
                          formmethod="get" formtarget="_blank">14세 이상 회원가입</button>
                      <button type="submit" formaction="action2.html"
                          formmethod="post" formtarget="_self">14세 미만 회원가입</button>
                  </div>                  
			</fieldset>
	</form>
</body>

 

위 코드의 마지막 부분들을 보면 <button> 태그의 formaction 속성을 확인할 수 있습니다.

button의 formaction 속성에 다른 url을 줌으로 인해서 다른 액션(action)을 취할 수 있게 합니다.

또한 Javascript(jQuery)를 통해서 버튼이 눌렸을 때(onclick) form에 action속성을 정해주는 방법도 있습니다.

$("form").attr("action", "action1.html");

$("form").action="action2.html";

간단 정리 :

1. jQuery attr 또는 action으로 액션(action) url을 지정해주거나,

2. input 또는 button의 formaction 속성을 통해 액션(action) url을 지정해주면 된다.

반응형