각진 세상에 둥근 춤을 추자

[HTML] 폼 만들기 본문

HTML

[HTML] 폼 만들기

circle.j 2022. 9. 27. 09:35

 

웹 폼은 특정 항목에 사용자가 뭔가를 입력하는 형태이다.

익숙하게 사용하는 로그인 창도 웹 폼을 이용한 대표적인 사례이다. 

 

  <form> 태그 - 폼 만들기   

 

<form> 태그는 폼을 만드는 가장 기본적인 태그로 <form> 태그와 </form> 태그 사이에 여러 폼 요소와 관련된 태그를 넣는다.

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

 

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

 

 

  예제 - 검색 창 만들기   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>검색 창 만들기</title>
</head>
<body>
    <form action="search.php" method="post">
        <input type="text" title="검색">
        <input type="submit" value="검색" >
    </form>
</body>
</html>

 

 

autocomplete 속성 - 자동 완성 기능

 

검색창이나 로그인 창에 내용을 입력할 때 이전에 입력했던 내용이 아래에 표시되는 것을 가끔 볼 수 있다.

이 기능을 '자동 완성 기능'이라고 한다.

자동 완성 기능은 autocomplete 속성을 이용하는데 기본값은 "on"이다.

하지만 <form> 태그의 autocomplete 속성을 "off"로 지정해 끌 수 있다.

 

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

 

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

 

<label> 태그는 폼 요소에 레이블을 붙이기 위한 것이다. 

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

 

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

 

  예제 - <label> 태그 사용하기  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>label 태그 사용하기</title>
</head>
<body>
    <form>
       <h3>수강 과목 (1과목 선택 가능)</h3>
       <ul>
        <li>
            <label><input type="radio" name="subject" value="eng">영어회화</label>
        </li>
        <li>
            <label><input type="radio" name="subject" value="ch">중국어회화</label>
        </li>
        <li>
            <label><input type="radio" name="subject" value="kor">한국어회화</label>
        </li>
       </ul>
    </form>
</body>
</html>

 

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

 

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

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fieldset</title>
</head>
<body>
    <form>
        <fieldset>
            <legend>개인 정보</legend>
            <ul>
                <li>
                    <label for="name">이름</label>
                    <input type="text" id="name">
                </li>
                <li>
                    <label for="mail">메일 주소</label>
                    <input type="text" id="mail">
                </li>
            </ul>
            
        </fieldset>
        <fieldset>
            <legend>로그인 정보</legend>
            <ul>
                <li>
                    <label for="id">아이디</label>
                    <input type="text" id="id">
                </li>
                <li>
                    <label for="password">비밀번호</label>
                    <input type="text" id="pass">
                </li>
            </ul>
        </fieldset>
    </form>
</body>
</html>

 

'HTML' 카테고리의 다른 글

[HTML] <input> 태그의 속성  (0) 2022.09.27
[HTML] <input> 태그와 타입  (0) 2022.09.27
[HTML] 아이프레임과 target  (0) 2022.09.23
[HTML] 링크 태그  (0) 2022.09.22
[HTML] 이미지 태그  (0) 2022.09.22
'HTML' Related Articles more