입력 양식은 전체 영역을 정의하기 위한 <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을 지정해주면 된다.
'개발(차근차근 기초) > Web' 카테고리의 다른 글
| [Web] Maven이란 (0) | 2020.04.28 |
|---|---|
| 웹 브라우저 캐시 (0) | 2020.03.17 |
| [Sublime Text] 자바개발, 웹개발 추천 유용 패키지 (0) | 2020.03.16 |
| [Markdown] 마크다운(markdown) 작성 요령(간략 요약본) (0) | 2020.03.16 |