3. 입력 양식 작성(1) - 기본

웹에서는 특정 값을 입력하고 그 값을 서버나 DB로 보내 처리하는 등의 행위를 위해 다양한 입력 양식을 사용한다. HTML에 대해 조금 알고 있다면 많은 사람들이 아마도 HTML을 먼저 생각할 것입니다. -tag think 먼저 간단한 폼 태그를 보면서 기초부터 배워봅시다.

-태그.

<form {속성="value"}>폼 요소</form>

위에서 설명한 “속성”에는 몇 가지 대표적인 속성이 있습니다. 하나씩 살펴보겠습니다.

○ 이름

이 속성은 폼이 JS로 구동될 때 사용할 폼의 이름을 의미합니다.

○ 조치

내용을 처리할 서버 프로그램을 지정합니다.

-태그를 붙입니다. 예를 들어 폼이 실행되고 콘텐츠가 서버로 전송되고 서버의 account_register.php가 실행된다고 가정하면 다음과 같다.

<form action="account_register.php">
	/* 내용 */
</form>

○ 목표

이는 에 있는 기능과 유사합니다. 태그가 사용됩니다. 위의 action 속성에서 지정한 파일을 현재 창이나 탭이 아닌 다른 위치에서 열어야 할 때 사용합니다.

○ 자동완성

기본적으로 자동 완성 기능은 입력 양식에서 활성화된 것으로 처리됩니다. 다만, 중요한 개인정보나 1회성 출입인증코드의 경우에는 비활성화하여야 합니다. 따라서 다음과 같이 진행하십시오.

<form action="" autocomplete="off">
	/* 내용 */
</form>

○ 방법

사용자 입력이 서버로 전송될 때 프로토콜 유형을 지정합니다. 이에 대해서는 나중에 자세히 다루도록 하겠으니 그런 일이 있다는 걸 기억하세요.

– get : 256~4,096바이트까지만 데이터를 전송할 수 있으며 사용자 입력은 URL과 같이 표시된다.

– 게시물 : 입력하신 내용은 노출되지 않으며 길이 제한이 없습니다.

지금부터 다음과 관련된 몇 가지 중요한 태그를 살펴 보겠습니다.

사용할 수 있습니다.

○

,
– 양식 요소 그룹화

위의 태그는 form element 내에서 여러 구획을 세분화하여 관리할 필요가 있을 때 사용합니다. 예를 들어 “계정 정보”와 “배송 정보”를 한 형태로 구분합니다. 사용 예는 다음과 같습니다.

<fieldset {속성="value"}>
	<legend>그룹 명칭</legend>
</fieldset>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="">
        <fieldset>
            <legend>계정 정보</legend>
        </fieldset>
        <fieldset>
            <legend>배송 정보</legend>
        </fieldset>
    </form>
</body>
</html>

○ – 양식 요소에 레이블 지정

레이블 태그는 앞으로 매우 광범위하게 사용될 것이며 입력과 같은 중요한 태그와 함께 사용되는 중요한 태그 중 하나입니다. 그럼 내용을 알아보도록 하겠습니다. 기본적으로 레이블 태그를 사용하면 (레이블 텍스트)와 (양식 요소)가 함께 연결됩니다. 캡션 텍스트를 양식 요소와 연결하는 두 가지 방법이 있습니다. 둘 다 살펴보겠습니다.

1. 양식 요소를 레이블 태그에 붙여넣기

라벨 태그에 폼 요소를 직접 삽입하는 형태입니다.

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

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="">
        <label>아이디<input type="text"></label>
    </form>
</body>
</html>

2. 라벨 태그에 id 속성 부여

이 방법을 사용하면 id라는 별도의 속성이 입력 양식에 전달되고 id는 레이블 태그의 속성 페이지에 전달되어 두 태그를 연결합니다.

<label for="{id}">레이블명칭<input id="{id}"></label>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="">
        <label for="userid">아이디</label>
        <input type="text" id="userid">
    </form>
</body>
</html>