[html&css] form 태그 - 입력/양식 작성

hyocho·2022년 8월 17일
1

html&css

목록 보기
16/24

📌<form> 태그

입력받은 자료를 어떤 방식으로 서버로 넘길 것인지, 서버에서 어떤 프로그램을 이용해 처리할 것인지를 지정한다.

기본형 <form [속성='속성값']> 여러 폼 요소 </form>
method 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘길지 지정한다. get 과 post로 나뉜다.
-get : 데이터를 256~4,096byte까지만 서버로 넘길 수 있다. 주소 표시줄에 사용자가 입력한 내용이 그대로 드러나는 단점이 있다.
- post : 입력한 내용의 길이에 제한받지 않고 사용자가 입력한 내용도 드러나지 않는다.
name javascirpt로 form 을 제어할 때 사용할 폼의 이름을 지정
action form 태그 안의 내용을 처리해 줄 서버 프로그램을 지정
target action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 한다.



autocomplete : 폼에서 내용을 입력할 때 예전에 입력한 내용을 자동으로 표시해 주는 것을 자동 완성 기능이라고 한다. 기본 속성값은 on. 아래와 같이 기능을 끌 수 있다.

<form action='' autocomplete='off'>
	/*여러 폼 요소*/
</form>

fieldset : 하나의 폼 안에서 여러 구역을 나누어 표시할 때 사용.
ex) 쇼핑몰 사이트에서 개인정보 / 배송정보를 나누어 표시

legend : fieldset 태그로 묶은 그룹에 제목을 붙일 수 있다.

<fieldset>
  <legend>그룹 이름</legend>
</fieldset>

lable : <input> 와 같은 폼 요소에 레이블을 붙일 때 사용한다. 폼 요소와 레이블 텍스트가 서로 연결되었다는 것을 브라우저가 알 수 있음.

  1. <lable> 태그 안에 <input>태그 넣기
<lable>아이디 (6자이상) <input type="text"></lable>

  1. <lable> 태그와 폼 요소를 따로 쓰고 연결하기
    label 태그를 사용한 레이블과 사용자 정보를 입력받는 input태그가 떨어져 있더라도 둘 사이를 쉽게 연결할 수 있다.
<label for="user-id">아이디 (6자 이상)</label>
<input type="text" id="user-id">

예제작⬇️
아이디 (6자이상)


profile
기록하는 습관을 기르고 있습니다.

0개의 댓글