[HTML5] form 태그 (폼 태그) 사용법 (input, label, select 태그)

2020. 12. 10. 08:00

form 태그

폼 태그는 웹서비스 이용 시 회원가입을 한 후 로그인을 해야 합니다. 회원 가입을 하기 위해서는 이메일 주소, 아이디, 비밀번호 등등이 필요한데, 이러한 정보들을 적을 때 form 태그를 사용하게 됩니다.

<form name="폼 태그 이름" action="데이터를 보낼 주소" method="데이터 전송 방식">

name : 해당 폼 태그의 이름
method : 작성한 정보를 보낼 방식 (전송 방식에는 GET과 POST가 있습니다.)
action : 작성된 데이터를 보낼 주소

<form 태그 안에 사용하는 여러 가지 입력 태그>

input 태그

<input type="타입" name="입력 폼의 이름" maxlength="최대 입력 가능 글자 수" value="표시되는 기본 값">

type : 속성 값에 따라, ID, 비밀번호, 이메일, 체크박스, 라디오 등등의 입력 폼이 될 수 있습니다.
name : 입력 폼의 이름
maxlength : 입력 폼에 입력 가능한 최대 글자 수

텍스트 입력 폼 (type="text")

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Cocoon</title>
</head>
<body>
  
아이디 <input type="text" name="ID" maxlength="10">

</body>
</html>

비밀번호 입력 폼 (type="password")

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Cocoon</title>
</head>
<body>  

비밀번호 <input type="password" name="PW" maxlength="10">

</body>
</html>

체크박스 폼 (type="checkbox")

체크박스 폼에서는 value라는 속성 값을 사용하는데, 값을 받기 위해 꼭 사용하여야 하며 value 속성을 명시하지 않으면 빈 값이 전송됩니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Cocoon</title>
</head>
<body>  
아메리카노<input type="checkbox" name="check" value="coffee">
카페모카<input type="checkbox" name="check" value="mocha">
콜드브루<input type="checkbox" name="check" value="coldbrew">
</body>
</html>

아메리카노<input type="checkbox" name="check" value="coffee" checked>

checked 옵션을 사용하면 기본적으로 체크된 상태로 표시가 가능합니다.

라디오 버튼 (type="radio")

라디오 버튼은 체크박스와 마찬가지로 이미 나열된 보기를 선택할 수 있는 기능을 가지고 있으며, 복수 선택이 가능한 체크박스와는 다르게 라디오 버튼은 1개만 선택할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Cocoon</title>
</head>
<body>  
남자<input type="radio" name="gender" value="man">
여자<input type="radio" name="gender" value="woman">
</body>
</html>

버튼 박스 (type="button")

눌렀을 때 이벤트가 발생하는 버튼을 생성합니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Cocoon</title>
</head>
<body>  
<input type="button" value="확인">
<input type="button" value="취소">
</body>
</html>

파일 업로드 (type="file")

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Cocoon</title>
</head>
<body>  
<input type="file" nmae="AttachedFile">
</body>
</html>

검색어 입력 폼 (type="search")

검색어 입력 폼은 검색어 입력 시 오른쪽에 [x] 버튼이 생성되고 [x] 버튼을 누르면 입력한 검색어가 사라집니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Cocoon</title>
</head>
<body>  
Google <input type="search" name="search">
</body>
</html>

입력값 초기화 (type="reset")

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Cocoon</title>
</head>
<body>  
 <input type="reset" value="리셋">
</body>
</html>

입력값 전송 (type="submit")

입력한 값들을 form의 action 속성에 입력된 페이지로 전송

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Cocoon</title>
</head>
<body>  
  <input type="text" name="" value="">
  <input type="submit" value="전송">
</body>
</html>

이메일 입력 (type="email")

이메일 주소의 규칙인 @(at)과 도메인이 없다면 유효성에 어긋나기 때문에 submit 버튼을 눌러도 제출되지 않습니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Cocoon</title>
</head>
<body>  
이메일 <input type="email" name="email">
<input type="submit" value="전송">
</body>
</html>

URL 입력 (type="url")

입력이 URL 형태를 갖추지 않는다면 유효성에 어긋나기 때문에 submit 버튼을 눌러도 제출되지 않습니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Cocoon</title>
</head>
<body>  
URL <input type="url">
<input type="submit" value="전송">
</body>
</html>

숫자 입력 (type="number")

스마트폰의 경우 이 입력 폼을 사용한다면 키보드의 숫자 키 패드가 나오게 하기 위해 pattern="\d*" 를 사용해야 합니다. 오른쪽 화살표 모양을 클릭하여 +1, -1을 해줄 수 있습니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Cocoon</title>
</head>
<body>
<input type="number" pattern="\d*">
</body>
</html>

색 지정 (type="color")

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Cocoon</title>
</head>
<body>
<input type="color">
</body>
</html>

슬라이드 방식으로 수를 출력하는 인터페이스 (type="range")

슬라이드 방식의 인터페이스. 최솟값, 최댓값, 이동 단위도 조정할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Cocoon</title>
</head>
<body>
<input type="range" min="0" max="100" value="50" step="10">
</body>
</html>

input 태그에 placeholder 설정

input 태그에서 placeholder 속성을 사용하면 입력창에 어떤 내용을 입력해야 하는지 알려줄 수 있으며, 해당 입력창에서 입력 시 자동으로 사라지므로 매우 편리한 기능입니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Cocoon</title>
</head>
<body>
아이디 <input type="text" placeholder="아이디를 입력하세요">
</body>
</html>

lebel 태그

label 태그는 input 태그와 같이 사용되는데, 예시로 성별을 선택하는 기능을 만들기 위해 라디오 박스 사용 시 해당 라디오 박스가 의미하는 바를 사용자가 알 수 있게 명칭을 부여할 때 label 태그를 사용합니다. label 태그의 for 속성과 input 태그의 id값을 같게 하면 label 태그를 클릭한 것만으로도 해당하는 input 태그를 클릭하는 것과 같은 효과를 가집니다.

<label for="input 태그의 id 속성 값">명칭</label>
<input type="radio" name="gender" value="m" id="이 페이지에서 사용할 고유한 이름">

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Cocoon</title>
</head>
<body>
<label for="man">남자</label>
<input type="radio" name="gender" value="m" id="man">
<label for="woman">여자</label>
<input type="radio" name="gender" value="m" id="woman">
</body>
</html>

select 태그

select 태그는 주로 회원 가입할 때 생년월일을 선택할 때 사용됩니다. 여러 개의 항목을 생성하기 위해서는 value가 담긴 option 태그를 사용해야 합니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Cocoon</title>
</head>
<body>
<select name="birthyear">
  <option label="1995">
  <option label="1996">
  <option label="1997">
  <option label="1998">
  <option label="1999">
  <option label="2000">
  <option label="2001">
</select>
</body>
</html>

📚 참고

참고 서적 - 웹코딩 시작하기 (저자 김태영)

저작자표시 비영리

'🌐WEB' 카테고리의 다른 글

[HTML5] 공간태그 - nav태그 / section태그 / article태그의 사용법 (0)	2020.12.12
[HTML5] 공간태그 - header태그와 footer태그의 사용법 (0)	2020.12.11
[HTML5] 공간태그 - div 태그와 span 태그의 사용법 (0)	2020.12.10
[HTML5] HTML 소개 및 태그 설명 (0)	2020.12.09
[WEB] 웹 개발을 위한 개발환경 구축 후 "Hello World!" 출력해보기 (0)	2020.12.08

코딩 공부 일지