[FE기초] Form 태그

[FE기초] Form 태그

예비군 훈련으로 며칠만에 포스팅을 하게되었다.

프론트엔드 기초 강의 HTML 시리즈의 마지막이 다와간다.

회원가입 또는 로그인 화면에서 아주 많이 사용된느 Form 태그에 대해서 알아보겠다.

[FE기초]HTML 시맨틱 태그

 

 

1. Form 태그

Form은 웹에서 사용자의 정보를 입력받기 위해서 사용된다.

로그인, 게시판, 회원 가입 등 이런 상황에서 폼을 이용해서 데이터를 입력받는다.

 

모질라에서는 <form> 태그를 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타냅니다 라고 되어있다

 

◼ 태그 속성

• action : 양식 데이터를 처리할 서버의 URI
• method : 양식을 제출할때 사용하는 HTTP 메서드
  • post : 양식 데이터를 요청 본문으로 전송
  • 양식 데이터를 URL의 쿼리스트링으로 붙여서 전송

◼ Form 데이터 태그 속성

• required : 입력값이 필수라는 것을 명시
• readonly : 필드를 읽기 전용으로 필드로 만들 수 있다.
• disabled : 비활성화 시킬 수 있으며 해당 필드는 서버로 전송 X
• autofocus : 초기에 해당 필드에 커서를 위치 시킬 수 있습니다.
• placeholder : 입력 필드가 비어있을 때 해당 입력값의 설명 또는 가이드 문구를 삽입할 수 있음

◼ label 태그

레이블 태그는 입력받는 필드를 설명할때 사용

입력 방법은 label태그의 하위에 input 태그를 위치시키는 방법

id 와 for 속성을 이용하여 input 태그와의 연결 두가지 방법이 사용된다.

 

◼ fieldset & legend

fieldset : 양식의 여러 컨트롤과 레이블을 묶을 때 사용 된다.

legend : 요소는 부모 fieldset 콘텐츠의 설명을 나타낸다.

 <fieldset>
        <legend>개인정보</legend>
        <input type="text" />
        <input type="text" />
      </fieldset>

2. Input 태그

input 태그는 요소로 데이터를 입력받을 수 있다.

type 속성을 통하여 다양한 방법으로 데이터르 입력 받기 가능

 

◼ 입력 type 속성

input 태그의 기본값은 text 로 사용, 한줄의 텍스트를 입력

HTML5 에서 text 필드가 데이터 용도에 맞게 다양한 타입 추가

• email : email 데이터를 받기 위해서 사용 (이메일 유효성 검증)
• tel : 전화번호를 위해서 사용
• password : 입력 텍스트 표시 X
• url : url 입력 형식
• number : 숫자를 높이거나 줄이는 입력 형식 (min/max 지정 가능)
• range : 범위를 선택하는 입력 형식
• date : 날짜 선택 형식
• month : 날짜를 월까지만 선택
• week : 날짜를 선택시 몇주차인지 선택
• time : 시간으로 입력
• file : 파일 선택 후 업로드 (멀티 선택가능)

◼ checkbox

여러개의 체크박스 항목 중 2개 이상 선택 가능

체크박스 선택시 체크박스의 value 값이 서버로 전달

<ul>
  <li>
    <label for="red">빨강</label>
    <input type="checkbox" name="red" id="red" />
  </li>
  <li>
    <label for="orange">주화</label>
    <input type="checkbox" name="orange" id="orange" />
  </li>
  <li>
    <label for="green">초록</label>
    <input type="checkbox" name="green" id="green" />
  </li>
  <li>
    <label for="blue">파랑</label>
    <input type="checkbox" name="blue" id="blue" />
  </li>
</ul>

 

◼ radio

여러개의 라디오 항목중 1개를 선택

그리고 라디오 항목 선택시 value가 서버로 전달

여러개의 input 중 하나만 선택하게 하려면  name 속성을 동일하게 해주면 동일한 name 속성에서 선택된 radio만 서버로 전달 

<ul>
  <li>
    <label for="free">무료배송</label>
    <input type="radio" name="delivery" id="free" />
  </li>
  <li>
    <label for="pay">무료배송</label>
    <input type="radio" name="delivery" id="pay" />
  </li>
</ul>

◼ select

여러 아이템중 하나를  선택하는 방식

흔히아는 콤보박스 형태를 생각하면 된다.

 <li>
    <select name="items" id="items">
      <option value="apple_10kg">사과 10kg</option>
      <option value="apple_15kg">사과 15kg</option>
      <option value="apple_20kg">사과 20kg</option>
      <option value="apple_25kg">사과 25kg</option>
    </select>
  </li>

 

◼ datalist

여러 아이템중 하나를 선택하는 것은 동일하지만 select 과 다르게 text를 input과 datalist가 모두 있어 입력으로 검색이 가능하다.

<label for="icecream-choice">맛을 선택</label>
    <input
      list="icecream-choice-flavors"
      name="icecream-choice"
      id="icecream-choice"
    />
    <datalist id="icecream-choice-flavors">
      <option value="choco"></option>
      <option value="mint"></option>
      <option value="vanilla"></option>
      <option value="milk"></option>
      <option value="coconut"></option>
    </datalist>
  </li>

 

3. Button 태그

Button 태그는 클릭이 가능한 버튼을 의미한다.

중요한 것은 type 즉 버튼의 동작에 있다.

type에 3개의 옵션이 존재한다.

• submit : 버튼이 서버로 양식 데이터를 전달한다. 디폴트값이며, 유효하지 않은 값일때도 사용
• reset : 입력된 모든 값들을 초기화 시킨다.
• button : 기본 행동이 없으면 클릭시 아무 것도 하지 않음, 자바스크립트와 연결 할 수 있음(클라이언트 스크립트)