8. Form 태그

HTML에서 Form은 웹에서 데이터를 입력받기 위해 사용합니다.

예를들면 로그인, 회원가입, 글쓰기 등 사용자의 데이터를 입력받아 서버에 전송할 때 폼 안에 데이터를 담아서 보내는 형식 이라고 보시면 됩니다.

 

 

폼 태그

<form> 요소는 제출하는 정보를 어디서부터 어디까지인지 지정하는 역할을 합니다.

<form action="/signup" method="post">
  <div>
    <label for="id">아이디: </label>
    <input type="text" name="id" id="id">
  </div>
  <div>
    <label for="password">비밀번호: </label>
    <input type="password" name="password" id="password">
  </div>
  <div>
    <input type="submit" value="제출하기">
  </div>
</form>

 

속성

• action - 양식 데이터를 처리할 서버 프로그램의 URI입니다
• method - 양식을 제출할 때 사용할 HTTP 메서드입니다. post 방식과 get 방식이 있습니다.

 

 

Input 태그

<input> 요소로 데이터를 입력 받을 수 있습니다. type 속성을 통하여 다양한 방법으로 데이터를 받을 수 있습니다.

<input type="text" id="name">

 

type 속성

• text - 일반적인 텍스트를 받기위해 사용됩니다.
• password - 비밀번호를 받기위해 사용됩니다.
• email - email 데이터를 받기위해 사용됩니다. (이메일 유효성 검증)
• tel - 전화번호를 받기위해 사용됩니다. (모바일 접근시 키패드가 다름)
• number - 숫자를 입력받기 위해 사용됩니다. (min, max, value 속성 - 최소값, 최대값, 초기값)
• range - 슬라이드 막대로 입력 받기위해 사용됩니다. (min, max, value 속성 - 최소값, 최대값, 초기값)
• hidden - 눈에 보이지는 않지만 서버로 값을 전송하려고 할 때 사용합니다.
• file - 파일을 선택할 수 있는 필드입니다. accept 속성을 사용하면 허용하는 파일 유형을 지정할 수 있습니다.
• image - 버튼으로 사용되는 이미지라고 보시면 됩니다.
• 외에 더 많은 type이 존재합니다.

 

label

<label> 레이블 태그는 입력받는 필드를 설명하고 웹접근성 준수를 위하여 사용합니다.

사용 방법은 <label> 태그 하위에 <input> 태그를 위치시킬 수 있고 id 와 for 속성을 사용하여 <input> 태그와 연결지을 수 있습니다.

<!-- label 태그 하위에 놓는 연결 -->
<label>
  이름 : 
  <input type="text" id="name">
</label>

<!-- for와 id속성을 사용하여 연결 -->
<label for="name">이름 : </label>
<input type="text" id="name">

 

 

checkbox

여러개의 체크박스 항목 중 2개 이상 선택할 수 있습니다. 그리고 체크박스 선택시 선택된 체크박스의 value 값이 서버로 전송됩니다.

<ul>
  <li>
    <label for="apple">사과</label>
    <input id="apple" type="checkbox" value="apple">
  </li>
  <li>
    <label for="orange">오렌지</label>
    <input id="orange" type="checkbox" value="orange">
  </li>
  <li>
    <label for="banana">바나나</label>
    <input id="banana" type="checkbox" value="banana">
  </li>
</ul>

 

 

radio

여러개의 라디오 항목 중 1개를 선택할 수 있습니다. 그리고 라디오 항목 선택시 선택된 항목의 value 값이 서버로 전송됩니다.

여러개 중 하나를 선택하게 하려면 그 여러 항목의 <radio name=""> name 속성 값을 같은 값으로 그룹핑 해줘야 합니다.

<ul>
  <li>
    <label for="strawberry">딸기</label>
    <input id="strawberry" name="fruit" type="radio" value="strawberry">
  </li>
  <li>
    <label for="grape">포도</label>
    <input id="grape" name="fruit" type="radio" value="grape">
  </li>
  <li>
    <label for="peach">복숭아</label>
    <input id="peach" name="fruit" type="radio" value="peach">
  </li>
</ul>

 

 

Textarea

<textarea>는 여러줄의 데이터를 입력받을 수 있습니다.

<textarea id="story" name="story" rows="5" cols="33">
  hello
  world!
</textarea>

 

속성

• rows - 화면에 표시되는 행수를 지정합니다.
• cols - 화면에 표시되는 컬럼 수를 지정합니다.

 

 

Select

<select> 태그는 옵션 메뉴를 제공합니다. <option> 태그로 각 항목을 나타내며 <select>태그는 <option>태그를 감싸줍니다.

<option>  안에 있는 내용은 사용자 화면에 보여주는 내용이며 실제 서버로 전송되는 값은 value값 입니다.

<select name="fruit" id="fruit">
  <option value="A">사과</option>
  <option value="B" selected>오렌지</option>
  <option value="C">바나나</option>
  <option value="D">포도</option>
  <option value="E">딸기</option>
</select>

 

 

Button

<button> 요소는 클릭 가능한 버튼을 나타냅니다. <form> 내부는 물론이고 버튼기능이 필요한 곳 이라면 어디에나 배치할 수 있습니다.

<button type="button">
  버튼
</button>

 

type 속성

• submit - 버튼이 서버로 양식 데이터를 제출합니다. (기본값)
• reset - 모든 입력 필드를 초기값으로 되돌립니다.
• button - 기본 행동이 없으며 주로 자바스크립트 측 코드를 명령할 때 사용합니다.

 

 

Form 데이터 태그 속성

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

 

 

---

실습

<h1>회원가입</h1>
<form action="" method="">
  <div>
    <label for="id">아이디</label>
    <input type="text" id="id">
  </div>
  <div>
    <label for="password">비밀번호</label>
    <input type="password" id="password">
  </div>
  <div>
    <span>통신사</span>
    <select name="telecom" id="telecom">
      <option value="SKT">SKT</option>
      <option value="LGU">LGU+</option>
      <option value="KT">KT</option>
    </select>
    <label for="tel">휴대폰번호</label>
    <input type="tel" id="tel">
  </div>
  <div>
    <label for="email">이메일</label>
    <input type="email" id="email">
  </div>
  <div>
    <label for="sns">SNS 수신동의</label>
    <input type="checkbox" id="sns" value="Y">
    <label for="message">문자 수신동의</label>
    <input type="checkbox" id="message" value="Y">
  </div>
  <div>
    <label for="male">남자</label>
    <input type="radio" id="male" name="gender" value="M">
    <label for="female">여자</label>
    <input type="radio" id="female" name="gender" value="F">
  </div>
  <div>
    <input type="file">
  </div>
  <div>
    <div>가입경로</div>
    <textarea id="route" name="route" cols="30" rows="5"></textarea>
  </div>
  <div>
    <br>
    <input type="submit" value="제출하기">
    <input type="reset" value="초기화">
    <input type="button" value="버튼">
  </div>

  <input type="hidden" name="time" value="time">
</form>