프론트엔드 학습 일지 - [7. 폼 관련 요소(1)]

이준호·2022년 11월 9일
0

[ 폼 관련 요소 ]

<form> : 유저에게 정보 입력 장치 마련, 정보 제출 위한 대화형 컨트롤 표현

    (속성)
  • Action : 양식 데이터 처리할 프로그램의 URI. 다른 페이지 혹은 서버의 주소를 넣음 해당 주소에 폼데이터를 보내주는 역할.
  • Method : 양식 제출 시 사용할 HTTP 메서드
    • post : 주소창에 입력결과 숨김.(비밀번호, 회원정보 등에 사용)
      서버에 정보를 주기 때문에 로컬 파일에는 정보를 줄 수 없어 페이지가 작동하지 않음.
    • get : 검색 용도(회원가입, 비밀번호 등 보안에 민감한 요소는 사용 X)

<Input> : 유저에게 정보를 입력받는 영역. (텍스트, 날짜, 시간 등 매우 다양.)

<button> : 버튼 생성.

사용 ex)
 <form action="" name="text" method="GET">
    <input type="text" name="test">
    <button type="submit">제출</button>
 </form>

위의 예제를 실행하면 텍스트 입력창 표시. 여기에 (내용)을 입력하고 '제출'버튼 클릭 시, action 속성 값이 없어 페이지 이동은 없지만 input의 name 태그로 인하여 주소창에 변화가 생깁니다.

주소창 : form.html?=test=(내용)

<Label> : 사용자 인터페이스 항목 설명

  • name : 서버 전송 시 폼데이터 구분 위해 사용.
  • id : 전체문서에서 해당 태그 구분 위한 구분자

-텍스트 입력 창 만들기-

  <form action="" name="text" method="GET">
    <div>
      <label for="foodname">음식 이름 :</label>
      <input type="text" name="food" id="foodname">
    </div>
    
    <div>
      <label>색깔 :
        <input type="text" name="color">
      </label>
    </div>
     
    <button type="submit">제출</button>
  </form>

참고로 label태그 안에 input태그를 중첩시키면
label이 바로 input을 가리키므로 id값을 지정할 필요가 없습니다.
단, 그룹핑 시 다른 항목도 동일한 형태로 통일시켜야 가독성이 좋아집니다.

<fieldset> : 여러 input과 label을 묶을 때. form 태그 안에 사용.
<legend> : 범례. 부모 <fieldset> 콘텐츠의 설명 표시.

<!-- <fieldset>, <legend> 이용 -->
<form action="" name="text" method="GET">

    <fieldset>
      <legend>범례1</legend>
      <div>
        <label for="foodname">음식 이름 :</label>
        <input type="text" name="food" id="foodname" disabled> <!-- 입력 불가 -->
      </div>
      
      <div>
        <label for="color">색깔 :</label>
        <input type="text" name="color">
      </div>
    </fieldset>
   
    <fieldset>
      <legend>범례2</legend>
      <div>
        <label for="foodname">음식 이름 :</label>
        <input type="text" name="food" id="foodname">
      </div>
      
      <div>
        <label for="color">색깔 :</label>
        <input type="text" name="color">
      </div>
    </fieldset>

    <button type="submit">제출</button>
  </form>

<input> 의 type속성

  • text : 텍스트 입력 창
  • password : 비밀번호. 입력한 내용이 가려짐. 단, form의 method 속성 값이 get일 경우 주소창에 비밀번호가 노출됨.
  • email : 이메일 입력. 이메일 형식에 맞아야지만 저장 가능.
  • tel : 전화번호 입력. 어떻게 작성하든 저장이 되나 모바일로 접속할 시 숫자키보드가 뜸.
  • number : 숫자만 입력
  • range : 범위 컨트롤 바 생성 (범위 값 : 1~100)
  • date : 날짜 입력 창 생성
  • month : 월 입력 창
  • time : 시간 입력 창
  • checkbox : 체크박스 생성. 체크박스 선택 후 같은 form 안의 제출버튼 누를 시, 주소창에 입력값이 저장.
    ( ex) input.html?check1=on )
  • radio : 라디오 버튼, 중복 선택을 방지하기 위해 각 radio의 name속성 값을 동일하게 할 것.
  • 버튼 형태
    • button : 버튼 생성, 아무 기능도 없음.
    • submit : 제출버튼, 누를 시 입력된 정보가 주소창에 저장 & 전송
    • reset : 초기화 버튼, 사용자가 입력한 정보가 모두 초기화

(속성)

  • value="(이름)" : 버튼에 적용 시 이름 부여. radio에 적용 시 각 radio의 값을 부여할 수 있음.
  • checked : 미리 체크 되어있도록 함.
<!-- 사용 예제 -->
<form action="" method="get">
    <div>
      <label>NUMBER :
        <input type="number" name="number">
      </label>
    </div>

    <div>
      <label>RANGE :
        <input type="range" name="range">
      </label>
    </div>
    
    <div>
      <label>DATE :
        <input type="date" name="date">
      </label>
    </div>
  
    <div>
      <label>MONTH :
        <input type="month" name="month">
      </label>
    </div>
    
    <div>
      <label>TIME :
        <input type="time" name="time">
      </label>
    </div>
    
    <div>
      <label>CHECKBOX :
        <input type="checkbox" name="check1">
        <input type="checkbox" name="check2">
        <input type="checkbox" name="check3">
        <input type="checkbox" name="check4">
      </label>
    </div>
    
    <div>
      <label>RADIO :
        <input type="radio" name="radiobuttons" value="r1">
        <input type="radio" name="radiobuttons" value="r2" checked>
        <input type="radio" name="radiobuttons" value="r3" checked>
        <input type="radio" name="radiobuttons" value="r4">
      </label>
    </div>
    
    <input type="submit" value="제출하기!!!">

    <input type="button" value="빈 버튼">

    <input type="reset" value="초기화">
    <br>

    <button type="submit">제출</button>
  </form>
profile
저의 개발일지를 담은 블로그입니다.

0개의 댓글