HTML 폼 태그 (form tag)

< HTML 폼 태그(form tag) >

폼 예시) 네이버 로그인 화면

사용자가 웹 사이트로 정보를 보낼 수 있는 요소(=form) 태그를 생성해보자.

폼과 관련된 대부분의 작업은 정보를 저장하거나 검색, 수정하는 일이므로 데이터베이스를 기반으로 한다.

폼에 입력된 사용자 정보를 처리하는 것은 ASP, PHP, JSP 와 같은 서버 프로그래밍을 이용한다.

---

* 폼 만들기

• <form 속성="속성 값",,,> ~ </form>

  : 사용자가 입력한 자료들을 서버로 어떤 방식으로 넘길 지, 서버에서 어떤 프로그램을 이용해 처리할 것인지           속성 값으로 지정

 

→ method 속성

  : 사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정

 

 ✔ 속성 값 get

  : 주소 표시줄에 사용자가 입력한 내용이 그대로 드러나므로 보안이 약함

  : 글자 수 256byte ~ 4096byte까지의 데이터만 전달 가능

ex)

<form> 태그 속성 method의 get 값 예시

 

 ✔ 속성 값 post

  : 주로 사용하는 값

  : 사용자의 입력을 표준 입력으로 넘기기 때문에 입력 내용 길이에 제한 받지 않는다.

  : 사용자가 입력한 내용이 드러나지 않아 로그인 등 보안 유지가 필요한 경우에 사용

 

→ name 속성

: 폼의 이름 지정

: <form> 태그가 여러 개 있을 경우 구분하기 위함

 

→ action 속성

: <form> 태그 안의 내용들을 처리해 줄 서버 상의 프로그램 지정

ex) 

<form action="reference.php"> ~ </form>

 

→ target 속성

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

 

→ autocomplete 속성

: 자동 완성 기능

: 사용자가 입력했던 내용을 기억했다가 비슷한 내용을 입력할 경우, 이전에 입력했던 내용을 힌트로 보여 준다.

 

 ✔ 속성 값 on

  : 기본값

  : 자동 완성 기능 켜짐

 

 ✔ 속성 값 off

  : 자동 완성 기능 끄는 값

  : 비밀번호, 일회용 인증번호 입력 시 사용

 

ex)

<form autocomplete = "on"> ~ </form>
<form autocomplete = "off"> ~ </form>

 

반응형

 

 

• <label 속성="속성 값",,,> 레이블 <imput ...> </label>

   or

  <label for="id 이름"> 레이블 </label>

  <input id="id 이름" 속성="속성 값">

레이블 예시

  : 폼 요소에 레이블을 붙이기 위한 것

  : <label> 태그를 통해 폼 요소와 레이블 텍스트가 서로 연결되어 있다는 것을 브라우저에서 확인 가능

  : 2 가지 방법으로 표현 가능

  : 되도록 사용하는 편이 좋다.

  !  

레이블(label) 이란?

입력 창 옆에 '아이디' 나 '비밀번호' 처럼 붙여 놓은 텍스트를 말한다.

 

① <label> 태그 안에 폼 요소 넣기

<label> 아이디 <input type="text" ...></label>
<label> 비밀번호 <input type="text" ...></label>

 

② for 속성 이용하여 id 속성으로 서로 연결

<label for="user-id"> 아이디 </label>
<input type="text" id="user-id">

<label for="user-pw"> 비밀번호 </label>
<input type="text" id="user-pw">

 

✨ 라디오 버튼과 체크박스에서 <label> 태그 사용할 수 있다.

<label> 태그 사용 시 클릭 범위 예시

<h3>선호하는 계절(1개만 선택 가능)</h3>
	<ul>
		<li>
			<label><input type="radio" name="season" value="spring">봄</label>
		</li>
		<li>
			<label><input type="radio" name="season" value="summer">여름</label>
		</li>
		<li>				
			<label><input type="radio" name="season" value="fall">가을</label>
		</li>
		<li>				
			<label><input type="radio" name="season" value="winter">겨울</label>
		</li>
	</ul>

<label> 태그를 통해 텍스트만 터치해도 라디오 버튼이나 체크박스가 선택된다.

최근 대부분의 폼에서 이 방식을 이용하고 있다.

 

<label> 태그 사용하지 않는 경우 클릭 범위 예시

<h3>선호하는 계절(다수 선택 가능)</h3>
	<ul>
		<li><input type="checkbox" value="spring">봄</li>
		<li><input type="checkbox" value="summer">여름</li>
		<li><input type="checkbox" value="fall">가을</li>
		<li><input type="checkbox" value="winter">겨울</li>
	</ul>

* <label> 태그를 사용하지 않아도 체크 박스를 생성할 수 있지만 반드시 체크 박스 부분을 클릭해야 선택된다.

클릭 범위가 매우 한정적이다.

 

 

 

• <fieldset>

      <legend> ~ </legend>

  </fieldset>

<fieldset>, <legend> 예시

  : 폼 요소 그룹으로 묶기

  : 폼 안에서 여러 구역을 나누어 표시할 때 사용

  : <fieldset> 태그는 태그 사이의 폼들을 하나의 영역으로 묶어 외곽선을 그린다.

  : <legend> 태그는 <fieldset> 태그로 묶은 그룹에 제목을 붙이는 태그이다.

 

ex)

<form>
    <fieldset>
        <legend> 기본정보 </legend>
        <ul>
            <li>
                <label for="user-id">아이디</label>
                <input type="text" id="user-id">
            </li>
            <li>
                <label for="user-pw">비밀번호</label>
                <input type="text" id="user-pw">
            </li>
            <li>
                <label for="pw-check">비밀번호 확인</label>
                <input type="text" id="pw-check">
            </li>
            <li>
                <label for="name">이름</label>
                <input type="text" id="name">
            </li>
            ~
        </ul>
    </fieldset>
    <fieldset>
        <legend> 추가정보 </legend>
        <ul>
            <li>
                <label for="account">환불계좌 정보</label>
            </li>
        </ul>
    </fieldset>
</form>

 

 

😊 Do it! HTML5 + CSS 웹 표준의 정석 책으로
독학하는 코린이의 공부 기록