폼을 만드는 태그
폼(form)이란?
:: HTML에서 폼이란 데이터를 서버에 보내기 위해 사용하는 모든 대화형 컨트롤을 의미한다.
:: 보내진 데이터는 서버의 데이터베이스에서 처리하며 ASP나 PHP, JSP 같은 서버 프로그래밍 언어를 이용한다.
:: HTML과 CSS로 눈에 보이는 프론트엔드 페이지를 꾸미고 실제 처리는 서버의 백엔드 스크립트가 처리한다.
:: form태그는 동적웹에서 주로 활용되므로 결과를 제대로 확인하려면 실습환경을 그에 맞게 구성할 필요가 있다.
-- 주로 APM이라고 부르는 Apach웹서버, PHP, MySql(혹은 MariaDB)를 설치한다.
-- 실습환경 세팅에 대한 부분도 언젠가 기회가 된다면 포스팅 할... 지도?
<form> 태그 (MDN)
:: 폼의 시작과 끝을 알리는 구획 태그.
<form>태그의 주요 속성
:: method : 사용자가 입력한 내용들을 서버 쪽 프로그램에 어떻게 넘겨줄지 지정한다.
-- get : 주소 표시줄에 사용자가 입력한 내용이 그대로 들어난다. 넘길 수 있는 데이터의 제한이 있다.
-- post : 사용자의 입력을 표준 입력으로 넘겨준다. 넘길 수 있는 데이터의 제한이 없고 주소 표시줄에 들어나지 않는다.
:: autocomplete : 자동완성을 사용할지 여부. 기본값은 on으로 설정되어 있다. on,off의 값을 갖는다.
:: action : form태그 안의 내용들을 처리해 줄 프로그램의 주소(URI)를 지정한다. 제출시 그 주소로 이동한다.
:: target : action태그에 지정된 주소를 어디에 열지를 지정한다. a태그의 target 속성과 동일하다.
action 속성에는 데이터를 처리할 수 있는 스크립트가 들어있는 주소를 지정해서 데이터를 처리하는게 맞지만, 결국 입력된 정보와 함께 action 속성의 주소로 이동하므로 결과적으로 a태그처럼 작동할 수도 있다.
<form action="주소"> <input type="submit"> </form> 이라고 작성하면 사실상 a태그처럼 작동한다.
하지만 웹페이지 이동용 버튼을 만들고 싶다면 a태그를 이용하는게 의미론적으로 더 적합함을 잊어선 안된다.
<fieldset>태그 (MDN)
:: 폼 요소들을 그룹으로 묶을때 사용되는 구획 태그
:: 사용시 태그 내부의 요소들을 검은색 실선으로 묶는다.
:: <legend>태그로 구획의 이름을 표시할 수 있다.
<fieldset>태그의 주요 속성
:::: name : 그룹의 이름을 나타내는 속성.
:::: disabled : 묶은 태그들을 비활성화한다. 비활성화된 태그는 회색으로 표시되어 작동하지 않는다.
-- 값을 갖지 않으며, 적어도 무시된다.
:::: form : form 요소의 id를 값으로 갖는 속성으로 <fieldset>과 <form>을 연결해준다.
-- 연결된 <form>과 <fieldset>은 떨어져 있어도 함께 전송된다. 라고 적혀있는데 번역 오류이다.
-- <fieldset> 내의 <input>요소를 양식으로 묶으려면 해당 <form>내에 직접 사용해야한다.
-- JS를 이용하면 이렇게 연결된 폼을 확인할 수 있다.
---- <fieldset>에 대한 설명은 첫번째 자식으로 사용된 <legend> 태그가 담당한다.
form Attributes
This attribute takes the value of the id attribute of a <form> element you want the <fieldset> to be part of, even if it is not inside the form. Please note that usage of this is confusing — if you want the <input> elements inside the <fieldset> to be associated with the form, you need to use the form attribute directly on those elements. You can check which elements are associated with a form via JavaScript, using HTMLFormElement.elements.
<legend> 태그 (MDN)
:: <fieldset> 태그의 제목 혹은 콘텐츠 설명을 나타내는 태그.
썸네일용