Form 태그

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

ex) 로그인, 회원가입, 게시판 글쓰기 등

→ 폼: 입력받는 데이터들의 묶음 / 폼 데이터 또는 필드: 데이터

<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">이메일: <email>
		<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> 요소로 데이터를 입력 받을 수 있다.

text

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

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

email: email 데이터를 받기위해 사용됨 (이메일 유효성 검증)
tel: 전화번호를 받기 위해 사용됨 (모바일 접근시 키패드 다름)

label

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

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

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

fieldset

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

legend

요소는 부모 <fieldset>콘텐츠의 실명을 나타냄

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Form Input</title>
  </head>
  <body>
    <form action="">
      <fieldset>
        <legend>Input Tag</legend>
        <ul>
          <li>
            <label for="text">Text</label>
            <input type="text" id="text" required value="weoifj" readonly />
          </li>
          <li>
            <label for="email">이메일</label>
            <input type="email" id="email" required value="hello" disabled />
          </li>
          <li>
            <label for="tel">전화번호</label>
            <input type="tel" id="tel" required autofocus />
          </li>
          <li>
            <label for="url">url</label>
            <input
              type="url"
              id="url"
              required
              placeholder="url을 입력해주세요"
            />
          </li>
          <li>
            <label for="number">number</label>
            <input type="number" id="number" required min="5" max="10" />
          </li>
          <li>
            <label for="range">range</label>
            <input type="range" id="range" required />
          </li>
          <li>
            <label for="password">password</label>
            <input type="password" id="password" required />
          </li>
        </ul>
      </fieldset>
      <fieldset>
        <legend>날짜관련</legend>
        <ul>
          <li>
            <label for="date">date</label>
            <input type="date" id="date" min="2022-08-20" max="2022-08-30" />
          </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>
        </ul>
      </fieldset>
      <fieldset>
        <legend>시간관련</legend>
        <ul>
          <li>
            <label for="time">time</label>
            <input type="time" id="time" min="16:00" max="10: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>

Form 데이터 태그 속성

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

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" type="radio" name="fruit" value="strawberry">
	</li>
	<li>
		<label for="grape">포도</label>
		<input id="grape" type="radio" name="fruit" value="grape">
	</li>
	<li>
		<label for="peach">복숭아</label>
		<input id="peach" type="radio" name="fruit" value="peach">
	</li>
</ul>

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>

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 http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Radio & Checkbox</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="blue">파랑</label>
            <input type="checkbox" id="blue" value="blue" />
          </li>
          <li>
            <label for="green">초록</label>
            <input type="checkbox" id="green" value="green" />
          </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="5">저는 홍길동입니다.</textarea>
      </fieldset>
      <fieldset>
        <legend>주문 상품을 선택해주세요!</legend>
        <ul>
          <li>
            <select name="goods" id="goods" multiple>
              <option value="apple_10kg">사과 10kg</option>
              <option value="apple_20kg" selected>사과 20kg</option>
              <option value="apple_30kg">사과 30kg</option>
              <option value="apple_40kg">사과 40kg</option>
              <option value="apple_50kg">사과 50kg</option>
            </select>
          </li>
          <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>
        </ul>
      </fieldset>
      <button type="submit">제출하기</button>
      <button type="reset">리셋하기</button>
      <button type="button" onclick="alert('hello')">버튼</button>
    </form>
  </body>
</html>

'프론트엔드 > HTML' 카테고리의 다른 글

Head 태그 (0)	2022.11.18
이미지 & 멀티미디어 태그 (0)	2022.11.18
Block 레벨 요소와 Inline 레벨 요소 (0)	2022.11.18
Semantic태그 (0)	2022.11.18
Table태그 (0)	2022.11.18

꾸준히 계속하기

Form 태그

Form 태그

Form 태그

속성

Input 태그

Form 데이터 태그 속성

checkbox

radio

Textarea

Select

datalist

Button

'프론트엔드 > HTML' 카테고리의 다른 글

티스토리툴바

Form 태그

Form 태그

Form 태그

속성

Input 태그

Form 데이터 태그 속성

checkbox

radio

Textarea

Select

datalist

Button

'프론트엔드 > HTML' 카테고리의 다른 글

관련글

티스토리툴바