Form Tag
- 웹서비스를 이용하려면 회원가입을 한 후, 로그인을 해야한다.
회원가입을 하려면 이메일 주소, 아이디, 비밀번호가 필요하다.
이러한 정보를 적을때 사용하는 tag가 form tag이다.
- 위의 정보는 서버 사이드 프로그램을 통해 DB에 저장된다.
Form Tag 사용방법
<form name = "폼 태그 이름" method = "데이터 전송 방식" action = "정보를 보낼 주소"></form> |
1. name : 폼 태그의 이름
2. method : 작성한 정보들을 어떠한 방식으로 보낼 것인지 (Get, Post)
3. action : 정보를 어디로 보낼것인지
input tag
- input tag는 type의 값에 따라 많은 기능을 제공한다.
<input type = "타입" name= "입력 폼의 이름" maxlength = "최대 입력 가능 글자 수"></input> |
1. type : 속성값에 따라 ID 입력폼, 비밀번호 입력 폼등이 될 수 있다.
2. name : 입력폼의 이름, 서버 사이드 언어에서 name값으로 전달된 정보들을 구분
3. maxlength : 입력 폼이 몇글자 까지 입력 가능하도록 설정할것인지 표시
Type 종류
text | <input type = "text" name= "userID" maxlength = "12"/> |
password | <input type = "password" name= "userPw" maxlength = "12"/> |
checkbox | 음악감상 <input type = "checkbox" name= "myHobby" value= "music" checked/> 영화감상 <input type = "checkbox" name= "myHobby" value= "movie"/> |
radio | 음악감상 <input type = "radio" name= "myHobby" value= "music"/> 영화감상 <input type = "radio" name= "myHobby" value= "movie"/> |
button | <input type = "button" value = "얌 버튼 클릭쫌 해바방"/> |
file (파일업로드) | <input type = "file" name = "attachedFile"/> |
search | 검색 <input type = "search" name= "search" /> |
reset
- 같은 폼 내에 있는 입력한 정보들이 모두 초기화 된다.
reset |
<form name = "폼 태그 이름" method = "post" action = "정보를 보낼 주소"> 아이디 <input type = "text" name= "userID"/> <input type = "reset" value= "다시입력" /> </form> |
submit
- 입력한 여러 값들을 action 속성에 입력된 페이지로 전송한다.
submit | <form name = "폼 태그 이름" method = "post" action = "정보를 보낼 주소"> 아이디 <input type = "text" name= "userID" value= "myid"/> <input type = "submit" value= "완료" /> </form> |
- HTML5에 새로 생긴 기능이다
- 이메일 주소의 규칙인 @(at)과 도메인이 있어야한다.
- 유효성에 어긋나면 submit버튼을 눌러도 제출되지 않는다.
<form name = "폼 태그 이름" method = "post" action = "정보를 보낼 주소"> email : <input type = "email" name= "email" value= "myEmail"/> <input type = "submit" value= "완료" /> </form> |
url
- HTML5에 새로 생긴 기능이다
- url 형태를 갖추지 않으면 유효성에 어긋나 submit버튼을 눌러도 제출되지 않는다.
url | <form name = "폼 태그 이름" method = "post" action = "정보를 보낼 주소"> <input type = "url"/> <input type = "submit" value= "submit/> </form> |
number
- HTML5에 새로 생긴 기능이다
- 숫자를 입력하는 폼
- 문자를 입력해도 입력되지 않는다.
- 스마트폰에서 입력폼을 이용할 경우 키보드의 숫자 키패드가 나오게 하려면 [pattern="\d*"]를 함께 사용해야한다
number | <form name = "폼 태그 이름" method = "post" action = "정보를 보낼 주소"> <input type = "number" pattern = "\d*"/> <input type = "submit" value= "submit/> </form> |
color
- HTML5에 새로 생긴 기능이다
- 색을 선택하는 기능
color | <form name = "폼 태그 이름" method = "post" action = "정보를 보낼 주소"> <input type = "color" /> </form> |
range
- HTML5에 새로 생긴 기능이다
- 색을 선택하는 기능
range | <input type = "range" min = "0" max = "100" value = "50" step = "10" /> |
placeholder
- input tag와 함께 사용할 수 있다.
- 입력 창에 어떠한 내용을 입력해야 하는지 알려주는 기능
- 실제 필요한 내용 입력시 자동으로 사라짐.
range | <input type = "text" placeholder = "아이디 입력" /> |
label
- label tag는 input tag와 짝을 이루어 사용
- 라디오 박스가 무엇을 의미하는지는 사용자가 볼 수 있는 명칭을 부여 할때 사용
- id 속성의 값은 한번만 사용해야한다.
- label 태그에서는 for라는 속성을 사용한다.
- label 태그에서 사용한 for 속성의 값과 input tag 의 id 속성값이 일치하여야한다.
label | <label for = "input tab의 id 속성값"> 명칭 </ label> <input type = "radio" name = "gd" value = "w" id = "이 페이지에서 사용할 고유한 이름" /> |
select
- 주로 회원가입 시 생년월일을 입력할 때 사용한다.
- 여러개의 값을 표시하려면 value가 담긴 option 태그를 사용해야 한다.
- select를 부모 태그로 하여 자식 태그로 option을 사용하는 구조
- option 태그를 선택하면 해당하는 옵션 태그가 가지는 값이 있어야 하므로 value값으로 표시
select | <select name = "birthMonth"> <option value = "1"> 1 <option /> <option value = "2"> 2 <option /> <option value = "3"> 3 <option /> <option value = "4"> 4 <option /> </ select> |
참고 문헌 : 웹토딩 시작하기 - 풀스택으로 만드는 나의 첫 홈페이지 (정보문화사)
'개발 > HTML' 카테고리의 다른 글
[HTML] 메타(meta) 태그 정리 / 메타 태그 종류 (0) | 2020.06.05 |
---|---|
[HTML] 폼태그 모음집 (0) | 2020.05.22 |
[HTML] 이미지 표현 / 동영상 / 음악 / 멀티미디어 / Tag (0) | 2020.05.21 |
[HTML] Table (tag, attribute) (0) | 2020.05.20 |
[HTML] 목록 List /<ul> / <ol> / <il> (0) | 2020.05.20 |