<form></form> 폼 양식 속성 설명

| HTML/xhtml문법

2014. 1. 22. 18:44

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<form> - 폼 양식 속성 설명<br />
폼 양식 관련 태그 리스트<br />
<input>, <textarea>, <button>, <br />
<select>, <option>, <optgroup>, <br />
<fieldset>, <label> <br />
<br />
<hr />
<b><form> : 사용자 입력을위한 HTML 양식을 생성하는 데 사용됩니다.</b><br /><br />
( 속성-method, name, action, target, enctype, accept-charset, <br />
         
accept, autocomplete, novalidate )<br />
<br />
<form> 과 폼 양식 관련 태그 리스트의 요소 하나 이상 포함합니다.<br />
XHTML에서 name 속성은 더 이상 사용되지 않습니다.<br />
대신 글로벌 id 속성을 사용한다고 하는데 해보니 <br />
아직은 안되서 name과 id 같이 쓰는게 나을것 같습니다.<br />
<form> 태그는 직접 해보셔야 이해가 빠릅니다. <br />
<br />
또한 서버와 연동해서 데이터 처리하는 서버언어인 php, jsp, asp 중 최소 하나 아셔야 하며,<br />
입력한 데이터들을 서버DB에 저장하는 DB언어인 sql문(query)도 아셔야 하고,<br />
javascript와 jquery를 아시면 화면 구성시 도움이 될 것 입니다.<br />
<br />
<hr />
<div id="ex_view2">
<p><b>예제 - 모양만 보여주기 위힌 화면(네이버 검색)</b></p>
<script type="text/javascript" language="javascript">
<!--
/* 텍스트상자 클릭시 빈칸으로 초기화 */
function naversearch_getfocus(){
document.getElementById('query').value = "";
}
/* 버튼 클릭시 메세지 알림창 */
function btn_click_massage(){
alert("이르지 마셈 안되요~ㅋㅋ");
}
//-->
</script>
<form method="get" name="naversearch" id="naversearch" target="_blank" enctype="text/html" action="http://search.naver.com/search.naver" >

<input type="hidden" name="sm" value="top_hty.top" />
<input type="hidden" name="where" value="nexearch" />
<input type="hidden" name="ie" value="utf8" />
네이버 검색어 입력 : <input type="text" id="query" name="query" value="html이란" onfocus="naversearch_getfocus();" style="border-color:red; /><br />
<input type="hidden" name="fbm" value="1" />

<input type="button" value="Submit" onclick="btn_click_massage();">
</form>
</div>
</body>
</html>

--------------------------------------------------------------------------------------------

위 소스 예제 보기

<form></form>

<form> 사용자 입력을위한 HTML 양식을 생성하는 데 사용됩니다.

이건 확실한건 아니지만 참조사항으로 적어두는것입니다.

action이 안되어 있다면 디폴트로 현재 위치를 보는 것 같습니다.(input를 실험했지만 검증이 덜됨)

method는 get이 디폴드로 되어 있는 것 같은데....(input를 실험했지만 검증이 덜됨)

method, name, action, target, enctype, accept-charset,

accept, autocomplete, novalidate 속성은 아래 버튼 클릭하시면 설명이 나옵니다.

태그 속성 보기(접어두었습니다.)

**속성 설명**
속성명	설명
method	폼 데이터를 전송할 때 사용하는 HTTP 메소드를 지정
문법	method="get" / method="post"
name	폼의 이름을 지정합니다.(id 속성 같이 쓸 것-권고)
문법	name="text" (name-"사용할이름[당연히영문]")
action	URL은 양식이 제출시 폼 데이터를 전송하는 위치를 지정
문법	action="text" (action-"전송할곳이름[당연히영문]")
target	양식을 제출 후 응답 표시 할 위치(창or프레임)를 지정
문법	target="_blank" / target="_self" / target="_parent" / target="_top"
설명	새로운창=_blank / 자신자신프레임=_self / 부모프레임=_parent / 최상프레임=_top
enctype	서버에 제출시 폼 데이터가 어떻게 인코딩 지정(업로드)
문법	enctype="multipart/form-data" / enctype="application/x-www-form-urlencoded" / enctype="text/plain"
설명	파일 업로드 컨트롤 양식 사용시 값이 필요함(인코딩안함) ="multipart/form-data" / 기본. 모든 문자가 전송 전에 인코딩 (스페이스는 "+"문자로 변환하고, 특수 문자는 ASCII의 HEX 값으로 변환) ="application/x-www-form-urlencoded" / 스페이스는 "+"문자로 변환되지만, 특수 문자 인코딩안함 ="text/plain"
accept-charset	폼 전송을 위해 사용되어야 문자 인코딩을 지정
문법	accept-charset="UTF-8"
accept	파일의 유형 지정이라는데, 주요 브라우저 지원 안함(HTML5삭제)
autocomplete	양식 자동 완성 기능(HTML5 추가기능)
문법	autocomplete="on" / autocomplete="off"
novalidate	제출시 양식의 유효성을 검사하지 않도록 지정
문법	<form novalidate > [키워드만 추가]

Global Attributes 지원합니다.

Global Event Attributes 지원합니다.

출처&인용 : http://www.w3schools.com/tags/tag_form.asp

저작자표시 비영리 변경금지

'HTML > xhtml문법' 카테고리의 다른 글

<textarea></textarea> 여러 줄 텍스트 입력 (0)	2014.01.22
<form>-<input>, <input /> <label></label> 입력 필드 지정 (0)	2014.01.22
<table> - 부가기능 태그들 사용법(<caption><colgroup><col><span><thead><tbody><tfoot>) (0)	2014.01.22
<table>-<tr>-<th></th><td></td> 테이블 헤더셀과 기본셀 (0)	2014.01.22
<table>-<tr></tr> 테이블 행 (0)	2014.01.21