Form 태그

Form

: 사용자의 정보를 입력받을 수 있게 만들어 놓은 형식

 

HTML Form

: HTML에서 Form은 웹에서 사용자의 정보를 입력받기 위해서 사용한다. 예를들어 로그인, 회원가입, 게시판 글쓰기 등에서 사용자의 데이터를 입력받는다. 이때 입력받은 데이터들의 묶음을 폼(Form), 그리고 데이터를 폼 데이터 (Form Data) 또는 필드 (Field) 라고 한다. 

 

<form> 요소는 정보를 제출하기 위하여 어디서부터 어디까지가 양식인 지정하는 역할을 한다.

<form action="/signup" method="post">
      <div class="form-example">
        <label for="name">이름 :</label>
        <input type="text" name="name" id="name" required />
      </div>
      <div class="form-example">
        <label for="email">이메일 :</label>
        <input type="email" name="email" id="email" required />
      </div>
      <div class="form-example">
        <input type="submit" value="제출하기" />
      </div>
    </form>

 

속성 - 서버측에 값을 보낼 때 사용한다.

• action : 양식데이터를 처리할 서버 프로그램 URL
• method : 양식을 제출할 때 사용하는 HTTP 메서드
  •  post : 양식 데이터 요청 본문으로 전송한다. (대부분 post mehod 사용)
  •  get : 양식 데이터를 URL의 쿼리스티링으로 붙여서 전송합니다.

 

Input 태그

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

 

text

: <input> 태그의 기본값으로 한 줄의 텍스트를 입력 받는다.

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

HTML5에서는 text 필드가 데이터 용도에 맞게 사용될 수 있도록 다양한 type이 추가되었다.

• email : email 데이터를 받기위해 사용된다. (이메일 유효성 검증ㄸ)
• tel :  전화번호를 받기위해 사용. (모바일 접근시 키패드가 다름)
• 더 많은 type : MDN 사이트

MDN Web Docs

 

label 태그

<label> 태그는 입력받는 필드를 설명할 때 사용한다. (웹 접근성 준수)

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

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


<!-- for와 id 속성을 label 태그와 연결짓는 방법 -->
<label for="name">이름 : </label>
<input type="text" id="name">

 

fieldset

: 양식의 여러 컨트롤과 레이블 <label>을 묶을 때 사용한다.

legend

:  요소는 <fieldset> 콘텐츠의 설명을 나타낸다.

<form action="">
      <fieldset>
        <legend>Input Tag</legend>
        <ul>
          <li>
            <label for="email">이메일</label>
            <input type="email" id="email" />
          </li>
          <li>
            <label for="tel">전화번호</label>
            <input type="tel" id="tel" required />
          </li>
          <li>
            <label for="url">url</label>
            <input type="url" id="url" required />
          </li>
        </ul>
      </fieldset>
      <input type="submit" value="제출하기" />
    </form>

 

 

---

Form 데이터 태그 속성

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

---

 checkbox

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

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

 

radio

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

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

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

 

---

Textarea

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

    <textarea name="story" id="story" cols="30" rows="5">
      It was a dark  and stormy night
    </textarea>

 

속성

• rows : 화면에 표시되는 행의 수
• cols : 화면에 표시되는 열(column) 수

 

---

Select

<select> 태그는 옵션 메뉴를 제공한다. <option> 태그로 각 항목을 타나내고, <select> 태그는 <option> 태그를 감싼다.

    <select name="goods" id="goods">
      <option value="10kg">사과 10kg</option>
      <option value="20kg" selected>사과 20kg</option>
      <option value="30kg">사과 30kg</option>
      <option value="40kg">사과 40kg</option>
      <option value="50kg">사과 50kg</option>
    </select>

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

 

속성

• selected 속성은 <select> 요소에서 선택된 항목 <option> 을 가리킨다.

 

datalist

• 다른 컨트롤에서 고를 수 있는 가능한, 혹은 추천하는 선택지를 나타내는 <option> 요소 여러 개를 담는다.
• <input> 태그와 함께 쓰여 검색도 할 수 있다.
• <input> 태그의 list 와 <datalist> 태그의 id를 일치시켜야 한다.

    <label for="ice-cream-choice">맛을 선택하세요</label>
    <input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice">
    <datalist id="ice-cream-flavors">
      <option value="Chocolate"></option>
      <option value="Coconut"></option>
      <option value="Mint"></option>
      <option value="Strawberry"></option>
      <option value="Vanilla"></option>
    </datalist>

 

---

 

Button

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

<button type="button">추가하기</button>

type

: 버튼의 행동 방식을 선언한다.

• submit : 버튼이 서버로 양식 데이터를 제출한다. (기본값)
• reset : <input type="reset"> 처럼, 모든 입력 필드를 초기값으로 되돌린다.
• button : 기본 행동이 없으며 주로 클릭한 후 자바스크립트 측 코드를 명령할 때 사용한다.