[HTML 기초] form(폼)태그와 input(인풋)태그, label태그

 

 

안녕하세요 PNcoding입니다 :)

 

오늘 배울 내용은 폼 요소로 쓰이는 태그들에 대하여 알아보도록 하겠습니다.

 

들어가기에 앞서 폼 요소들은 입력하는 공간을 통해 사용자로부터 정보를 전달받는 역할을 합니다.

즉, 사용자와 대화할 수 있는 인터렉티브(Interactive)한 영역이라고 볼 수 있습니다.

 

 

 

---

 

 

<form> 태그

폼 태그는 웹페이지에서 입력할 수 있는 양식을 만들 때 사용됩니다.

예를 들어 회원가입, 로그인, 게시판, 쇼핑몰 주문 등의 많은 곳에 사용되고 있습니다.

이렇게 입력받은 데이터들은 서버 혹은 다른 페이지에 전달해 줄 수 있으며, 폼 태그의 세세한 기능들은 주로 개발자(JavaScript)들이 다룬다고 보시면 되겠습니다.

 

속성

• action : 데이터를 전달할 url을 넣어줌
• method : 폼 요소를 전달하는 방식으로 POST와 GET 이 있습니다.

POST	url에 받은 데이터가 적혀 나오지 않음 보안에 적절 로그인 같은 기능에 활용
GET	url에 받은 데이터가 그대로 적혀 나옴 어떤 데이터를 전송하는지 그대로 나오기 때문에 보안에 취약 주로 검색 기능에 활용

 

폼태그의 형태는 이렇게 작성해 주시면 됩니다.

<form action="데이터를 보낼 주소" method="데이터 전송 방식">
    <input>
    <button></button>
</form>

 

 

---

 

 

<input> 태그

실제로 사용자가 입력하는 공간은 이 태그로 만들어집니다.

다양한 종류가 있으며, 형태는 이렇게 생겼습니다.

<input type="유형">

 

속성

• type : 인풋태그의 데이터 형식(종류)을 지정해 줄 때 사용. 기본값은 text
• placeholder : 입력할 공간에 어떤 내용을 입력할지 예시를 보여줄 수 있음
• id : html 문서 내에서 태그를 식별할 때 사용, label태그의 for속성과 함께 활용됨
• name : 인풋 요소의 이름을 지정해 줌, 서버로 데이터를 전송할 때의 데이터 명

 

종류

종류가 다양하기에 일반적으로 사용되는 타입의 특징만 알려드리도록 하겠습니다.

1. text

일반적인 텍스트를 입력받을 때 사용

아이디 같은 내용을 입력받을 때도 사용가능

<input type="text">

 

2. password

비밀번호를 입력받을 때 사용

입력받은 내용은 기호로 바뀌어 표현

하지만 form태그의 GET 방식으로 데이터를 전달 시 url에 입력한 비밀번호가 보이기 때문에 반드시 POST 방식으로 데이터를 전달해 줘야 함

<input type="password">

 

여기에 입력해 보세요

 

3. email

이메일을 입력받을 때 사용

이메일로 입력받았는지(@ 포함 여부)를 확인

<input type="email">

 

4. tel

전화번호를 입력받을 때 사용

<input type="tel">

 

5. url

url 주소를 입력받을 때 사용

<input type="url">

 

6. date

연, 월, 일을 입력받을때 사용

<input type="date">

 

7. time

시, 분, 초를 입력받을때 사용

<input type="time">

 

8. submit

type을 지정해 주면 기본적으로 "제출" 버튼 형태로 작성

value라는 속성으로 제출 문구를 바꾸어 줄 수 있음

<input type="submit" value="버튼문구변경">

 

 

 

반응형

 

9. button

버튼 형태로 작성

버튼 자체로는 아무런 기능을 할 수 없음

특정한 기능을 하기 위해서는 JavaScript작업을 추가해 주어야 함

<input type="button">

 

10. checkbox

체크박스 삽입

체크를 선택했다가 해제 가능

중복선택 가능

checked속성을 추가하여 미리 체크된 상태로 만들어 줄 수 있음

<input type="checkbox">

 

 

11. radio

체크박스와 유사하지만, 선택해제 불가능

여러 개의 선택지 중 하나를 선택할 때 사용 (단일 선택)

여러 개의 radio 요소들에게 name을 동일하게 지정해 주어 단일선택이 되도록 만들어 줌

<input type="radio" name="radio_cheked">
<input type="radio" name="radio_cheked">
<input type="radio" name="radio_cheked">

 

 

 

---

 

 

<label> 태그

인풋태그와 함께 사용되며, 인풋태그의 제목을 나타낼 때 사용해 줄 수 있습니다.

인풋태그에 지정된 id선택 자명을 label 태그의 for 속성값 안에 넣어주면 같이 연동을 시켜 줄 수 있습니다.

즉, 레이블 태그 내부의 내용을 클릭하였을 때 인풋태그가 작동되도록 만들어 줄 수 있습니다.

 

연동되지 않았을 때

<label>여기를 클릭해 주세요</label>
<input type="checkbox">

 

글자를 클릭해 보세요

여기를 클릭해 주세요

 

연동되었을 때

<label for="check_here">여기를 클릭해 주세요</label>
<input type="checkbox" id="check_here">

 

글자를 클릭해 보세요

여기를 클릭해 주세요

 

 

---

 

 

<button> 태그

시맨틱 태그입니다.

클릭 가능한 버튼을 만들 때 사용하며, input의 submit과 동일한 기능을 합니다.

<button>버튼</button>

 

시맨틱 태그가 궁금하신 분은 여기를 참고해 주시면 되겠습니다.

https://pncoding.tistory.com/32

[HTML 기초] 시맨틱 태그 (semantic tag)

 

---

 

 

<select> 태그 & <option> 태그

옵션 선택창을 만들어 줄 때 사용합니다.

select태그 내부에 option태그를 넣어 선택할 수 있도록 만들어 줍니다.

<select>
    <option>선택해주세요</option>
    <option>안녕하세요</option>
    <option>피엔코딩입니다</option>
</select>

 

선택해주세요 안녕하세요 피엔코딩입니다

 

 

 

---

 

 

여기까지 폼 요소의 기본적인 인풋태그의 종류에 대하여 알아보았습니다.

실제로 실생활에 아주 밀접하게 활용되고 있는 태그이며 처음 접하시는 분들에게 난이도가 있는 태그라 볼 수 있습니다.

 

어느 정도 HTML&CSS에 익숙해지시고 나서 깊게 공부해 보셔도 좋습니다 :)