[HTML] Form 다루기

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

예를들면 로그인, 회원가입, 게시판 글쓰기 등 우리는 사용자의 데이터를 입력받아 이러한 데이터를 입력 받는다.

이때 입력받는 데이터들의 묶을 폼(Form)그리고 데이터를 폼 데이터(Form Data) 또는 필드(Field) 라고 한다.

즉, 폼(Form)은 사용자의 정보를 입력받을 수 있게 만들어 놓은 형식 이라고 보면 된다.

 

폼 태그

<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 - 양식 데이터를 처리할 서버 프로그램의 URI
• method - 양식을 제출할 때 사용할 HTTP 메서드
  • post - 양식 데이터를 요청 본문으로 전송한다.
  • get - 양식 데이터를 URL의 쿼리스트링으로 붙여서 전송한다.

---

Input 태그

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

 

text

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

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

 

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

• text - 일반적인 텍스트를 받기위해 사용됩니다.
• password - 비밀번호를 받기위해 사용됩니다.
• email - email 데이터를 받기위해 사용됩니다. (이메일 유효성 검증)
• tel - 전화번호를 받기위해 사용됩니다. (모바일 접근시 키패드가 다름)

 

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">

 

 

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>

 

 

number

<input type="number"> 속성은 숫자를 입력하기 위한 필드이다.

• min: 속성으로 최소값을 지정
• max: 속성으로 최대값을 지정
• value: 속성은 이 요소의 현재 값 이며, 초기에 value 값이 화면에 표시됨

<input type="range" min="0" max="10" value="0">f

 

 

hidden

눈에 보이지는 않지만 서버로 값을 전송하려고 할 때 사용하는 요소.

예) 가입시간, 가입경로 등

<input type="hidden" name="source" value="google">

 

 

file

파일을 선택할 수 있는 필드이다.

accept 속성을 사용하면 허용하는 파일 유형을 지정할 수 있다.

<input type="file">

 

 

image

제출 버튼으로 사용할 이미지 버튼이다.

<input type="image" src="버튼으로 사용할 이미지 경로">

 

 

button

버튼모양의 위젯을 생성한다.

<input type="button">클릭</button>

 

---

Form 데이터 태그 속성

required

• 입력값이 필수라는 것을 명시할 수 있다.

readonly

• 필드를 읽기전용으로 필드로 만들 수 있다.(서버로 전송 O)

disabled

• 비활성화 시킬 수 있으며 해당 필드는 서버로 전송되지 않는다.

autofocus

• 초기에 해당 필드에 커서를 위치 시킬 수 있다.

placeholder

• 입력 필드가 비어있을 때 해당 입력값의 설명 또는 가이드 문구를 삽입할 수 있다.

---

fieldset

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

 

legend

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

---

Textarea

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

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

 

속성

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

---

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> 요소 여럿을 담는다.

<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 value="Coconut">
  <option value="Mint">
  <option value="Strawberry">
  <option value="Vanilla">
</datalist>

---

Button

<button> 요소는 클릭 가능한 버튼을 나타낸다.

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

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

 

type

버튼의 행동 방식을 선언합니다.

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

---

예시 코드

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

  </head>

  <body>

    <form action="">

      <fieldset>

        <legend>Input Tag</legend>

        <ul>

          <li>

            <label for="text">Text</label>

            <input type="text" id="text" value="수정 안됨" readonly />

          </li>

          <li>

            <label for="password">Password</label>

            <input type="password" id="password" disabled />

          </li>

          <li>

            <label for="email">이메일 :</label>

            <input type="email" id="email" required />

          </li>

          <li>

            <label for="tel">전화번호</label>

            <input type="tel" id="tel" autofocus />

          </li>

          <li>

            <label for="url">URL</label>

            <input type="url" id="url" placeholder="URL을 입력해주세요!" />

          </li>

          <li>

            <label for="number">Number</label>

            <input type="number" id="number" min="5" max="10" />

          </li>

          <li>

            <label for="range">Range</label>

            <input type="range" id="range" />

          </li>

        </ul>

      </fieldset>

      <fieldset>

        <legend>날짜 관련</legend>

        <ul>

          <li>

            <label for="date">Date</label>

            <input type="date" id="date" min="2024-07-10" max="2024-09-10" />

          </li>

          <li>

            <label for="month">Month</label>

            <input type="month" id="month" />

          </li>

          <li>

            <label for="week">Week</label>

            <input type="week" id="week" />

          </li>

          <li>

            <label for="time-name">Time</label>

            <input type="time" id="time-name" min="16:00" max="18:00" />

          </li>

        </ul>

      </fieldset>

      <fieldset>

        <legend>그 외</legend>

        <ul>

          <li>

            <input type="file" multiple />

          </li>

          <li>

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

          </li>

        </ul>

      </fieldset>

      <input type="submit" value="제출하기" />

    </form>

  </body>

</html>

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>RadioCheckbox</title>

  </head>

  <body>

    <form action="">

      <fieldset>

        <legend>좋아하는 색상을 모두 선택해주세요</legend>

        <ul>

          <li>

            <label for="red">빨강</label>

            <input type="checkbox" id="red" value="red" />

          </li>

          <li>

            <label for="orange">주황</label>

            <input type="checkbox" id="orange" value="orange" />

          </li>

          <li>

            <label for="yellow">노랑</label>

            <input type="checkbox" id="yellow" value="yellow" />

          </li>

          <li>

            <label for="green">초록</label>

            <input type="checkbox" id="green" value="green" />

          </li>

          <li>

            <label for="파랑">파랑</label>

            <input type="checkbox" id="blue" value="blue" />

          </li>

        </ul>

      </fieldset>

      <fieldset>

        <legend>배송 방법</legend>

        <ul>

          <li>

            <label for="free">무료</label>

            <input type="radio" name="delivery" id="free" value="free" />

          </li>

          <li>

            <label for="pay">유료</label>

            <input type="radio" name="delivery" id="pay" value="pay" />

          </li>

        </ul>

      </fieldset>

      <fieldset>

        <legend>자기 소개서</legend>

        <textarea name="" id="" cols="30" rows="10">

자신을 소개해주세요.

        </textarea>

      </fieldset>

      <fieldset>

        <legend>주문 상품을 선택해주세요.</legend>

        <ul>

          <li>

            <select name="goods" id="goods">

              <option value="apple_10kg">사과 10kg</option>

              <option value="apple_20kg">사과 20kg</option>

              <option value="apple_30kg" selected>사과 30kg</option>

              <option value="apple_40kg">사과 40kg</option>

            </select>

          </li>

        </ul>

        <li>

          <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>

        </li>

      </fieldset>

      <button type="submit">제출하기</button>

      <button type="reset">리셋하기</button>

      <button type="button" onclick="alert('Hello world~!')">버튼</button>

    </form>

  </body>

</html>

---

본 내용은 유튜버 짐코딩님의 웹 개발 강의를 정리한 것 입니다. 하단 링크 참고해주세요!