[HTML] 사용자로부터 입력 받기(1)

1. 기본 형태 

(1) form 태그 

정보를 제출하기 위해 필요한 태그들이 모두 form 태그안에 포함된다. 

*형식

  <form 
  action="값이 제출될 곳"
  method="RESTAPI 요청 중 하나 (get: 조회, Post: 등록 등등)"
  autocomplete="off (자동완성 기능/ 이건 선택 사항: 안 적혀있으면 ON이다.
  					ON이면 밑에 저번에 적혔던 기록들이 뜬다.)"
  >
  <!--밑에 내용(정보 제출을 위한 태그)들은 모두 이 안에 적힘-->
  </form>

(2) input 태그

입력을 받는 요소 

  <input 
  id="name(id는 항상 페이지 마다 고유 해야함.)" 
  name="텍스트(입력 받은 값이 뭔지 설명 / 입력 값과 함께 제출됨)" 
  type="text(입력 받을 값의 타입 설정)">

(3) label 태그

인풋 요소마다 붙어 있는 라벨

**필요한 이유? 

for 속성값을 인풋 요소의 id랑 맞춰 연결 시킴. 이렇게 되면 label을 클릭할 경우 자동으로 연결된 input으로 가게 됨.

인풋의 클릭 영역을 확장 시킴

  <label for="name"> label의 이름 </label>
  
  <!--해당 레이블은 name이란 id를 가진 input과 연결된다. 따라서 'label의 이름'을 클릭 했을 때, 
  해당 인풋으로 가게 된다.-->

(4) button 태그

type 속성은 각 각 submit(목적지로 제출), reset(초기화) button(기본동작 없음)이다. 

button 속성일 경우 백엔드 작업으로 해당 버튼 클릭 했을 때 다른 동작 이어지게 만들어 주면 된다. 

  <button type="submit">제출</button>
  <button type="reset">초기화</button>
  <button type="button">버튼 </button>

2. 폼 태그 내의 입력요소 & 라벨들 그룹화 

(1) fieldset 태그

form 태그 내의 입력요소와 라벨들을 그룹짓는 태그 

<form>
  <fieldset>
    <legend>반장</legend>

    <label for="name">이름</label>
    <input id="name_1" name="name_1" type="text">
    <br><br>

    <label for="age">나이</label>
    <input id="age_1" name="age_1" type="number">

  </fieldset>

*필요한 이유? 

fieldset 내부 속성을 이용해 그룹 지은 태그들에 관하여 일괄적인 작업을 할 수 있다.

예시 disabled: 그룹 지은 태그들 전부 비활성화 

  <fieldset form="classForm" disabled>
    <legend>서기</legend>

    <label for="name">이름</label>
    <input id="name_3" name="name_3" type="text">
    <br><br>

    <label for="age">나이</label>
    <input id="age_3" name="age_3" type="number">
  </fieldset>

 

(2) legend 태그

field set의 제목 혹은 설명이 들어간다. 

3. 스스로 해보기 

이름
나이

신상정보

이름
나이

반장 신상 정보

반장 이름 반장 나이