• 폼 삽입하기
  • <form> 태그
  • 자동 완성 기능 autocomplete 속성
  • 폼을 그룹으로 묶는 <fieldset>, <legend> 태그
  • 폼 요소에 레이블을 붙이는 태그 <label>

폼 삽입하기

<form> 태그

속성을 이용하여 입력받은 자료를 어떤 방식으로 서버에 넘길지 지정하는 태그

• 기본형

<form [속성="속성값"]>여러 폼 요소</form>

종류	설명
method	서버에 어떻게 넘겨줄 것인지 지정
	get : 데이터 크기 제한, 사용자 입력 내용 드러남
	post : 데이터 크기 제한x, 사용자 입력 내용 드러나지 않음
name	사용할 폼의 이름 지정
action	내용을 처리해 줄 서버 프로그램 지정
target	action 속성에서 지정한 파일을 다른 위치에서 열도록 함

• 예시

<form action= "">
</form>

자동 완성 기능 autocomplete 속성

예전 입력 내용을 자동으로 표시해주는 기능 기본 속성 값 : “on”

<form action = " " autocomplete="off">
</form>

폼을 그룹으로 묶는 <fieldset>, <legend> 태그

<fieldset> 태그 : 하나의 폼 안에서 여러 구역으로 나누어 표시

<fieldset [속성="속성값"]> </fieldset>

<legend> 태그 : <fieldset> 태그로 묶은 그룹에 제목 붙이기

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

<form action="">
    <fieldset>
      <legend>상품 선택하기</legend>
    </fieldset>
    <fieldset>
      <legend>용량 선택하기</legend>
    </fieldset>
</form>

• 출력 화면

폼 요소에 레이블을 붙이는 태그 <label>

입력란 가까이에 붙여 놓은 텍스트 폼 요소와 레이블 텍스트가 서로 연결되어 있다고 알려주는 태그

• 기본형 1

<label>레이블명<input></label>

• 기본형 2

<label for="id명">레이블명</label>
<input type="text" id="id명">    // 같은 값을 지정해줘야 한다.

<form action="">
    <fieldset>
      <legend>상품 선택하기</legend>
    </fieldset>
    <fieldset>
      <legend>용량 선택하기</legend>
    </fieldset>
    <label>이름<input type="text"></label>    // 추가
</form>

<label> 태그와 <input> 태그가 멀리 존재하여도 둘 사이를 쉽게 연결할 수 있다.

• 출력 화면

---

출처

• (고경희, ⌜Do it! HTML+CSS+자바스크립트 웹 표준의 정석⌟, 이지스퍼블리싱, 2021)을 학습하고 개인 학습용으로 정리한 내용입니다.