폼 삽입하기

Hush 2022. 5. 29. 20:21

아이디 비번, 로그인 버튼, 회원 가입 등 사용자가 웹 사이트로 정보를 보낼 수 있는 요소는 모두 폼이라고 할 수 있다.

텍스트박스나 버튼같은 폼 형태는 HTML태그로 만들지만 폼에 입력한 사용자 정보는 ASP나 PHP, JSP 같은 서버 프로그래밍을 이용해 처리한다.

일단은 태그만 살펴보자.

form 태그

태그 사이에 여러가지 폼 요소를 넣는다. 기본형은 다음과 같다

<form [속성="속성값"]> 여러 폼 요소</form>

form 태그는 몇 가지 속성을 사용해서 입력받은 자료를 어떤 방식으로 서버로 넘길 것인지, 어떤 프로그램을 이용해 처리할 것인지를 지정한다.

종류	설명
method	사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정합니다. method에서 사용할 수 있는 속성값은 get과 post입니다. get : 데이터를 256~4,096byte까지만 서버로 넘길 수 있습니다. 주소 표시줄에 사용자가 입력한 내용이 그대로 드러나는 단점이 있습니다. post : 입력한 내용의 길이에 제한받지 않고 사용자가 입력한 내용도 드러나지 않습니다
name	자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정합니다
action	<form> 태그 안의 내용을 처리해 줄 서버 프로그램을 지정합니다.
target	action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 합니다.
autocomplete	자동완성기능을 사용할 지를 설정할 수 있는 속성입니다. 기본 속성값은 "on"입니다.

예를 들어 폼에 내용을 입력하고 서버로 전송했을 때 서버에 있는 register.php를 실행한다면 다음과 같이 작성한다

<form action="register.php">
 /* 여러 폼 요소 */
</form>

폼 요소를 그룹으로 묶는 <fieldset>, <legend> 태그

하나의 폼 안에서 여러 구역을 나누어 사용할 때 fieldset태그를 사용합니다.

legend태그는 fieldset태그로 묶은 그룹에 제목을 붙일 수 있다

예시를 보자. 상품 주문 양식을 만들 때 이 두 태그를 사용해서 상품선택과 배송정보를 그룹으로 묶은 것이다

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
    </head>
    <body>
        <form action="">
            <fieldset>
                <legend>상품 선택</legend>
            </fieldset>
            <fieldset>
                <legend>배송 정보</legend>
            </fieldset>
        </form>
    </body>
</html>

폼 요소에 레이블을 붙이는 <label> 태그

이 태그는 <input>태그와 같은 폼 요소에 레이블을 붙일 때 사용한다.

레이블이란 입력란 가까이에 "아이디"나 "비밀번호"처럼 붙여놓은 텍스트를 말한다.

label태그를 활용하면 폼 요소와 레이블 텍스트가 서로 연결되었다는 것을 웹 브라우저가 알 수 있다.

label 태그 사용법-1

기본형은 다음과 같다

<label>레이블명<input></label>

이렇게 폼 요소를 레이블 태그로 감싸고 레이블 텍스트를 적어준다

label 태그 사용법-2

두 번째 방법은 label태그와 폼 요소를 따로 사용하고, label 태그의 for 속성과 폼 요소의 id 속성을 이용해 서로를 연결하는 것이다. 기본형은 다음과 같다

<label for="id명">레이블명</label>
/* . . . */
<input id="id명">

이렇듯 레이블과 폼 요소가 떨어져 있을 때에도 연결할 수 있다는 점이 이 방식의 장점이다.

예제코드는 다음과 같다

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
    </head>
    <body>
        <!-- 방법1 -->
        <label>아이디(6자 이상) <input type="text"></label>
        
        <br>
        
        <!-- 방법2 -->
        <label for="passward">비밀번호(8자 이상)</label>
        <input type="text" id="passward">
    </body>
</html>

저작자표시 (새창열림)