html5 _ <form> 태그 정리

재이·2021년 11월 15일

XHTML, HTML5

목록 보기

4/6

※ 본 포스팅은 책 <실전 프로젝트 반응형 웹 퍼블리싱>을 참고하여 작성함

폼(Form) : `<form>`_b

웹 사이트에서 특정 콘텐츠에 대한 정보를 제공받기 위해서는 회원가입을 해야 하는 경우가 많다.
회원가입 양식을 보면 약관 동의에서부터 이름, 아이디, 패스워드, 주소 등을 입력해야 하며 성별 체크 등 다양한 항목을 선택하기도 해야 한다.
회원가입뿐만 아니라 온라인 쇼핑몰에서 상품을 구입하거나 게시판에 글을 쓸 때에도 이러한 정보입력 양식을 많이 접하게 되는데 웹에서의 이러한 정보입력 양식을 '온라인 서식'이라고 한다.

`<form>`_b

<form> 요소는 스크린에 보이지는 않지만 input 태그들을 담는 일종의 컨테이너 역할을 수행하며 온라인 서식에서 작성한 값들을 서버 프로그램(서식값 처리)으로 전송하는 역할을 담당함.

<form action="서버 프로그램 URL" method="get이나 post방식">
  서식 내용
</form>

'action'은 서식에서 작성한 값들을 처리하는 서버 프로그램의 주소이다.
여기에서 서버 프로그램이 하는 역할은 전송되어 넘어온 값들(아이디, 패스워드, 주소 등)을 DB(DataBase)에 저장하거나 로그인할 때처럼 입력받은 아이디값이 DB에 등록되어 있는지, 패스워드가 일치하는지에 대한 여부 처리 및 데이터 검색 등의 역할을 수행한다.
'method'는 서식의 값들을 서버 프로그램에 어떤 방법으로 전달할 것이지 처리하는 부분이다.
전달 방식에는 'get'방식과 'post'방식이 있다.
예를 들어 서식에서 id를 'kim', pw를 '1234'라고 입력하였다면 'get' 방식의 경우 '서버 프로그램 URL?id=kim&pw=1234'식으로 전달한다. 이런 방식은 포털사이트에서 검색한 후 주소창을 보면 확인할 수 있다. 이와 같이 'get'방식은 주소창에 중요한 정보값들이 노출된다는 점과 전송할 수 있는 데이터가 적다는 특징을 가지고 있다. 이와 반대로 'post'방식의 경우 전송되는 데이터값들이 노출되지 않으며 많은 양의 데이터을 전송할 수 있는 특징이 있다.
온라인 서식의 경우 중요한 정보들이 많고 많은 양의 정보들을 전송해야 하기 때문에 일반적으로 'post'방식을 많이 이용한다.

`<fieldset>`_b

<fieldset>요소는 <form>요소 안에 있는 여러 요소를 그룹화할 때 사용하며, 그룹 제목 <legend>요소를 포함한다.

<form action="join.php" method="post">
  <fieldset>
    <legend>그룹 제목</legend>
    서식내용
  </fieldset>
</form>

`<input>`_i

<input>은 inline요소이며 type속성 변경으로 다양한 폼 컨트롤을 생성할 수 있다.

<form action="join.php" method"post">
  <fieldset>
    <legend>회원가입</legend>
    <p>아이디 : <input type="text" size="12" maxlength="8" /></p>
    <p>비밀번호 : <input type="password" size="12" maxlength="8" /></p>
    <p>메일 수신여부 : 
      <input type="radio" value="y" name="receive" />예
      <input type="radio" value="n" name="receive" />아니오
    </p>
    <p>관심분야 : 
      <input type="checkbox" value="HTML" name="chk1" />HTML
      <input type="checkbox" value="CSS" name="chk2" />CSS
      <input type="checkbox" value="Javascript" name="chk3" />Javascript
    </p>
    <p>
      <input type="submit" value="전송" />
      <input type="reset" value="취소" />
      <input type="button" value="확인" />
      <input type="image" src="images/search.gif" alt="검색" />
    </p>
    <p>파일 올리기 : <input type="file" /></p>
    <p><input type="hidden" /></p>
  </fieldset>
</form>

이를 출력하면 다음과 같다.

회원가입

아이디 :

비밀번호 :

메일 수신여부 : 예 아니오

관심분야 : HTML CSS Javascript

파일 올리기 :

<fieldset>요소는 사각형 border로 나오게 되며 <legend>요소는 사각형 border 상단에 제목으로 출력된다.
<input>의 type의 종류를 정리하면 다음과 같다.

type	설명
text	한 줄 글 입력 상자 size 속성은 글상자의 가로길이 maxlength 속성은 최대 글자 수
password	비밀번호 입력 상자, 입력된 내용은 '*'로 표시
radio	라디오 버튼 여러 중 하나만 선택 가능 name값이 같아야함 value는 체크 시 실제 전송되는 값
checkbox	체크박스 다중 선택 가능 name값이 서로 다름
submit	전송 버튼 value 속성은 버튼에 표시할 글자
reset	초기화 버튼
button	범용 버튼
image	이미지 버튼 alt 속성은 반드시 명시
file	첨부 파일
hidden	화면에 표시되지 않음 사용자에게 노출할 필요가 없는 데이터 지정

새로 추가된 input type

아직 모든 브라우저에서 새로 추가된 input type들을 지원하고 있지는 않다.
http://miketaylr.com/code/input-type-attr.html 사이트에서 현재 브라우저들에서 HTML5 input type과 속성을 어느 정도 지원해 주는 지 알 수 있다.

search :
검색 박스로 텍스트 입력시 지우기(X) 버튼이 나타남.

email :
email입력 양식에 맞지 않을 경우 오류 메시지를 제공하며 아이폰에선느 입력하기 편리한 키패드로 변함.

url :
url입력 양식에 맞지 않을 경우 오류 메시지를 제공하며 아이폰에서는 입력하기 편리한 키패드로 변함.

tel :
전화번호 입력 박스

number :
숫자 입력 박스에 직접 입력하거나 상하 화살표를 눌러 선택할 수 있다.
min과 max 속성은 선택할 수 있는 숫자의 최소값과 최대값을 나타내며 step속성은 숫자의 단계를 의미한다.
value 속성은 숫자의 기본 값이다. 예를 들어 value="1"을 놓고 step="2"로 하면 위 화살표를 한 번 누를 때마다 2씩 증가되어 1,3,5,7...과 같이 나오게 된다.

rage :
숫자 범위가 '슬라이드 바'로 나타난다.

date :
연, 월, 일을 선택할 수 있는 박스가 나온다.

datetime :
연, 월, 일과 시, 분을 선택할 수 있는 박스가 나온다.(UTC, 국제표준시간)

datetime-local :
연, 월, 일, 시, 분을 선택할 수 있는 박스가 나온다.

month :
연과 월만 선택할 수 있는 박스가 나온다.

week :
연과 주를 선택할 수 있는 박스가 나온다.

time :
시, 분을 선택할 수 있는 박스가 나온다.

color :
색상 선택 박스로 나타난다.

추가된 폼 속성

required 속성
required 속성은 입력 필드에 값이 채워졌는지에 대한 부분과 유효성을 판단해주는 속성이다. required 속성을 적용한 <input>요소에 값을 입력하지 않거나 유효하지 않은 상태로 [전송] 버튼을 누르면 오류 메시지가 나타납니다.

<p><strong>*</strong> 표시는 필수입력 항목입니다.</p>
<form>
  <fieldset>
    <legend>필드 유효성 검사</legend>
    <ul>
      <li>
        <label><strong>*<strong>이름</label>
        <input type="text" id="name" required="required" />
      </li>
      <li>
        <label><strong>*<strong>아이디</label>
        <input type="text" id="id" required="required" />
      </li>
      <li>
        <label><strong>*<strong>비밀번호</label>
        <input type="password" id="pw" required="required" />
      </li>
      <li>
        <label><strong>*<strong>전화번호</label>
        <input type="tel" id="phone" required="required" />
      </li>
      <li>
        <label><strong>*<strong>이메일</label>
        <input type="email" id="email" />
      </li>
    </ul>
    <p><input type="submit" value="전송"></p>
  </fieldset>
</form>

*표시는 필수입력 항목입니다.

필드 유효성 검사

*이름
*아이디
*비밀번호
*전화번호
이메일

placeholder 속성
placeholder 속성은 각 필드에 대한 입력형식 힌트를 제공해준다.

<form>
  <fieldset>
    <legend>필드에 입력형식 힌트주기</legend>
    <ul>
      <li>
        <label for="phone">핸드폰 번호</label>
        <input type="tel" id="phone" placeholder="01011112222" />
     </li>
      <li>
        <label for="phone">이메일</label>
        <input type="email" id="email" placeholder="id@domain.com" />
     </li>
    </ul>
  </fieldset>
</form>

이를 출력하면 다음과 같다.

필드에 입력형식 힌트주기

핸드폰 번호
이메일

autocomplete 속성
autocomplete 속성은 자동완성 기능에 대한 사용 여부를 판단해준다. 자동완성 기능을 사용하고 싶으면 속성값을 'on'으로, 아니면 'off'를 주면 된다.

<form>
  <fieldset>
    <legend>자동완성 기능</legend>
    <ul>
      <li>
        <label for="phone">전화번호</label>
        <input type="tel" id="phone" autocomplete="off" />
      </li>
      <li>
        <label for="email">이메일</label>
        <input type="email" id="email" autocomplete="on" />
      </li>
    </ul>
  </fieldset>
</form>

이를 출력하면 다음과 같다.

자동완성 기능

전화번호
이메일

list 속성
list 속성은 텍스트 필드에 내용 입력 시 미리 만들어 놓은 리스트 항목이 마치 자동완성 기능처럼 나타나도록하는 속성이다. 리스트 항목들은 <datalist>요소로 만들어 준다.

<form>
  <fieldset>
    <legend>datalist</legend>
    <p>
      <label for="course">수강과목 : </label><input type="text" id="course" list="subjects" />
      <datalist id="subjects">
        <option value="html5">
        <option value="css3">
        <option value="javascript">
        <option value="jquery">
      </datalist>
    </p>
  </fieldset>
</form>

이를 출력하면 다음과 같다.

datalist

수강과목 :

outofocus 속성
페이지가 로드되었을 때 입력 필드에 포커스(커서)가 자동으로 이동하게 해주는 속성이다.
outofocus 속성은 하나의 <input>요소에만 적용할 수 있다.

<form>
  <fieldset>
    <legend>포커스 자동이동</legend>
    <ul>
      <li>
        <label for="name">이름</label>
        <input type="text" id="name" autofocus="autofocus" />
      </li>
      <li>
        <label for="id">아이디</label>
        <input type="text" id="id" />
      </li>
      <li>
        <label for="pw">비밀번호</label>
        <input type="password" id="pw" />
      </li>
      <li>
        <label for="phone">전화번호</label>
        <input type="tel" id="phone" />
      </li>
      <li>
        <label for="email">이메일</label>
        <input type="email" id="email" />
      </li>
    </ul>
    <p><input type="submit" value="전송" /></p>
  </fieldset>
<form>

이를 출력하면 다음과 같다.

포커스 자동이동

이름
아이디
비밀번호
전화번호
이메일

disabled 속성과 readonly 속성

disabled 속성과 readonly 속성은 적용된 input 요소의 내용을 수정하거나 선택할 수 없도록 비활성화 상태로 만든다.
예를 들어 프로그램을 설치 시 시링얼 번호를 입력하지 않으면 '다음'으로 넘어가는 버튼이 비활성화되어 있는 것을 볼 수 있다. 이렇게 disabled 속성은 어떤 조건에 만족하지 않았을 때 input 요소를 비활성화시키는데 주로 사용되며 readonly 속input 요소의 값이 변경되지 않은 채 폼 전송이 되어야 하는 곳에 사용된다.

<form>
  <fieldset>
    <legend>disabled속성과 readonly속성</legend>
    <ul>
      <li>
        <label for="serialNum">시리얼 번호 입력 : </label>
        <input type="text" id="serialNum" />
        <input type="button" value="이전" />
        <input type="button" value="다음" disabled="disabled" />
      </li>
      <li>
        <label for="book">선택한 책 : </label>
        <input type="text" id="book" value="안드로이드로 용돈 벌기" readonly="readonly" /> 
        <label for="number">수량 : </label><ipnut type="number" id="number" value="1" />
      </li>
    </ul>
  </fieldset>
</form>

~~이를 출력하면 다음과 같다.~~
코드를 넣으면 게시물 전체가 보이지 않는 알 수 없는 오류로 인해 해당 코드는 예시를 보이지 않겠다.

pattern 속성

pattern 속성은 required 속성처럼 필드의 값을 체크해 주는 폼 유효성 검사 속성이라고 보면 된다. 다만, required 속성은 일반적인 input type 형식에 대한 유효성을 체크하지만 pattern 속성은 '정규 표현식' 방법으로 입력값과 정규식이 일치해야만 유효성에 통과할 수 있다.

<form>
  <fieldset>
    <legend>pattern 속성</legend>
    <p><label for="tel">휴대폰 번호 : </label><input type="tel" id="tel" pattern="\d{3}-\d{3,4}-\d{4}" title="휴대폰 번호는 3자리 숫자 - 3자리에서 4자리 숫자 - 4자리 숫자로 입력하셔야 합니다." /></p>
    <p><input type="submit" value="전송" /></p>
  </fieldset>
</form>

이를 출력하면 다음과 같다.

pattern 속성

휴대폰 번호 :

pattern="￦d{3}-￦d{3,4}-￦d{4}"의 의미를 살펴보면 '￦d'는 숫자, '{3}'은 3자리를 의미합니다. 조금 더 쉽게 풀이하자면, "입력되는 값은 '숫자 3자리-숫자 3~4자리-숫자 4자리' 와 일치해야 합니다."라는 뜻이 된다. pattern 속성을 사용할 때는 해당 input 요소에 정해놓은 정규 표현식과 일치하게 입력할 수 있도록 title 속성을 이용하여 입력 형식에 대한 툴티을 제공해 주어야 한다.

multiple 속성
multiple 속성은 여러 개의 이메일을 ','로 입력하거나 다중의 파일을 선택할 수 있도록 해주는 속성이다.

  <label for="email">이메일 : </label><input type="email" id="email" multiple="multiple" />
  <label for="file">파일 찾기:</label><input type="file" id="file" multiiple="multiple" />

`<textarea>`_i & `<select>`_i

<textarea> : 게시판의 내용 입력이나 약관 등 여러 줄로 된 텍스트 상자를 생성하는 요소
<select> : 선택 목록 상자를 생성하는 요소

<form action="board.php" method="post">
<fieldset>
  <legend>여러 줄 글상자와 목록상자</legend>
  <p>답글<br /> <textarea cols="30" rows="3" name="reply"></textarea></p>
  <p>과목 선택
    <select>
      <option value="html5">html5</option>
      <option value="css3">css3</option>
      <option value="javascript">javascript</option>
      <option value="Query">jQuery</option>
    </select>
  </p>
  <p>스터디 지역
    <select>
      <optgroup label="관악구">
        <option value="gwanak-bcd">봉천동</option>
        <option value="gwanak-sld">신림동</option>
        <option value="gwanak-nhd">남현동</option>
      </optgroup>
      <optgroup label="동대문구">
        <option value="ddm-jnd">전논동</option>
        <option value="ddm-dsn">답십리</option>
        <option value="ddm-ssd">신설동</option>
      </optgroup>
    </select>
  </p>
</fieldset>
</form>

이를 출력하면 다음과 같다.

여러 줄 글상자와 목록상자

답글

과목 선택 html5 css3 javascript jQuery

스터디 지역 봉천동 신림동 남현동 전논동 답십리 신설동

<textarea>요소의 cols와 rows 속성은 텍스트 상자의 열과 행의 수를 지정한다.
<select>요소는 <option>요소와 함께 쓰며 특히 목록이 많은 경우에는 관련 있는 것끼리 묶어주는 <optgroup>요소를 사용한다. <option>요소의 value는 실제 전송값을 의미하며 <optgroup>요소의 label 속성은 그룹 지어진 <option>요소들의 제목이다.

`<label>`_i

테이블과 마찬가지로 폼 요소들도 환경적인 요인에 따라 접근하기 어려운 경우들이 있다.

예를 들어 마우스에 익숙하지 않은 사용자의 경우 라디오 버튼이나, 체크박스에 정확히 클릭하기란 쉽지 않을 것이다. 또한, 웹 문서가 음성만 출력되는 환경에서는 각 폼 요소들 앞에 정확한 레이블을 주지 않으면 어떤 내용을 입력하고 체크해야 하는지 알 수가 없는 상황이 발생할 수 있다.

<label>요소를 이용하여 접근성 높은 온라인 서식을 만드는 방법에 대해 알아보자.

<form action="join.php" method="post">
  <fieldset>
    <legend>회원가입</legend>
    <table>
      <colgroup>
        <col width="30%" />
        <col width="70%" />
      </colgroup>
      <tbody>
        <tr>
          <th scope="row"><label for="name">이름</label></th>
          <td><input type="text" id="name" /></td>
        </tr>
        <tr>
          <th scope="row"><label for="id">아이디</label></th>
          <td><input type="text" id="id" /></td>
        </tr>
        <tr>
          <th scope="row"><label for="pw">비밀번호</label></th>
          <td><input type="text" id="pw" /></td>
        </tr>
        <tr>
          <th scope="row"><label for="r_pw">비밀번호 확인</label></th>
          <td><input type="text" id="r_pw" /></td>
        </tr>
        <tr>
          <th scope="row"><label for="jumin_num">주민번호</label></th>
          <td>
            <input type="text" id="jumin_num" title="주민번호 앞 6자리" />
            -
            <input type="text" id="jumin_num" title="주민번호 뒤 7자리" />
          </td>
        </tr>
        <tr>
          <th scope="row"><label for="e-mail">이름</label></th>
          <td>
            <input type="text" id="email" tilte="이메일 아이디" />
            @
            <input type="tsxt" title="이메일 주소" />
          </td>
        </tr>
        <tr>
          <th scope="row"><label for="hp">핸드폰</label><th>
          <td><input type="text" id="hp" /></td>
        </tr>
      </tbody>
    </table>
    <p><input type="submit" value="전송" /><input type="reset" value="취소" /></p>
  </fieldset>
</form>

이를 출력하면 다음과 같다.

회원가입

이름
아이디
비밀번호
비밀번호 확인
주민번호	-
이름	@
핸드폰

<label>요소의 for 속성값과 <input>요소의 id 속성값을 같은 이름으로 연결시켜 주면 레이블 텍스트(이름, 아이디, 비밀번호 등...)에 마우스를 클릭하거나 포커스가 이동되면 우측에 연결되어 있는 input 텍스트 상자로 커서가 자동 이동된다.
주민번호의 경우 하나의 <label>에 두 개의 <input>요소가 있다. 이러한 경우 <label>를 첫 번째 <input>요소에 title 속성을 이용하여 추가적딩 설명을 넣어주면 음성만 출력되는 환경에서도 폼 요소들에 대한 접근성을 높일 수 있다.

재이

그림쟁이 개발자

이전 포스트

html5 _ <table> 태그 정리

다음 포스트

html5 _ <form> 태그 정리

XHTML, HTML5

폼(Form) : `<form>`_b

`<form>`_b

`<fieldset>`_b

`<input>`_i

새로 추가된 input type

추가된 폼 속성

`<textarea>`_i & `<select>`_i

`<label>`_i

html5 _ <table> 태그 정리

HTML5_새로운 구조(New Structure)

0개의 댓글

html5 _ <form> 태그 정리

XHTML, HTML5

폼(Form) : <form>_b

<form>_b

<fieldset>_b

<input>_i

새로 추가된 input type

추가된 폼 속성

<textarea>_i & <select>_i

<label>_i

html5 _ <table> 태그 정리

HTML5_새로운 구조(New Structure)

0개의 댓글

폼(Form) : `<form>`_b

`<form>`_b

`<fieldset>`_b

`<input>`_i

`<textarea>`_i & `<select>`_i

`<label>`_i