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' 카테고리의 다른 글

관련글

티스토리툴바