HTML 폼 관련 태그들

폼(form)?

웹 폼은 특정 항목에 사용자가 뭔가를 입력하는 형태로 우리가 익숙하게 사용하는 로그인 창이 바로 웹 폼을 이용한 대표적인 사례이다.

 

 

<form> 태그로 폼 만들기

<form> 태그는 폼을 만드는 가장 기본적인 태그로 <form> 태그 안에 여러가지 폼 관련 태그를 넣는다.

method : 사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정한다.
    - get : 주소 표시줄에 사용자가 입력한 내용이 그대로 드러난다.
    - post : 입력 길이 제한을 받지 않고 사용자가 입력한 내용이 드러나지 않는다.
name : 폼의 이름을 지전한다.
action : 태그 안의 내용들을 처리해 줄 서버 상의 프로그램을 지정한다.
target : <action> 태그에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 지정한다.

 

+ autocomplete 속성 - 자동완성 기능

검색창이나 로그인 창에 내용을 입력할 때 이전에 입력했던 내용이 아래에 표시되는 것을 자동완성 기능이라고 한다. autocomplete 속성의 기본값은 on 으로 자동 완성이 기본으로 켜져 있다. 따라서 매우 중요한 개인정보나 한 번만 사용할 인증번호를 입력한다면 자동 완성 기능을 끄는 것이 좋다.

<form action="search.php" method="post" autocomplete="off">
    <input type="text" title="검색">
    <input type="submit" value="검색">
</form>

 

 

<label> 태그 - 폼 요소에 레이블 붙이기

레이블(label)이란 입력 창 앞에 '아이디' 나 '비밀번호'처럼 붙여 놓은 텍스트를 말한다. 두 가지 방법으로 사용할 수 있다.

<!-- label 태그의 for 속성을 이용하는 방법 -->
<label for="id_label">아이디</label>
<input type="text" id="id_label">

<!-- label 태그 안에 input 태그를 넣는 방법-->
<label>아이디<input type="text"></label>

for 속성을 이용한 방법은 화면 낭독기에서 시각장애인에게 폼을 읽어줄 때 텍스트와 그 옆의 입력창이 서로 짝을 이룬다는 것을 알면 더 정확히 설명할 수 있다.

 

+라이오 버튼과 체크박스에서 사용하는 <label> 태그

<label> 태그로 묶어놓으면 텍스트만 클릭해도 라디오 버튼 혹은 체크박스가 선택된다. 텍스트 영역까지 확장되어 편리하다. 일반저긍로 input 태그만 사용하면 텍스트를 클릭한다고 체크버튼 혹은 라디오 버튼이 선택되지 않는다.

<!-- label 태그 사용 안함 -->
<input type="checkbox" value="grm">문법

<!-- label 태그 사용 -->
<label><input type="radio" name="subject" value="eng">영어회화</label>

 

 

<fieldset>, <legend> 태그 - 폼 요소 그룹으로 묶기

하나의 폼 안에서 여러 구역으로 나누어 표시하려고할 때 <fieldset>, <legend> 태그를 사용한다.

<form action="search.php" method="post">
    <fieldset>
        <legend>로그인 정보</legend>
        <label>이름 <input type="text"></label>
    </fieldset>
</form>