<form> 태그라 하면, 우리가 회원가입 할때와 유사한 모양을 만들어주는 태그이다.
정형적인 태그고, 그 안에서 사용할 수 있는 많은 기능들이 있다.
<form>이라는 태그 안에서
<input type = ""> input 태그로 다양한 타입의 기능들을 사용할 수 있다.
1) text : 한 줄을 입력받는다.
2) password : 비밀번호용 기능 (암호처럼 보이지 않는다.)
3) checkbox : 다중 선택이 가능한 체크박스
4) radio : 단일 선택이 가능한 박스
5) button : 버튼, 사용자가 정의한 이벤트를 발생시킬 수 있음
6) file : 첨부 파일을 받을 수 있음
7) reset : 모든 것들을 초기화
8) hidden : 입력받지 않은 데이터를 전송
9) submit : form 태그로 입력받은 모든 데이터를 전송할 때 사용.
그럼, 간단한 폼 태그를 만들어보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action = "http://www.naver.com">
<label> 아이디 : <input type = "text" size = "50"> </label> <br>
<lable for = "pwd"> 비밀번호 : <input type = "password id = "pwd"> </label> <br>
<fieldset>
<legend><strong>희망연봉</strong></legend><br>
<input type = "radio" name="salary"> 12억 <br>
<input type = "radio" name="salary"> 24억 <br>
<input type = "radio" name="salary"> 36억 <br>
<input type = "radio" name="salary"> 48억 <br>
</fieldset>
<strong> 사용가능한 언어 (중복선택 가능) </strong> <br>
<input type ="checkbox" name = "lang"> JAVA <br>
<input type ="checkbox" name = "lang"> C <br>
<input type ="checkbox" name = "lang"> C++ <br>
<input type ="checkbox" name = "lang"> Python <br>
<input type ="checkbox" name = "lang"> HTML <br>
<br>
<strong> 취미 (중복선택 가능) </strong><br>
<input type ="checkbox" name = "hobby"> 코딩 <br>
<input type ="checkbox" name = "hobby"> 개발 <br>
<input type ="checkbox" name = "hobby"> 디버깅 <br>
<strong> 자기소개 </strong><br>
<textarea rows = "5" cols = "50"> </textarea><br>
<strong> 첨부파일 </strong><br>
<input type = "file" size = "50"><br>
<input type = "submit" value = "전송">
</body>
</html>
이렇게 만들어 보았다.
<label>은 무얼까?
레이블은 폼태그에서 텍스트처럼 사용한다.
레이블의 특징은 텍스트를 누르면
그 옆의 칸이나 체크박스로 커서가 옮겨진다는 것.
체크박스인 경우 체크가 된다.
fieldset은 하나의 묶음으로 보여지게 하고,
나머지는 설명한 부분과 동일하다.
그럼 form 태그 내에서 사용할 수 있는 많은 기능들을 알아보자.
<progress></progress>, <meter></meter>와 같은 진행도와 유사한 속성을 넣을 수 있고,
<input type =""> 안에서도 더 많은 속성이 있다.
1) time : 시간
2) month : 월
3) date : 날짜
4) range : 수량
5) number : 수량
6) search : 검색어
7) tel : 전화번호
8) email : 이메일
9) url : sns같은 주소
그럼 이걸 실제로 사용해보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action = "http://www.naver.com">
<progress> </progress> <br>
<progress value = "50"> </progress> <br>
<meter> </meter> <br>
시간 : <input type = "time"><br>
월 : <input type = "month"><br>
날짜 : <input type = "date" min = "2020-01-01" max = "2020-12-31"> <br>
수량 : <input type = "range" min = "1" max = "10" step = "2"><br>
수량 : <input type = "number" min = "1" max = "10"> <br>
검색어 : <input type = "search" size = "50"><br>
전화번호 : <input type = "tel" size = "50"
pattern = "(010|011|016|017|019)-\d{3,4}-\d{4}"
placeholder = "010-1234-5678 형태로 입력하세요."> <br>
이메일 : <input type = "email" size = "50" required autocomplete = "on"> <br>
SNS 주소 : <input type = "url" size = "50"> <br>
<input type = "button" value = "dd"> <br>
<button> 버튼 </button>
<button type = "reset"> 초기화 버튼 </button>
<button type = "submit"> 전송 버튼 </button>
<input type = "submit" src = "../images/submit.png" width = "140" height = "50"> <br>
<input type = "reset">
</form>
</body>
</html>
이렇게 만들어보았다. progress는 바처럼 생겼고,
시간과 월, 날짜 모두 GUI스럽게 입력받는다.
search는 단어나 글을 쓴 후 x버튼이 활성화되어
한번에 지울 수 있다.
전화번호에 pattern을 주어서 패턴과 맞지 않을
경우 경고를 띄우고, placeholder로 아무것도 입력하지 않았을 경우에도 설정한 글이 보이게 한다.
이메일 같은 경우 required 속성을 부여하여 필수 입력사항이 되고, autocomplete 속성으로 자동완성기능을 사용한다.
기본적인 기능이 좋아서 url이나 email을 사용하는 경우 @가 있는지 없는지도 검사해준다!
이렇게 HTML에 대해서 기본적인 형태를 알아보았는데,
다음부터는 CSS를 통해서 뼈대구조를 어떻게 꾸며나갈지에 대해서 알아보자~
'HTML&CSS&JS' 카테고리의 다른 글
| [HTML5] <table> 태그로 너무나도 심플한 게시판 모양 만들기 (0) | 2020.06.22 |
|---|---|
| [HTML5] <table> 태그로 계산기 모양 만들기 (0) | 2020.06.22 |
| [HTML5] <table> <td> <tr> <thead> <tfoot> 태그 (0) | 2020.06.22 |
| [HTML5] <audio> <video> <iframe> < embed> 태그 (0) | 2020.06.21 |
| [HTML5] <ol> <ul>, <li>, <header>, <section>, <footer> 태그 (0) | 2020.06.21 |
