안녕하세요! 이번 포스팅에서는 HTML Form에 대해서 알아보려고 합니다.

폼(Form)은 서류를 꾸미는 일정한 방식 이라는 뜻을 가지고 있으며 주로 설문조사, 증정품, 접수와 같은 경우에 많이 사용합니다. 저 같은 경우에는 설문조사나 접수할때 많이 사용한 것 같은데 주로 생년월일, 이름, 핸드폰번호를 기입했던 것 같네요!

 

각설하고 아래 사진은 네이버 폼인데 한눈에 폼이 무엇인지 알 수 있겠죠?

 

네이버폼

 

이러한 폼과 비슷하게 HTML에서도 form은 유저의 입력을 수집하고 수집된 정보를 서버에 보낼 때 사용합니다. (물론 서버는 구축해야합니다..)

이런 역할을 하는 요소가 <form> 요소이며 주로 입력을 받는 <input> 요소, 안내의 역할을 하는 <label> 요소와 함께 사용합니다.

즉 <form>요소는 <input>요소로 받은 정보를 서버로 제출하는 역할을 수행하며 폼의 골격을 담당한다고 생각하면 좋습니다.

 

전체적인 구조를 살펴보면 다음과 같습니다.

<form>
	<label for="value"> 텍스트를 입력해주세요. </label>
	<input type="text" id="value" name="parameter" value="parameter_value">
</form>

<form> 요소는 나중에 배울 <label>요소와 <input>요소의 컨테이너라고 보면 됩니다.

 다음으로 <input>, <label> 요소를 간단하게 살펴보겠습니다.

<input> element

<input> 요소는 웹에서 사용자의 데이터를 받을 수 있으며 type 속성에 따라 디스플레이에 표시되는(동작하는) 방식이 다릅니다.

 

type = "text"  키보드 입력을 받을 수 있는 필드가 생성
type = "password" 패스워드를 입력할 수 있는 필드로 입력시 값이 가려짐
type = "radio" 선택할 수 있는 동그란 원 영역 생성
type = "checkbox" 단일 값을 선택하거나 해제할 수 있는 체크박스
type = "submit" 제출 버튼 생성
type = "button" 클릭 가능한 버튼 생성
type = "color" 색상 지정 선택기
type = "date" 날짜(연월일)을 지정할 수 있는 선택기
type = "email" 이메일 주소를 편집할 수 있는 필드
type = "file" 파일을 지정할 수 있는 선택기
type = "image" 이미지 제출 버튼

 

또한 checked(체크), max(최대값), maxlength(최대길이), min(최소값), minlength(최소길이), multiple(다양한 값 선택), placeholder(양식이 비어있을때 나타나는 내용), selected(선택됨) 와 같은 속성과 함께 사용됩니다.

마지막으로 name과 value를 사용할 수 있는데 이는 폼을 제출할때

각각 URL의 파라미터와 해당 값으로 url:port/?parameter=value 형식으로 들어갑니다.

 

<label> element

<label> 요소는 사용자에게 안내를 도와주는 역할을 하며 스마트폰과 같이 매우 작은 화면에서는 <input>의 선택창의 크기가 매우 작은데, 이럴때 <input>과 연결되어 <label>의 내용을 클릭하더라도 <input>에 값을 넣을 수 있도록 포커스가 전환됩니다.

(다만 연결하기 위해서는 <label>의 for 속성의 값과, <input>의 id 속성의 값이 동일해야 합니다!)

 

 

글로는 조금 감을 잡기 힘들 것 같아서 예제와 함께 설명하겠습니다.

<!DOCTYPE html>
<html>
<body>

<h2>비밀번호 초기화</h2>

<form>
  <label for="name">이름 :</label>
  <input type="text" id="name" ><br>
  
  <label for="id">아이디 :</label>
  <input type="text" id="id"><br>
  <button> 제출 </button>
</form>

<p>비밀번호를 찾기 위해 이름과 아이디를 입력해주세요.</p>

</body>
</html>

비밀번호를 잊어버렸을 때 많이 볼 수 있는 구조입니다. 이름과 아이디를 <input> 요소의 type="text"을 이용해 사용자의 입력을 받아서 처리합니다. 이때 앞서 설명한 것 처럼 각 <label>의 for 속성의 값과 연관된 <input>의 id의 값이 동일하게 해서 이름이나 아이디를 눌러도 입력창으로 포커스가 전환되는 것을 확인할 수 있습니다.

 

또 다른 예시입니다.

<!DOCTYPE html>
<html>
<body>

<h2>영화 선호도 조사</h2>

<p>가장 좋아하는 영화 장르를 선택해주세요.</p>

<form>
  <input type="radio" id="romance" name="fav_genre" value="romance">
  <label for="html">로맨스</label><br>
  <input type="radio" id="horror" name="fav_genre" value="horror">
  <label for="horror">호러</label><br>
  <input type="radio" id="sf" name="fav_genre" value="sf">
  <label for="sf">SF</label>
</form> 

</body>
</html>

name 속성의 값을 전부 "fav_genre"로 동일하게 설정함으로 라디오 형식의 버튼이 생성 되었습니다. 라디오 버튼은 한 버튼 밖에 누르지 못하는 구조로 동시에 선택할 수 없습니다.

이 경우도 역시 각 <label> 요소의 for 속성의 값과 <input> 요소의 id 속성의 값과 동일하게 설정하는 것을 유의합시다!

 

 

마지막으로 배운 요소들을 활용하여 "증점품 안내" 폼 코드를 작성하였습니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>증정품 안내</title>
</head>

<body>
    <nav>
        <a href="https://moogie.tistory.com">홈</a>
        <a href="https://www.naver.com">네이버</a>
    </nav>
    <main>
        <h1>증정품 수령 및 안내</h1>
        <p>해당 제품을 구매해주셔서 진심으로 감사합니다. 증점품 수령에 관한 안내를 도와드리겠습니다.</p>
        <ul>
            <li>신청기간 : 2023.02.01 ~ 2023.02.28</li>
            <li>신청방법 : 해당 제품 구입 후 홈페이지 링크에서 설문지 작성</li>
            <li>제출서류 : 제품 구매 현금영수증 파일 제출</li>
        </ul>
        <hr>
        <form>
            <div>
                <label for="id_name">아이디 : </label>
                <input type="text" id="id_name" placeholder="아이디를 입력하세요" required>
            </div>
            <div>
                <p>어디서 구매하셨습니까?</p>
                <input type="radio" id="naver" name="shop" value="naver">
                <label for="naver">네이버쇼핑</label><br>
                <input type="radio" id="kakao" name="shop" value="kakao">
                <label for="kakao">카카오쇼핑</label><br>
                <input type="radio" id="coupang" name="shop" value="coupang">
                <label for="coupang">쿠팡</label><br>
            </div>
            <div>
                <label for="paper">현금영수증 파일 제출 : </label>
                <input type="file" id="paper">
            </div>
            <div>
                <label for="agree">증정품 처리 관련 정보를 인지하였습니다.</label>
                <input type="checkbox" id="agree" required>
            </div>
            <button>제출</button>
        </form>
    </main>
</body>
 </html>

폼을 마지막으로 HTML 요소는 이번 포스팅에서 끝나며 다음 포스팅 부터는 CSS에 대해 알아보려고 합니다.

 

저작자표시 비영리 변경금지 (새창열림)

'Web Programming' 카테고리의 다른 글

[HTML] Semantic Element  (0) 2023.02.20
[HTML] Entity Code  (0) 2023.02.20
[HTML] Head Element  (0) 2023.02.20
[HTML] Block & Inline Element  (0) 2023.02.15
[HTML] Lists  (0) 2023.02.15

티스토리툴바