이 글은 코딩 자율학습 HTML+CSS+JS(저자 : 김기수)의 책 내용과 유튜브 영상을 개인적으로 정리하는 글입니다.


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

대표적으로 사용자로부터 아이디와 패스워드를 입력받아 처리할 때 폼을 이용한다.

form태그

form 태그는 폼 양식을 의미하는 태그이다.

그래서 HTML의 폼을 구성하는 태그는 모두 form태그 안에 작성한다.

<form action="데이터가 전송될 url" method="get 또는 post"></form>
  • action 속성 : action 속성에는 폼 요소에서 사용자와 상호작용으로 입력받은 값들을 전송할 서버의 URL주소를 적는다.
  • method 속성 : 입력받은 값을 서버에 전송할 때 송신 방식을 적는다. 속성값으로 get 또는 post를 사용할 수 있다.

 

input 태그

로그인 페이지의 아이디와 비밀번호처럼 입력받는 요소를 생성할 때는 input 태그를 사용해야 한다.

input 태그에는 type, name, value 속성이 있는데, type 속성은 필수로 사용해야 하고, name과 value 속성은 선택해서 사용할 수 있다.

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

 

type 속성

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

아래의 표는 input 태그로 생성할 수 있는 입력 요소이다.

입력 요소의 이름은 폼 요소의 성격에 따라 다를 수 있어서 type 속성값만 명시한다.

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

name 속성에는 입력 요소의 이름을 작성한다.

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

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

 

value 속성

value 속성에는 입력 요소의 초깃값을 작성한다.

입력 요소는 보통 사용자에게서 수동으로 값을 입력받지만, 상황에 따라 초깃값을 설정해야 하는 경우가 있다.

이럴 때사용하는 속성이다.

 

label 태그

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

label 태그를 잘 사용하면 label 태그만 클랙해도 상호작용 요소를 선택할 수 있다.

또한 스크린 리더기가 label 태그로 연결된 상호작용 요소를 쉽게 식별할 수 있어서 웹 접근성 향상을 위해서도 필수적이다.

label 태그는 사용하는 방법에 따라 암묵적인 방법과 명시적인 방법으로 구분한다.

  <form action="#">
    <!-- 암묵적인 방법 -->
    <label>
      아이디
      <input type="text">
    </label>
    <!-- 명시적인 방법 -->
    <label for="userpw">비밀번호</label>
    <input type="password" id="userpw">  
    <!-- 암묵적 + 명시적 방법-->
    <label for="username">
      <input type="text" id="username"> 이름
    </label>  
  </form>
  • 암묵적인 방법 : label 태그에 상호작용 요소를 포함하도록 설정
  • 명시적인 방법 : label 태그의 for 속성과 상호작용 요소의 id 속성을 같은 값으로 설정

 

fieldset와 legend 태그

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

fieldset 태그로 그룹을 지으면 그룹별로 박스 모양의 테두리가 생긴다.

이렇게 그룹 지은 요소들은 legend 태그로 이름을 붙일 수 있다.

<form action="#">
  <fieldset>
    <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 태그는 input 태그와 다르게 닫는 태그가 있다.

그래서 input 태그로 생성한 입력 요소의 초깃값은 value 속성으로 정의하지만, textarea 태그로 생성한 여러 줄의 입력 요소는 콘텐츠 영역에 초깃값을 정의한다.

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

 

select, option, optgroup 태그

select 태그를 사용하면 콤보박스를 생성할 수 있다.

콤보박스에 항목을 하나 추가할 때는 option 태그를 사용하고, 항목들을 그룹으로 묶고 싶다면 optgroup 태그를 사용한다.

option 태그는 서버에 전송할 값을 value 속성으로 지정할 수 있는데, 속성을 생략하면 option 태그의 콘텐츠로 적은 텍스트가 값으로 전송된다.

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

<!-- select & option & optgroup 태그 사용-->
  <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 속성

size 속성은 콤보박스에서 화면에 노출되는 항목 갯수를 지정하는 속성이다.

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

 <!-- select & option 태그만 사용 -->
  <form action="#" method="post">
    <fieldset>
      <legend>개인 정보 입력</legend>
        <label for="city">지역</label>
        <select name="city" id="city" size="3">
          <option value="강북구">강북구</option>
          <option value="강남구">강남구</option>
          <option value="서초구">서초구</option>
          <option value="중원구">중원구</option>
          <option value="분당구">분당구</option>
        </select>
        <input type="submit" value="등록">
    </fieldset>
  </form>

 

mutible 속성

select 태그로 생성하는 콤보박스는 기본으로 1개 항목만 선택할 수 있다.

그러나 multiple 속성을 사용하면 여러 항목을 동시에 선택할 수 있다.

콤보박스에서 항목 하나를 선택한 상태로 ctrl(맥OS는 cmd)를 누르고 다른 항목을 클릭하면 된다.

<!-- select & option 태그만 사용 -->
  <form action="#" method="post">
    <fieldset>
      <legend>개인 정보 입력</legend>
        <label for="city">지역</label>
        <select name="city" id="city" multiple>
          <option value="강북구">강북구</option>
          <option value="강남구">강남구</option>
          <option value="서초구">서초구</option>
          <option value="중원구">중원구</option>
          <option value="분당구">분당구</option>
        </select>
        <input type="submit" value="등록">
    </fieldset>
  </form>

 

selected 속성

콤보박스는 첫 번째 option 태그의 값이 기본 선택된 상태로 표시되는데, selected 속성을 사용하면 기본 선택 항목을 변경할 수 있다.

<!-- select & option 태그만 사용 -->
  <form action="#" method="post">
    <fieldset>
      <legend>개인 정보 입력</legend>
        <label for="city">지역</label>
        <select name="city" id="city">
          <option value="강북구">강북구</option>
          <option value="강남구">강남구</option>
          <option value="서초구" selected>서초구</option>
          <option value="중원구">중원구</option>
          <option value="분당구">분당구</option>
        </select>
        <input type="submit" value="등록">
    </fieldset>
  </form>

 

button 태그

버튼 요소는 input 태그에서 type 속성값을 submit, reset, button으로 지정해 생성할 수 있다.

또한, 밸도의 button 태그로 생성할 수도 있다.

button 태그도 마찬가지로 type 속성을 가진다.

type 속성값은 서버에 전송할 목적이면 submit, 상호작용 요소에 입력된 내용을 초기화하는 버튼이면 reset, 단순한 버튼이면 button으로 지정한다.

<form action="#">
    <button type="submit">
      <img src="facebook.png" alt="페이스북 버튼">
      페이스북에 등록하기
    </button>
</form>

 

폼 관련 태그 추가 속성

폼 관련 태그에서 공통으로 사용할 수 있는 몇 가지 속성이 있다.

 

disabled 속성

disabled 속성은 상호작용 요소를 비활성화하며, input, textarea, select, button 태그에서 사용할 수 있다.

<input type="text" disabled>
<button type="button" disabled>비활성</button>

 

readonly 속성

readonly 속성은 상호작용 요소를 읽기 전용으로 변경한다.

읽기 전용으로 변경되면 입력 요소에 텍스트를 입력할 순 없지만, 요소를 선택하거나 드래그해서 내용을 복사할 순 있다.

<input type="text" readonly>
<textarea readonly></textarea>
disable 속성과 readonly 속성
disable 속성은 form 태그로 서버에 값을 전송할 때 값이 아예 전송되지 않는다.
반면에 readonly속성은 값이 전송된다.

 

maxlength 속성

maxlength 속성은 입력할 수 있는 글자 수를 제한한다.

<input type="url" maxlength="4">
<textarea maxlength="4"></textarea>

 

checked 속성

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>

 

placeholder 속성

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

<input type="tel" placeholder="전화번호를 입력해 주세요.">