폼 콘텐츠(Forms content) 요약 설명
- 폼 콘텐츠는 사용자로부터 정보를 입력받는 웹 양식(form)을 구성하는 요소들을 가리킵니다. 이러한 요소들은 사용자가 텍스트를 입력하거나 선택하고 제출하는 등의 상호 작용을 할 수 있도록 도와줍니다.
- 주요 폼 콘텐츠 요소로는
<input>,<select>,<textarea>,<button>,<label>등이 있습니다.- 폼 콘텐츠 요소들을 조합하여 로그인 폼, 등록 폼, 설문조사 등 다양한 웹 양식을 만들면 사용자로부터 다양한 종류의 정보를 수집하고 처리할 수 있습니다.
사용자로부터 입력을 받을 수 있는 HTML 입력 폼(form)을 정의할 때 사용합니다.
HTML5에서는 <form> 요소에 autocomplete 속성과 novalidate 속성이 새롭게 추가되었고, accept 속성은 더 이상 지원되지 않도록 변경되었습니다.
accept 속성은 HTML5에서 제거되고 더 이상 사용되서는 안됩니다. 대신에, <input> 요소의 accept 속성을 사용하세요.
XHTML에서는 name 속성을 더 이상 지원하지 않으므로, name 속성 대신 전역 속성인 id 속성을 사용해야 합니다.
<form> 요소의 action 속성은 폼 데이터(form data)를 서버로 전송할 때 해당 데이터가 도착할 URL을 명시합니다.
이 값은 <button> 또는 <input> 요소의 formaction 속성으로 대체될 수 있습니다.
HTML5에서는 더 이상 <form> 요소에 반드시 action 속성을 명시할 필요가 없도록 변경되었습니다.
<form> 요소의 method 속성은 폼 데이터(form data)가 서버로 전송될 때 사용되는 HTTP 메소드를 명시합니다.
속성값으로는 GET과 POST 두 가지 중 하나를 선택할 수 있습니다.
GET 방식은 URL에 폼 데이터를 추가하여 서버로 전달하는 방식입니다.
GET 방식의 HTTP 요청은 브라우저에 의해 캐시되어(cached) 저장됩니다.
또한, GET 방식은 보통 쿼리 문자열(query string)에 포함되어 전송되므로, 길이의 제한이 있습니다.
따라서 보안상 취약점이 존재하므로, 중요한 데이터는 POST 방식을 사용하여 요청하는 것이 좋습니다.
POST 방식은 폼 데이터를 별도로 첨부하여 서버로 전달하는 방식입니다.
POST 방식의 HTTP 요청은 브라우저에 의해 캐시되지 않으므로, 브라우저 히스토리에도 남지 않습니다.
또한, POST 방식의 HTTP 요청에 의한 데이터는 쿼리 문자열과는 별도로 전송됩니다.
따라서 데이터의 길이에 대한 제한도 없으며, GET 방식보다 보안성이 높습니다.
폼 데이터를 HTTP GET 메소드로 전송함. ex) URL?name=value&name=value&...
폼 데이터를 HTTP POST 메소드로 전송함. 폼 데이터가 폼의 바디에 포함되어 서버에 전송됨.
<form> 요소의 name 속성은 해당 폼(form)의 이름을 명시합니다.
name 속성은 서버로 제출된 폼 데이터(form data)를 참조하기 위해 사용되거나, 자바스크립트에서 요소를 참조하기 위해 사용됩니다.
XHTML에서는 name 속성을 더 이상 지원하지 않으므로, name 속성 대신 전역 속성인 id 속성을 사용해야 합니다.
<form> 요소의 target 속성은 폼 데이터(form data)를 서버로 전송한 후 받는 응답이 열릴 위치를 명시합니다.
HTML 4.01에서는 <form> 요소의 target 속성을 지원하지 않았지만, HTML5부터는 지원하도록 변경되었습니다.
HTML5에서는 프레임(frame)과 프레임셋(frameset)을 더 이상 지원하지 않습니다.
따라서 _parent, _top, 프레임 이름과 같은 속성값들은 iframe 요소와 함께 주로 사용됩니다.
이 값은 <button> 또는 <input> 요소의 formmethod 속성으로 대체 가능합니다.
기본값으로 생략 가능합니다. 서버로부터 받은 응답이 링크가 위치한 현재 프레임에서 출력됩니다.
서버로부터 받은 응답이 새로운 윈도우나 탭(tab)에서 출력됩니다.
서버로부터 받은 응답이 현재 프레임의 부모 프레임에서 출력됩니다. 만약 부모가 없을 경우 _self와 동일하게 여겨집니다.
서버로부터 받은 응답이 현재 윈도우 전체에서 출력됩니다.
HTML4에서는, 다른 모든 프레임을 취소하고 결과를 꽉 찬 본래의 윈도우에 로드합니다.
HTML5에서는, 결과를 최상위 브라우징 컨텍스트에 로드합니다. 만약 부모가 없다면, 이 옵션은 _self와 같이 행동합니다.
서버로부터 받은 응답이 명시된 프레임에서 출력됩니다.
서식 데이터(form data)를 서버로 전송 시 사용되는 하나 이상의 문자 인코딩 방식이 공백 문자(space)로 구분된 리스트입니다.
<form> 요소의 accept-charset 속성은 폼 데이터(form data)를 서버로 전송 시 사용되는 문자 인코딩(character encoding) 방식을 명시합니다.
accept-charset 속성의 기본값은 "UNKNOWN"으로 설정되며, 이 값은 <form> 요소가 포함되어 있는 HTML 문서의 문자 인코딩과 동일함을 나타냅니다.
HTML 4.01에서 문자 인코딩 리스트는 공백 문자(space)나 콤마(,) 중 원하는 문자를 사용하여 각각의 인코딩 방식을 구분할 수 있었지만,
HTML5에서는 반드시 공백 문자만을 사용하여 구분하도록 변경되었습니다.
<form> 요소의 enctype 속성은 폼 데이터(form data)가 서버로 전송될 때 해당 데이터가 인코딩되는 방법을 명시합니다.
이 속성은 <form> 요소의 method 속성값이 "post"인 경우에만 사용할 수 있습니다.
속성이 지정되지 않은 경우 기본값입니다. 모든 문자들은 서버로 전송 전에 인코딩됨을 명시합니다.
모든 문자를 인코딩하지 않음을 명시합니다. 이 방식은 <form> 요소가 파일이나 이미지를 서버로 전송 시 주로 사용합니다.
공백 문자(space)는 "+" 기호로 변환하지만, 나머지 문자는 모두 인코딩되지 않음을 명시합니다.
<form> 요소의 autocomplete 속성은 <form> 요소에서 자동 완성 기능을 사용할 지 여부를 명시합니다.
autocomplete 속성값을 on으로 명시하면, 브라우저는 사용자가 이전에 입력했던 값들을 기반으로 사용자가 입력한 값과 비슷한 값들을 드롭다운 옵션으로 보여줍니다.
이 속성을 사용하면 <form> 요소에서는 자동 완성 기능을 사용하면서 특정 <input> 요소에서는 자동 완성 기능을 사용하지 않거나 그 반대로 설정하는 것도 가능합니다.
<form> 요소의 autocomplete 속성은 HTML5에서 새롭게 추가된 요소입니다.
기본값으로, 브라우저는 사용자가 이전에 입력한 값을 기반으로 자동으로 값을 완성합니다.
브라우저가 자동으로 값을 완성하지 않으므로, 사용자는 매번 각 입력 필드에 값을 끝까지 입력해야 합니다.
기본적으로 novalidate 속성은 boolean attribute(블리언 속성)입니다.
불리언 속성은 해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며, 명시하면 자동으로 true 값을 가지게 됩니다.
이 불리언 속성은 양식을 제출 시(폼 데이터가 서버로 전송 시) 해당 데이터의 유효성을 검사하지 않음을 명시합니다.
이 속성을 지정하지 않으면 양식 제출 시 양식의 유효성이 검사되며,
이 기본 설정은 <button> 또는 <input> 요소의 formnovalidate속성으로 대체 가능합니다.
UXKM Editor로 자유롭게 코드를 연습하세요. 전체 화면 코드 작성 및 코드 다운로드가 가능합니다.