[HTML+CSS][폼 관련 태그들] 01 - 폼(form)

 

[HTML+CSS] [이미지와 하이퍼링크] 03 - SVG 이미지

 

일상에서 우리는 홈페이지에서 로그인 창을 흔히 접할 수 있는데

이것들이 바로 '폼'으로 구성되어 있다.

 

이러한 폼들의 구조에 대해서 알아보고 폼의 형태를 만들어주는 태그에 대해서 알아보자.

 

 

---

 

 

폼 태그에 대해서 알기 전에 폼의 동장 원리에 대해서 간단히 알아보자면

사용자가 브라우저를 열어 아이디와 비밀번호를 입력하고 [로그인] 버튼을 눌렀다면

해당 내용은 서버로 이동하고 서버는 자신이 갖고 있는 데이터와 일치하는지

확인하고 그 결과를 브라우저에 내보낸다.

 

이때 이번에 배우는 폼(form)은 서버로 가기 직전까지의 일을

한다고 보면 된다.

 

 

---

 

 

<form> - 폼 제작

 

폼을 제작할 때 가장 기본적인 태그의 형태로

폼 요소와 관련된 태그들을 추가해 작성한다고 보면 된다.

 

 

폼 태그에서 사용되는 속성들로 사용자가 입력한 자료를 서버로 어떠한 방식으로 보낼지

어떤 프로그램을 처리할지를 지정해 준다.

 

 

- autocomplete 속성 -

 

검색창이나 로그인 창에 내용을 입력할 때

이전에 입력했던 내용이 아래에 표시되는 자동 완성 기능을 설정해 주는 속성

 

비밀번호 같은 보호가 필요한 내용 같은 경우엔 off를 통해 꺼줄 수도 있다.

 

 

    <h1>폼 삽입하기</h1>
    <form action="search.php" method="POST">
        <input type="text" title="검색">
        <input type="submit" value="검색">
    </form>

 

 

---

 

 

<label> - 폼에 레이블 붙이기

 

입력 창 옆에 달린 '아이디'나 '비밀번호'와 같은 이름을 레이블이라고 하며

사용했을 경우에 폼 요소와 레이블 텍스트가 서로 연결되어 있다는 것을

브라우저가 알 수 있다.

 

또한 레이블 태그를 사용하면 항목 선택이 수월해진다.

 

 

    <h1>레이블 태그 사용하기</h1>
    <form>
        <h3>수강 분야 (다수 선택 가능)</h3>
        <ul>
            <li><input type="checkbox" value="grm">문법</li>
            <li><input type="checkbox" value="wr">작문</li>
            <li><input type="checkbox" value="rd">독해</li>
        </ul>
        <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="jp">일어회화</label>
            </li>
        </ul>
    </form>

 

 

---

 

 

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

 

정보를 구분하기 위해 나누어 표시할 때 주로 사용하며

<fieldset>은 태그 사이의 폼들을 하나의 영역으로 묶고 외곽선을 그려주며

<legend>로 해당 그룹에 이름을 붙여준다.

 

 

    <h1>폼 요소 그룹으로 묶기</h1>
    <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="pwd">비밀번호</label>
                <input type="text" id="pwd">
            </li>
            </ul>
        </fieldset>
    </form>

 

 

---

 

 

폼이라는 자체도 중요하지만

폼에서 사용되는 다양한 속성들도 매우 중요한 것 같다.

 

그래도 반복되는 느낌이 어느 정도 있으니 감을 익혀보자.

 

 

---

 

 

< 참고 >

Do it! HTML5+CSS3 웹 표준의 정석

 

 

※ 해당 글은 습득 목적으로 작성된 글입니다 ※