티스토리 뷰
form 태그는 웹 페이지의 내용을 다른 웹페이지 또는 웹 서버에 전송 할 때 사용됩니다. 단순히 텍스트만 보여주는 웹 페이지일 경우 필요가 없지만 데이터를 보낼 필요가 있는 웹 페이지에서는 반드시 사용해야 하는 태그입니다. 예를들어 회원가입을 하는 웹 페이지의 경우 회원가입을 위해 입력했던 정보를 서버로 전송을 해줘야지 회원가입 요청에 대한 처리가 이루어 질 수 있습니다.
1. form 태그 |
먼저 form 태그의 중요 속성들에 대해서 알아 보겠습니다.
- action : form 내부의 데이터를 보내는 url 경로를 지정합니다.
- method : 데이터를 보내는 방식을 지정합니다. post와 get 방식이 있습니다.
- action : action에 의한 새로운 웹페이지가 열리는 방식을 지정합니다.
- autocomplete : form 내부의 입력요소들의 자동완성기능 활성화 여부 설정
- name : form 식별을 위한 이름
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <form action ="process/addUser" method = "post"> <h1>로그인</h1> <label>아이디</label> <input type = "text" name = "id"> <br/> <label>비밀번호</label> <input type = "password" name = "password"> <br/> <input type = "submit" value = "회원가입"> </form> </body> </html> | cs |
<body></body> 내부에 <form> 태그가 정의되어 있습니다. post 전송방식으로 "process/addUser" 경로에 form 태그 내부의 데이터를 전송하게 됩니다.
총 3개의 input 태그가 사용되었는데 type이 전부 다른 것을 확인 할 수 있습니다.
- text : 텍스트를 입력합니다.
- password : password를 입력하는 형식으로 textbox에 입력 시 '*'로 표시됩니다.
- submit : input의 내용들을 action에 정의한 경로로 데이터를 전송합니다.
2. 다른 Input 태그 type 살펴보기 |
1 2 3 4 5 6 | <form action ="process/addUser" method = "post"> <h1>로그인</h1> <input type = "radio" name = "gender" value = "남">남 <input type = "radio" name = "gender" value = "여">여 <input type = "submit" value = "회원가입"> </form> | cs |
첫 번째 type은 "radio" 입니다. 여러 선택 요소들중에서 하나만 선택이 가능합니다. 또한 선택 요소들끼리 그룹화하기 위해서는 반드시 name 속성값을 통일 시켜줍니다. 위에는 name 속성값이 "gender"인 선택요소들을 radio 형태로 보여줍니다. 다음은 checkbox 입니다.
1 2 3 4 5 6 | <form action ="process/addUser" method = "post"> <h1>로그인</h1> <input type = "checkbox" name = "lan" value = "eng" checked = "checked"> 영어 <input type = "checkbox" name = "lan" value = "kor"> 한국 <input type = "checkbox" name = "lan" value = "jap" checked = "checked"> 일어 </form> | cs |
radio와는 다르게 다중 선택이 가능합니다. 마찬가지로 선택 요소들을 그룹화 하기 위에 name 속성값을 "lan"으로 통일시켜 주었고 checked 속성을 이용하여 default로 check 여부를 설정 할 수 있습니다. 다음은 file 속성값입니다.
1 2 3 4 | <form action ="process/addUser" method = "post"> <h1>로그인</h1> <input type = "file" name = ""> </form> | cs |
type 속성값으로 "file"을 지정하게 되면 위와 같이 파일을 선택할 수 있습니다.
'Programming > HTML&CSS' 카테고리의 다른 글
| [HTML5/CSS3] 간단한 웹 페이지 레이아웃 구성 및 시맨틱 태그 (0) | 2019.03.23 |
|---|---|
| [HTML5/CSS3] span 태그 & div 태그의 차이 (0) | 2019.03.22 |
| [HTML5/CSS3] HTML 기초 강좌 - 테이블 태그 (<table> 태그) (0) | 2019.03.20 |
| [HTML/CSS] HTML 기초 강좌 - ul/li 태그 & img 태그 (0) | 2019.03.19 |
| [HTML5/CSS3] HTML 기초 강좌 - h태그와 a태그에 대해 알아보자 (0) | 2019.03.19 |