HTML form teg

form 테그

정의

form 태그는 정보를 제출하기 위한 대화형 컨트롤 구역
데이터를 백엔드 서버로 전송한다.
결과에 따른 다른 웹 페이지를 생성

속성

action : form이 submit 되었을 때 데이터가 향하는 주소(URL)
method : 데이터를 서버에 전송할 때 사용할 HTTP method를 정의한다.

주로 사용되는 구성 요소

input 사용자가 입력할 수 있는 다양한 공간을 만들어주는 인라인 요소이다. input에 사용할 수 있는 다양한 속성들

💡 type 태그 모양을 다양하게 변경할 수 있다.

radio, button, submit checkbox, text, password, email, number, … radio: 단일 선택만 가능 / checkbox: 다중 선택 가능 이 속성을 통해 해당 input이 어떠한 기능을 하고 있는 태그인지 명확히 명시해 줄 수 있다.

default value: “text” 단일속성으로 자식을 가질 수 없다.

💡 name 태그 이름을 지정한다. 💡 maxlength 해당 태그의 최대 글자 수를 지정한다. 💡 required 해당 태그를 필수태그로 지정한다.

해당 태그에 대한 값을 입력하지 않고 submit 버튼을 누르면 에러 메세지가 화면에 출력된다.

💡 placeholder 태그에 입력할 값에 대한 힌트를 준다.

button
label 사용자 인터페이스 요소들의 설명을 정의할 때 사용하는 인라인 요소이다.

for 속성을 사용하여 다른 요소와 결합할 수 있다.

이때 label의 for 속성값이 결합하고자 하는 요소의 id 속성값과 같아야 한다. 이 경우 사용자가 해당 텍스트만 클릭하더라도 label 요소와 연결된 요소를 곧바로 클릭하는 것과 같은 효과를 준다.

fieldset, legend 💡 fieldset 웹 양식의 여러 컨트롤과 label을 묶을 때 사용하는 블록 레벨 요소이다.

form 안에서 form의 요소들을 그룹화할 때 사용한다.

💡 legend fieldset 하위에서 그룹화한 form 요소들에 대해 목적에 맞는 이름을 지정한다.

select, option, optgroup 💡 select 항목을 선택할 수 있는 드롭다운 메뉴를 정의하는 인라인 요소이다.

선택됐을 때 값으로써 사용할 value라는 속성을 가진다.

지정된 value 값이 없는 경우 안의 텍스트를 값으로 사용한다.

예) 이메일 회원가입 시 이메일을 선택하는 드롭다운 메뉴

💡 option select, optgroup, datalist 요소의 항목을 정의한다. 💡 optgroup select 태그 안의 목록들을 그룹화할 때 사용한다.

optgroup 하위에 option 요소들이 포함된다.

textarea

여러 줄을 입력받기 위해 사용하는 인라인 요소이다.

rows 속성으로 줄을, cols 속성으로 한 줄에 입력받을 크기를 설정한다.

datalist

검색이 가능한 (미리보기가 가능한) input(사용자 입력) 태그이다. (인라인 요소)

텍스트 상자에 입력할 값 후보 목록을 설정해둘 수 있다.

-dialog: 대화 상자 요소

닫을 수 있는 경고창, 대화 상자 등 상호작용 가능한 요소를 만들기 위해 사용하는 블록 레벨 요소이다.

dialog를 사용하여 웹 페이지 상에 팝업 창을 만들 수 있다.

사용 예시

<form>
    <fieldset>
      <legend>Your Favorite Sports</legend> 
      <input type="radio" id="soccer" name="sports" value="0"/>
      <label for="soccer">soccer</label> <br>
      <input type="radio" id="baseball" name="sports" value="1"/>
      <label for="baseball">baseball</label> <br>
      <input type="radio" id="basketball" name="sports" value="2"/>
      <label for="basketball">basketball</label> <br>
    </fieldset>
  </form>

참조

공식 사이트