이번에 배운 내용은 폼형식에서 인풋과 레이블이다. 인풋은 사용자에게 정보를 받기위해 사용하는 태그라고 이해하면 된다. 레이블은 그러한 인풋을 연결지어 설명해주는 역할이라고 볼 수 있다.
<h1>
회원가입
</h1>
<form action="#" method="POST">
<label for="user_name">이름</label>
<input type="text" id="user_name" required placeholder="이름"/>제목을 회원가입이라고 하고 살펴보자. 먼저 form을 형성해주었다. form은 사용자에게 정보를 받는 것이 목적이다. 따라서 action속성을 통해 API를 입력해야한다. 그렇게 해야 사용자의 정보를 우리의 서버로 가져올 수 있다. 그러나 여기서는 패스하겠다. 그리고 method 속성은 GET | POST 가 있다.
GET과 POST모두 데이터를 전송하는 방식이다. GET은 URL에 정보를 담아서 보내는 방식이다. 길이에 제한이 있을 수 있다. POST는 body에 담겨서 전송되는 방식이다. 따라서 URL에 표시가 되지 않으며, 길이에 제한이 없다.
위의 코드는 아래와 같이 표현된다.
위의 코드에서 <input/>태그는 바로 닫히는 태그이다. type을 "text"로 설정하면서 텍스트 정보를 받을 수 있게 하였다. id 속성은 원하는 이름을 설정하고 레이블의 for속성에 같은 이름을 넣어서 연결시킨다. 그렇게하면 <label>태그에서 이름이라고 적은 글자를 클릭만 하더라도 입력창으로 연결된다.
<input>태그에서 required속성을 주게되면 반드시 입력해야 함을 의미한다. disabled 속성은 입력을 못하게하는 속성이다.
placeholder 속성은 실제 입력된 값은 아니며 입력이 되어있지 않을때 겉으로만 보이게하는 값이다. 참고로 value="~~" 속성을 줘서 초기값을 줄 수도 있다.
이번에는 좀더 확장하여 작성해보겠다.
<h1>
회원가입
</h1>
<form action="#" method="POST">
<label for="user_name">이름</label>
<input type="text" id="user_name" required placeholder="이름"/>
<br/>
<label for="user_id">아이디</label>
<input type="text" id="user_id" required placeholder="아이디" minlength="6" maxlength="15"/>
<br/>
<label for="user_password">비밀번호</label>
<input type="password" id = "user_password" required placeholder="비밀번호"minlength="6" maxlength="15"/>
<br/>
<label for="user_email">이메일</label>
<input type="email" id = "user_email" required placeholder="이메일"/>
<br/>
<label for="user_number">전화번호</label>
<input type="tel" id = "user_number" required placeholder="전화번호 (***-****-****)" pattern="[0-1]{3}-[0-9]{4}-[0-9]{4}" />
<br/>
<label for="user_age">만나이</label>
<input type="number" id = "user_age" required placeholder="만 나이" min="12" max="100" />
<br/>
<label for="user_profile">프로필 사진</label>
<input type="file" id = "user_profile" accept="image/*, video/*" required placeholder="프로필사진" />
</form>
다양한 속성을 사용하였다. 차례로 알아보자. 먼저 이름과 아이디에는 동일하게 텍스트 타입을 적용하였다. 그러나 아이디에 minlength 속성과 maxlength 속성을 통해 글자수를 제한시켰다.
비밀번호는 password타입을 주었다. 이는 우리가 흔히 알듯이 비밀번호를 입력하면 *로 가려지게 함을 의미한다. 이메일은 emil 타입이다. 이메일형식의 입력만 받겠다는 의미이다.
전화번호는 tel속성이다. 여기서는 pattern속성을 통해 좀 더 제한을 두었다. [0-9]를 통해 입력할 수 있는 숫자를 제한하고 {3}으로 길이를 각각 제한하였다.
만나이는 number속성으로 번호만을 받게 하였으며 min 과 max 속성으로 숫자의 크기를 제한하였다. 위에서 살펴본 글자수와 차이가 있으므로 주의하자.
프로필 사진은 file 타입을 통해 파일을 받도록 하였다. accept 속성을 통해서 파일의 형식을 제한할 수 있는데, 여기서는 image와 video는 모두 받을 수 있도록 하였다. 만약 .png파일만 받도록 하려면 accept=".png" 이라고 작성하면 된다.
여기서는 이해를 돕기위해 각 레이블을 </br>로 구분하여 나누었지만 실제로는 css를 이용하여 꾸미면 된다. </br> 태그는 남용할 필요가 없다.
프로필 사진 부분은 자동적으로 파일 선택 버튼이 생겼음을 알 수 있다.
참고
이 글은 구름에듀에서 관련 강의를 구매하여 수강 후 공부하며 작성한 글입니다.
모든 내용과 코드 및 이미지는 직접 재구성하였습니다.
김버그의 HTML&CSS는 재밌다 - 구름EDU
HTML&CSS를 한번에! 탄탄한 개념이해부터 실습까지 한 강의로 끝내기, 실무 가능한 실력으로 😎
edu.goorm.io
[HTML5]
'Language > HTML' 카테고리의 다른 글
| <HTML 기초> 08. 텍스트창 · 버튼 (0) | 2020.10.29 |
|---|---|
| <HTML 기초> 07. 라디오 · 체크 박스 (0) | 2020.10.27 |
| <HTML 기초> 05. 태그 : 인용 (0) | 2020.10.20 |
| <HTML 기초> 04. 태그 : 리스트 (0) | 2020.10.17 |
| <HTML 기초> 03. 태그 : 링크 · 이미지 (0) | 2020.10.16 |
