[HTML] 기본form 만들기(<form>, <label>, <fieldset>, <legend>)

<form> 태그 - 폼 만들기

---

폼을 만드는 가장 기본적인 태그

 

form 태그의 속성

폼 태그는 몇 가지 속성을 통해 사용자가 입력한 자료들을 서버로 어떤 방식으로 넘길 것인지, 서버에서 어떤 프로그램을 이용해 처리할 것인지 지정한다.

속성	설명
method	사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정한다.
	속성 값	get - 주소 표시줄에 사용자가 입력한 내용이 그대로 드러난다. 256byte~4096byte까지의 데이터만 서버로 넘길 수 있다.
		post - 대부분 이 방식을 사용한다. 사용자의 입력을 표준 입력으로 넘겨주기 때문에 입력 내용의 길이에 제한을 받지 않고 사용자가 입력한 내용이 드러나지 않는다.
name	폼의 이름을 지정한다. 한 문서 안에 여러 개의 <form> 태그가 있을 경우, 폼들을 구분하기 위해 사용한다. ※ checkbox, radio 사용시에 name 지정을 해줘야 같은 그룹으로 인식한다.
action	<action> 태그 안의 내용들을 처리해 줄 서버 상의 프로그램을 지정한다.
target	action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정한다.

 

See the Pen by seyoungjoy (@seyoungjoy) on CodePen.

 

autocomplete 속성 - 자동 완성 기능

사용자가 입력했던 내용을 기억했다가 비슷한 내용을 입력할 경우, 이전에 입력했던 내용을 힌트로 보여준다.

기본값이 'on'이라 기본으로 켜져있다.

그런데 매우 중요한 개인정보를 입력하거나 인증번호 같이 한 번만 사용하고 말 정보를 입력할 때는 이 기능을 꺼줘야 한다.

<form action="register.php" autocomplete="off">
...
</form>

 

<label> 태그 - 폼 요소에 레이블 붙이기

---

<label> 태그는 폼 요소에 레이블을 붙이기 위한 것이다.

레이블이란 입력 창 옆에 아이디, 비밀번호처럼 붙여놓은 텍스트를 의미하며

<label> 태그를 사용하면 폼 요소와 레이블 텍스트가 서로 연결된어 있다는 것을 브라우저가 알 수 있다.

 

또한 checkbox나 radio에서 폼 요소와 <label>태그로 연결해놓으면 라벨 텍스트만 클릭해도 해당 폼요소가 선택될 수 있다.

 

기본형

<label [속성="속성 값"] > 레이블 <input ... > </label>

<label> 태그 안에 폼 요소를 넣는다.

 

or

<label for="id이름"> 레이블 </label>
<input id="id이름" [속성 = "속성 값"]>

<label>요소와 폼 요소를 따로 사용한다.

<label>태그에서는 for 속성을 이용하고 폼 요소에서는 id 속성을 이용해 서로 연결해준다.

즉, 폼 요소의 id 속성값을 label 태그의 for 속성에게 알려주는 것이다.

 

라디오 버튼과 체크박스에서 사용하는 <label>태그

---

\See the Pen by seyoungjoy (@seyoungjoy) on CodePen.

 

 

<fieldset>, <legend> 태그 - 폼 요소 그룹으로 묶기

---

<fieldset>

폼 요소를 그룹으로 묶는 태그

 

<legend>

<fieldset> 태그를 이용해 묶은 그룹에 제목을 붙여주는 태그.

 

See the Pen by seyoungjoy (@seyoungjoy) on CodePen.

기본적으로 fieldset 태그를 이용해 묶으면 fieldset 태그의 기본 css값이 적용되어

border 및 여백들이 들어가 있다.

 

<fieldset>태그의 css 기본값

fieldset {
  display: block;
  margin-left: 2px;
  margin-right: 2px;
  padding-top: 0.35em;
  padding-bottom: 0.625em;
  padding-left: 0.75em;
  padding-right: 0.75em;
  border: 2px groove (internal value);
}

 

 

 

참고

두잇 html5 + css3 웹 표준의 정석