[HTML] 폼(form) 태그 다루기

폼 (form) 이란?

: HTML에서 사용자와 상호작용해서 정보를 입력받고 서버로 전송하기 위한 양식.

 

form 태그 : 폼 양식을 의미하는 태그 -> 폼을 구성하는 태그는 모두 form 태그 안에 작성. 

<form action="서버 url" method="get 또는 post"></form>

action 속성 : 폼 요소에서 사용자와 상호작용으로 입력받은 값들을 전송할 서버의 URL 주소를 작성. 

method 속성 : 입력받은 값을 서버에 전송할 때 송신방식을 작성

 

 

input 태그 : 입력받는 요소를 생성할 때 사용

속성 : type(필수) , name(선택), value(선택)

<input type="종류" name ="이름" value="초깃값">

type 속성 : 입력된 값에 따라 상호작용 요소의 종류 결정. 

속성값	설명
text	한 줄 텍스
password
tel
number	숫자만 입력할 수 있는 요소를 생성한다.
url
search	검색용 텍스트를 입력할 수 있는 요소를 생성한다.
email
checkbox
radio
file	파일 업로드 요소를 생성.
button
image	이미지로 버튼 요소를 생성한다. 따라서 img태그처럼 src 속성 사용해야. alt는 사용하지 않음
hidden
date
datetime-local
month
week
time
range	숫자 범위를 선택할 수 있는 슬라이드 요소를 생성
color
submit
reset

<form action="#">
  <input type="text">
  <input type="password">
  <input type="tel">
  <input type="number">
  <input type="url">
  <input type="search">
  <input type="email">
  <input type="checkbox">
  <input type="radio">
  <input type="file">
  <input type="button">
  <input type="image" src="facebook.png" alt="페이스북 버튼">
  <input type="hidden">
  <input type="date">
  <input type="datetime-local">
  <input type="month">
  <input type="week">
  <input type="time">
  <input type="range">
  <input type="color">
  <input type="submit">
  <input type="reset">
</form>

name 속성 : 입력요소의 이름을 작성.

                   : form 태그에 의해 서버로 전송될 때, name 속성에 적힌 값이 이름으로 지정된다. 

                   : 서버에서는 지정된 이름으로 입력요소를 식별할 수 있다. 

 

value 속성 : 입력 요소의 초깃값을 작성. 

 

label 태그 : form 태그 안에서 사용하는 상호작용 요소에 이름을 붙일 때 사용 

                  - label 태그를 잘만 사용하면, label 태그만 클릭해도 상호작용 요소 선택 가능!

       

암묵적인 방법 

<label>
      아이디
      <input type="text">
</label>

 

명시적인 방법

label의 for 속성과 상호작용의 id 속성을 같은 값으로 설정해야 함!  

 

label의 for 속성??

<label for="userpw">비밀번호</label>
<input type="password" id="userpw">

 

(예외적으로) 암묵적 + 명시적 함께 사용가능

<label for="username">
      <input type="text" id="username"> 이름
</label>

 

fieldset 태그 : form 태그 안에 사용된 다양한 상호작용 요소도 fieldset 태그를 사용해 그룹 지을 수 있다. 

                   => 그룹별로 박스 모양의 테두리가 생긴다. 그룹지은 요소들은 legend 태그로 이름을 붙일 수 있다. 

legend 태그 : 그룹 지은 요소들에 이름을 설정해주는 태그                   

 

<form action="#">
  <fieldset>
    <legend>기본 정보</legend>       <!-- 이 legend값이 그룹의 이름!! -->
    <p>
      <label for="userid">아이디</label>
      <input type="text" id="userid">
    </p>
    <p>
      <label for="passwd">비밀번호</label>
      <input type="password" id="passwd">
    </p>
  </fieldset>
  <fieldset>
    <legend>선택 정보</legend>
    <p>
      <label for="age">나이</label>
      <input type="number" id="age">
    </p>
    <p>
      <label for="recommender">추천인</label>
      <input type="text" id="recommender">
    </p>
  </fieldset>
</form>

 

textarea 태그 : 여러 줄의 입력요소를 생성할 때 사용. 대부분 웹에서 글을 작성히 입력요소는 input이 아닌 textarea사용

<textarea>초깃값</textarea>

textarea는 input 태그와 다르게 닫는 태그가 있음! 

 

<form action="#" method="post">
    <fieldset>
      <legend>블로그 글쓰기</legend>
      <p>
        <label for="title">제목
          <input type="text" id="title" name="title">
        </label>
      </p>
      <p>
        <label for="desc">내용
          <textarea id="desc" name="desc" readonly></textarea>
        </label>
      </p>
    </fieldset>
  </form>

textarea의 글 쓰는 공간도 조절가능!!

 

 

select 태그 : 콤보박스 생성가능.

option 태그 : 콤보박스에 항목 하나 추가시 사용

optgroup : 항목들을 그룹으로 묶고 싶을 때

 

<select>
	<optgroup label="그룹명_반드시 써줘야함">
    	<option value="서버에 전송할 값">웹 브라우저에 표시할 값</option>
        .... 여러가지 option 태그들....
    </optgroup>
</select>

option 태그는 서버에 전송할 값을 value 속성으로 지정가능 / value 속성 생략시 콘텐츠로 적인 텍스트가 값으로 전송됨.

 

optgroup 태그로 항목들을 그룹 지을 때 반드시 label 속성으로 그룹명을 지정해야 한다. 

=> 관련 있는 항목을 그룹 짓기 가능하고 아래와 같이 그룹으로 나뉘어져 콤보박스 생성이 가능하다.

  <form action="#" method="post">
    <fieldset>
      <legend>개인 정보 입력</legend>
        <label for="city">지역</label>
        <select name="city" id="city">
          <optgroup label="서울시">
            <option value="강북구">강북구</option>
            <option value="강남구">강남구</option>
            <option value="서초구">서초구</option>
          </optgroup>
          <optgroup label="경기도 성남시">
            <option value="중원구">중원구</option>
            <option value="분당구">분당구</option>
          </optgroup>
        </select>
        <input type="submit" value="등록">
    </fieldset>
  </form>

 

 

size 속성 : 콤보박스에서 화면에 노출되는 항목 개수를 지정하는 속성 

                : 속성값으로 숫자를 적으면 되고, 생략할 경우 기본으로 1개 항목이 표시

<select name="city" id="city" size="3">

 

multiple 속성 : 여러 항목을 동시에 선택할 수 있다. 항목 하나를 선택한 상태로 ctrl을 누르고 다른 항목 클릭하면 됨. 

<select name="city" id="city" size="3" multiple>

 

selected 속성 : 콤보박스의 기본 선택항목을 변경할 수 있는 태그 

<select name="city" id="city" size="1" multiple>
          <optgroup label="서울시">
            <option value="강북구">강북구</option>
            <option value="강남구">강남구</option>
            <option value="서초구" selected>서초구</option>
          </optgroup>
  </select>

++ 여러 개의 option 태그에 selected 속성을 사용하면, selected 속성이 마지막으로 사용된 option 태그가 기본값으로 선택되어 표시된다. ++

 

 

button 태그 : 버튼을 생성하는 태그 

                   : input 태그의 type으로 button을 사용해 만들기도 가능. 하지만, 별도의 태그도 가짐 

                   (input과 달리 종료태그를 가져, 콘텐츠 작성가능 / 이미지, 태그, 단순텍스트도 포함가능해 꾸미기 수월)

 

                   : 속성으로 type을 가지며, 아래와 같이 활용목적이 다르다. 

                         1) <button type="submit"> 폼을 서버에 전송목적 버튼 </button>

                         2) <button type="reset"> 상호작용 요소에 입력된 내용 초기화 목적 버튼 </button>

                         3) <button type="button"> 단순한 버튼 </button>

 

 

++ 폼 관련 태그에서 사용할 수 있는 추가속성 ++

 

1) disabled 속성 

for 상호작용 요소를 비활성화 ( -> 입력요소 입력X, 선택X, 클릭X) 

input, textarea, select, button 태그에 사용.

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

제목을 입력할 수 있는 input 상호작용 요소가 비활성화가 됨. 

서버에 값을 전송시 값이 아예 전송X

 

 

2) readonly 속성

- 상호작용 요소를 읽기 전용으로 변경 => 텍스트 입력은 못하지만, 요소 선택&드래그해서 내용 복사 가능  

- textarea, input 태그에서 사용가능 

- 하지만, input 태그에서 type 속성값이 text, search, url, tel, email, password, date, month, week, time, datetime-local, number 일때만 사용 가능. 

- 서버에 값을 전송할 때, 값이 전송된다. 

<textarea id="desc" name="desc" readonly>안녕하세요. 반가워요</textarea>

textarea에 안녕하세요. 반가워요라고 초기값을 설정해주고, 입력을 해보려하지만 안 됨. 하지만 드래그로 선택은 가능

 

 

3) maxlength 속성 

- 입력할 수 있는 글자 수를 제한하는 속성. (띄어쓰기 포함)

- 속성값으로 숫자를 입력.

- textarea 태그, input 태그의 type 속성값이 text, search, url, tel, email, password, date, month, week, time, datetime-local, number일때 사용가능

<input type="text" id="title" name="title" maxlength="4">

 

 

4) checked 속성 

요소를 선택된 상태로 표시. 

선택요소가 있어야하므로 -> input 태그의 type 속성값이 checkbox나 radio인 경우에만 사용할 수 있음. 

<form action="#">
    <fieldset>
      <legend>좋아하는 과일</legend>
      <input type="checkbox" id="banana" name="banana" value="banana">
      <label for="banana">banana</label><br>
      <input type="checkbox" id="apple" name="apple" value="apple">
      <label for="apple">apple</label><br>
      <input type="checkbox" id="orange" name="orange" value="orange"  checked>
      <label for="orange">orange</label><br>
    </fieldset>
  </form>

속성 checked를 쓰면 초기상태가 체크된 상태로 시작된다. 

 

 

5) placeholder 속성 

입력요소에 어떠한 값을 입력하면 되는지 힌트를 적는 용도로 사용함. 

<input placeholder="입력값에 대한 힌트">

<textarea id="desc" name="desc" placeholder="자기소개를 써주세요"></textarea>