html-7: 사용자에게 정보 입력받기-1

사용자에게 정보 입력받기 -1

태그	설명	비고
<form>	정보를 제출하기 위한 태그들을 포함	autocomplete 속성: 자동완성 여부 (기본: on)
<input>	입력을 받는 요소	type 속성을 통해 다양화
<label>	인풋 요소마다의 라벨	for 속성값을 인풋 요소의 id와 연결. 인풋의 클릭 영역 확장
<button>	버튼	type 속성에 submit(제출), reset(초기화), button(기본 동작 없음)

---

___

정보입력받기 태그

<form>
  <label for="name">이름</label>
  <input id="name" name="my-name" type="text">
  <br><br>
  <label for="age">나이</label>
  <input id="age" name="my-age" type="number">
  <br><br>
  <button type="submit">제출</button>
  <button type="reset">초기화</button>
</form>

* 참고: id속성은 고유한 값을 가짐

---

___

폼 안의 요소들 그룹으로 묶기

태그	설명	비고
<fieldset>	폼 태그 내 입력요소와 라벨들을 그룹화	disabled 속성: 포함된 입력요소 비활성화
<legend>	필드셋 요소의 제목 또는 설명

  <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>
    <br>
    <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>
  </form>