HTML - form, input 요소

<form> 요소는 사용자의 입력 데이터를 서버에 전송하기 위한 컨테이너 역할을 한다. 자식요소로 <fieldset> <legend>를 갖는다. 
<input>과 <button> 요소를 내부에 포함해서 사용자 입력값을 서버에 전송할 수 있다.

 

<fieldset>은 관련된 입력 필드를 그룹화하는 데 사용된다. 그룹화된 필드 셋은 브라우저에서 하나의 박스 형태로 보기게 된다. 폼의 가독성을 높이고 사용자 입력값과 관련된 필드를 구조화하기 위해 사용한다. 

<legend>는 <fieldset> 안에서 그룹의 제목을 정의하는 데 사용한다.

 

<fomr>
      <fieldset>
        <legend>폼 제목</legend>
        <div>
          <label for="userId">아이디</label>
          <input type="text" id="userId" />
        </div>
        <div>
          <label for="userPw">비밀번호</label>
          <input type="password" id="userPw" />
        </div>
      </fieldset>
    </fomr>

<form> 요소의 주요 속성 

값	예시	설명
action	"https://formspree.io/f/xeqwwbwk"	데이터를 보낼 URL
method	"POST" , "GET"	데이터 전송 방식
enctype	"application/x-www-form-urlencoded"	데이터 인코딩 방식
target	"_blank" , "_self"	응답데이터를 보여주는 방식

---

<input> 요소는 사용자의 입력값을 받기위해 사용되는 요소이며 <label> 요소와 쌍을 이루어 사용된다.

입력 유형을 정의하는 다양한 type에 따라 그 쓰임새가 다르다.

값	설명
text	일반 텍스트 입력 필드
password	비밀번호 입력 필드
search	검색 용도 입력 필드
emaill	이메일 주소 입력 필드
url	웹 주소 입력 필드
tel	전화번호 입력 필드
number	숫자 입력 필드
range	슬라이더 형태의 숫자 범위 입력
date	날짜를 선택할 수 있는 캘린더 UI 제공
time	시간 입력 필드
datetime-local	날짜와 시간을 함께 입력 받는 필드
file	파일을 업로드 하는 필드
checkbox	다중 선택 가능한 체크박스
radio	단일 선택 가능한 체크박스
color	색상을 선택할 수 있는 컬러 피커 제공
hidden	화면에 표시되지않는 숨겨진 입력 필드
submit	<form>요소에 정의된 action속성의 URL로 입력정보를 전송

 

<input>요소의 주요 속성 

값	설명
name	입력 필드의 이름, 서버 전송시 해당 필드값의 키가 된다.
id	고유 식별자, <label>과 연결해서 사용
value	입력 필드의 값
placeholder	입력 필드에 표시되는 힌트
required	필수 입력 필드로 설정
readonly	읽기 전용
disabled	비활성화
min / max	입력 가능한 최소값 / 최대갑 설정
minlength / maxlength	입력 가능한 최소 / 최대 문자수 제한
pattern	정규식 패턴 사용
autocomplete	브라우저의 자동완성 기능을 켠다.
autofocus	페이지 로드시 자동으로 포커스를 설ㅇ정
step	입력 값의 증가 단위 설정
accept	파일 업로드시 허용되는 파일 형식 지정

---

<input> 요소는 HTML 에서 가장 많이 사용되는 요소중 하나이며 다양한 type과 속성에 따라 응용할 수있는 경우의 수가 무궁무진하다. 

<form action="/" method="post">
      <fieldset>
        <legend>폼 서식</legend>
        <div>
          <label for="name">이름</label>
          <!-- required는 필수입력속성 aria-required는 굳이 쓰지 않아도됨 
					 aria-required는 웹접근성을 위한 속성으로 스크린리더가 읽을때 필수입력이라고 알려줌 
					 required만 적어도 스크린 리더가 읽어줌 aria-required는 커스텀 input을 만들었을때 사용-->
          <input type="text" id="name" required aria-required="true" />
        </div>
        <div>
          <label for="pw">패스워드</label>
          <!-- placeholder는 입력창에 미리 표시할 텍스트를 지정해주는 속성 -->
          <input type="password" id="pw" required placeholder="비번입력" />
        </div>
        <div>
          <label for="email">이메일</label>
          <input type="email" id="email" />
        </div>
        <div>
          <label for="search">검색</label>
          <!-- search는 html5에 추가된 속성 -->
          <input type="search" id="search" />
        </div>
        <div>
          <label for="classHtml">HTML</label>
          <input type="checkbox" id="classHtml" value="HTML" />
          <label for="classJS">JS</label>
          <input type="checkbox" id="classJS" value="JS" />
          <label for="classCSS">CSS</label>
          <input type="checkbox" id="classCSS" value="CSS" />
        </div>
        <!-- name으로 radio그룹을 묶어주게 되면 중복 체크를 막을 수 있음  -->
        <div>
          <input type="radio" name="clsaaRoom" id="classLikelion1" />
          <label for="classLikelion1">회고1팀</label>
          <input type="radio" name="clsaaRoom" id="classLikelion2" />
          <label for="classLikelion2">회고2팀</label>
          <input type="radio" name="clsaaRoom" id="classLikelion3" />
          <label for="classLikelion3">회고3팀</label>
        </div>
        <div>
          <input type="submit" value="전송" />
        </div>
      </fieldset>
    </form>