[Do it] 04장 폼 관련 태그들

2023-12-28 1 분 소요

01. 폼 만들기

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

** form태그의 속성**

method

사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정합니다.
- get: 주소 표시줄에 사용자가 입력한 내용이 그대로 드러납니다. 256byte~4096byte까지의 데이터만 서버로 넘길 수 있습니다.
- post: 대부분 이 방식을 사용합니다. 사용자의 입력을 표준 입력으로 넘겨주기 때문에 입력 내용의 길이의 제한을 받지 않고 사용자가 입력한 내용이 드러나지 않습니다.
name

폼의 이르을 지정합니다. 한 문서 안에 여러 개의 <form> 태그가 있을 경우, 폼들을 구분하기 위해 사용합니다.
action

<form>태그 안의 내용들을 처리해 줄 서버 상의 프로그램을 지정합니다.
target

action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정합니다.

예를 하나 보도록 하겠습니다.

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

autocomplete 속성 - 자동 완성 기능

이전에 입력했던 내용이 아래에 표시되는 기능을 자동 완성 기능이라고하며 사용자가 입력했던 내용을 기억했다가 비슷한 내용을 입력할 경우 기억했다가 비슷한 내용을 힌트로 보여줍니다.

autocomplete 속성을 이용하며 기본적으로 on상태입니다.

로그인 시에 자동완성이 되어버리면 개인 PC가 아니고서는 곤란한 상황이 생깁니다. 이를 방지하기 위해서 autocomplete속성을 off로 지정해 끌 수 있습니다.

<form action="reister.php" autocomplete="off">
...
</form>

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

<label> 태그는 폼 요소에 레이블을 붙이기 위한 것입니다. 레이블이란 입력 창 옆에 아이디나 비밀번호처럼 붙여 놓은 텍스트를 말합니다. <label> 태그를 사용하면 폼 요소와 레이블 텍스트가 서로 연결되어 있다는 것을 브라우저가 알 수 있습니다.

<label [속성="속성 값"] > 레이블 <input ...> </label>

또는

<label for="id이름"> 레이블</label>
<input id="id이름" [속성 = "속성 값"]>

위에서 보여준 것 처럼 <label>태그는 두 가지 방법으로 사용할 수 있습니다.

각 방법을 이용해 아이디(6자 이상)라는 텍스트와 입력 창을 묶어 보겠습니다.